From cd23af0ee5c8be5c1c859e61a8e7561c2497159f Mon Sep 17 00:00:00 2001
From: Lukas Haase <lukas.haase@mni.thm.de>
Date: Thu, 9 Apr 2020 12:04:38 +0200
Subject: [PATCH] Highlight Questionwall button, add usernumber to questions
---
.../shared/header/header.component.html | 6 +++--
.../shared/header/header.component.scss | 11 +++++++++
.../question-wall.component.html | 16 +++++++++++--
.../question-wall.component.scss | 24 +++++++++++++++----
4 files changed, 49 insertions(+), 8 deletions(-)
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index 049089ded..bde69f23b 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -15,8 +15,10 @@
</h2>
<span class="fill-remaining-space"
*ngIf="router.url.includes('comments') && deviceType === 'desktop'"></span>
- <button *ngIf="router.url.includes('comments') && deviceType === 'desktop'" mat-button routerLink="participant/room/{{shortId}}/comments/questionwall">
- <span class="oldtypo-h3">Question Focus</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>
+ <span class="question-focus-btn-txt">Question Focus</span>
</button>
<span class="fill-remaining-space"
*ngIf="router.url.includes('comments') && user.role === 3 && deviceType === 'desktop'"></span>
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index 8066d3764..645b0b0ce 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -51,3 +51,14 @@ svg {
-webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
filter: invert(100%);
}
+
+.question-focus-btn{
+ background-color:var(--primary);
+ *{
+ color:var(--on-primary);
+ }
+}
+
+.question-focus-btn-txt{
+ padding-left:6px;
+}
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 4a61e63fb..f4ad2b3c8 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
@@ -27,8 +27,17 @@
<ars-row class="questionwall-present-box-outer">
<div class="questionwall-present-box-inner">
<ng-container *ngIf="commentFocus">
- <h2 class="questionwall-present-timestamp">{{commentFocus.timeAgo}}</h2>
- <p class="questionwall-present">{{commentFocus.comment.body}}</p>
+ <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>
+ </ars-row>
+ <ars-row>
+ <p class="questionwall-present">{{commentFocus.comment.body}}</p>
+ </ars-row>
</ng-container>
<ng-container *ngIf="!commentFocus">
<p class="questionwall-present-introduction-title">{{'question-wall.intro-title' | translate}}</p>
@@ -48,6 +57,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>
<p class="questionwall-comment-timestamp">{{comment.timeAgo}}</p>
</ars-col>
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 4cc0163dd..57493392f 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
@@ -33,6 +33,11 @@
color:var(--ars-paragraph-color);
font-size:14px;
}
+ &-user{
+ color:var(--ars-header-color);
+ font-size:14px;
+ padding-right:8px;
+ }
&-body{
hyphens:auto;
word-break:break-word;
@@ -78,10 +83,21 @@
flex-shrink:1;
}
}
- &-timestamp{
- font-size:18px;
- padding:32px 32px 0 32px;
- color:var(--ars-paragraph-color);
+ &-meta{
+ padding-top:16px;
+ &-user{
+ font-family:Roboto, 'sans-serif';
+ font-size:18px;
+ padding-left:32px;
+ padding-right:16px;
+ color:var(--ars-header-color);
+ }
+ &-timestamp{
+ font-family:Roboto, 'sans-serif';
+ font-size:18px;
+ font-weight:400;
+ color:var(--ars-paragraph-color);
+ }
}
&-introduction{
&-title{
--
GitLab