From 92dcfb60184690203a352f85484a858bd6132d69 Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Sat, 18 Apr 2020 14:05:19 +0200
Subject: [PATCH] Person/user icon for questionwall button and comments
---
.../shared/header/header.component.html | 2 +-
.../question-wall.component.html | 16 ++++------
.../question-wall.component.scss | 29 ++++++++++++++++++-
3 files changed, 35 insertions(+), 12 deletions(-)
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index fa0aa95d2..a9a2ef547 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -17,7 +17,7 @@
*ngIf="router.url.includes('comments') && deviceType === 'desktop'"></span>
<button *ngIf="router.url.includes('comments') && deviceType === 'desktop'"
mat-raised-button class="question-focus-btn" routerLink="participant/room/{{shortId}}/comments/questionwall">
- <mat-icon svgIcon="beamer"></mat-icon>
+ <mat-icon>person</mat-icon>
<span class="question-focus-btn-txt">{{'header.question-wall' | translate}}</span>
</button>
<span class="fill-remaining-space"
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.html b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
index f4ad2b3c8..21a2ebfd4 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.html
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.html
@@ -28,12 +28,9 @@
<div class="questionwall-present-box-inner">
<ng-container *ngIf="commentFocus">
<ars-row class="questionwall-present-meta">
- <ars-col>
- <h2 class="questionwall-present-meta-user">#{{commentFocus.comment.userNumber}}</h2>
- </ars-col>
- <ars-col>
- <h2 class="questionwall-present-meta-timestamp">{{commentFocus.timeAgo}}</h2>
- </ars-col>
+ <i class="questionwall-icon questionwall-present-meta-icon">person</i>
+ <h2 class="questionwall-present-meta-user">{{commentFocus.comment.userNumber}}</h2>
+ <h2 class="questionwall-present-meta-timestamp">{{commentFocus.timeAgo}}</h2>
</ars-row>
<ars-row>
<p class="questionwall-present">{{commentFocus.comment.body}}</p>
@@ -57,10 +54,9 @@
<ars-row ars-flex-box
(click)="focusComment(comment)"
style="box-sizing:border-box;padding:16px;cursor:pointer">
- <ars-col>
- <p class="questionwall-comment-user">#{{comment.comment.userNumber}}</p>
- </ars-col>
- <ars-col>
+ <ars-col class="questionwall-comment-meta">
+ <i class="questionwall-icon">person</i>
+ <p class="questionwall-comment-user">{{comment.comment.userNumber}}</p>
<p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
</ars-col>
<ars-fill></ars-fill>
diff --git a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
index 57493392f..646ce06b1 100644
--- a/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
+++ b/src/app/components/shared/questionwall/question-wall/question-wall.component.scss
@@ -6,6 +6,16 @@
}
.questionwall{
+ &-icon{
+ font-family:'Material Icons', serif;
+ font-weight:normal;
+ font-style:normal;
+ font-size:18px;
+ line-height:18px;
+ padding:0;
+ margin:0;
+ color:var(--ars-header-color);
+ }
&-header{
background-color:var(--ars-foreground-color);
border-bottom:solid 1px var(--ars-border-color);
@@ -21,6 +31,11 @@
}
}
&-comment{
+ &-meta{
+ display:flex;
+ justify-content:start;
+ flex-direction:row;
+ }
&-border{
&-on{
box-shadow:inset 0px 0px 0px 1px var(--ars-button-color-light);
@@ -32,11 +47,13 @@
&-timestamp{
color:var(--ars-paragraph-color);
font-size:14px;
+ line-height:18px;
}
&-user{
color:var(--ars-header-color);
font-size:14px;
padding-right:8px;
+ line-height:18px;
}
&-body{
hyphens:auto;
@@ -85,10 +102,20 @@
}
&-meta{
padding-top:16px;
+ display:flex;
+ justify-content:start;
+ flex-direction:row;
+ :first-child{
+ padding-left:32px;
+ }
+ &-icon{
+ font-size:20px;
+ line-height:20px;
+ }
&-user{
font-family:Roboto, 'sans-serif';
font-size:18px;
- padding-left:32px;
+ padding-left:4px;
padding-right:16px;
color:var(--ars-header-color);
}
--
GitLab