From c756d6c133b020cb29339cd97d6611b66aac75e7 Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Fri, 22 Oct 2021 13:13:31 +0200
Subject: [PATCH] Change header structure and implement buttons in header
[Ticket: #678]
---
.../shared/header/header.component.html | 264 ++++++++----------
.../shared/header/header.component.scss | 32 ++-
2 files changed, 147 insertions(+), 149 deletions(-)
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index e067a3155..cc5b95bab 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -22,102 +22,122 @@
</span>
</button>
- <ng-container *ngIf="toggleUserActivity">
- <div class="userActivityIcon"
- matTooltip="{{'header.users-online' | translate}}"></div>
- <p class="userActivityTxt">{{userActivity}}</p>
- </ng-container>
-
- <span class="fill-remaining-space"
- *ngIf="router.url.endsWith('/moderator/comments')"></span>
-
- <h2 class="oldtypo-h2"
- *ngIf="router.url.endsWith('/moderator/comments') && deviceType === 'desktop'">
- {{'header.moderation-warning'|translate}}
- </h2>
-
- <span class="fill-remaining-space"></span>
-
- <h2 class="oldtypo-h2"
- *ngIf="deviceType === 'desktop' && router.url !== '/home'">
- {{cTime}}
- </h2>
-
- <span class="fill-remaining-space"
- *ngIf="moderationEnabled && deviceType === 'desktop' && router.url.includes('comments')"></span>
- <span
- *ngIf="moderationEnabled && router.url.includes('comments')"
- class="moderation-enabled"
- fxLayoutAlign="center center">
- <mat-icon style="color: red" matTooltip="{{ 'header.moderation-enabled' | translate }}">
- gavel
- </mat-icon>
- </span>
-
- <span class="fill-remaining-space"
- *ngIf="room && room.questionsBlocked"></span>
-
- <h1
- *ngIf="room && room.questionsBlocked">
- {{'header.questions-blocked'|translate}}
- </h1>
-
- <!--Topic Cloud-->
- <div class="topic-cloud-btns"
- [ngClass]="{'noOfQuestions': deviceType === 'desktop'}"
- *ngIf="router.url.includes('tagcloud')"
- ars-flex-box>
- <ars-col
- [xp]="16"
- [extra]="true">
- <button mat-icon-button
- disableRipple="true"
- *ngIf="isAdminConfigEnabled"
- class="pseudo-button"
- matTooltip="{{'header.overview-admin-config-enabled' | translate}}">
- <mat-icon class="oldtypo-h2 comment_tag-icon"
- style="color: red !important;">warning
- </mat-icon>
- </button>
- <button mat-icon-button
- disableRipple="true"
- class="pseudo-button"
- matTooltip="{{'header.overview-question-tooltip' | translate}}">
- <mat-icon class="oldtypo-h2 comment_tag-icon">comment</mat-icon>
- <span style="margin-left: 0.25em;">{{commentsCountQuestions}}</span>
- </button>
- <button mat-icon-button
- disableRipple="true"
- class="pseudo-button"
- matTooltip="{{'header.overview-questioners-tooltip' | translate}}">
- <mat-icon class="oldtypo-h2 comment_tag-icon">person</mat-icon>
- <span style="margin-left: 0.25em;">{{commentsCountUsers}}</span>
- </button>
- <button mat-icon-button
- disableRipple="true"
- class="pseudo-button"
- matTooltip="{{'header.overview-keywords-tooltip' | translate}}">
- <mat-icon svgIcon="hashtag"
- class="oldtypo-h2 comment_tag-icon"></mat-icon>
- <span style="margin-left: 0.25em;">{{commentsCountKeywords}}</span>
- </button>
- </ars-col>
- </div>
+ <div class="header-content-container">
+ <div *ngIf="toggleUserActivity">
+ <div class="userActivityIcon"
+ matTooltip="{{'header.users-online' | translate}}"></div>
+ <p class="userActivityTxt">{{userActivity}}</p>
+ </div>
- <!--Feedback im Hörsaal-->
- <h2 class="header-slogan-mobile"
- *ngIf="router.url.includes('home') && deviceType === 'mobile'"
- fxLayoutAlign="center center">
- {{ 'header.home-header-mobile' | translate }}
- </h2>
+ <h2 class="oldtypo-h2"
+ *ngIf="router.url.endsWith('/moderator/comments') && deviceType === 'desktop'">
+ {{'header.moderation-warning'|translate}}
+ </h2>
- <h2 class="header-slogan-desktop"
- *ngIf="router.url.includes('home') && deviceType === 'desktop'"
+ <button mat-flat-button
+ tabindex="0"
+ *ngIf="deviceType !== 'mobile' && !router.url.endsWith('moderator/comments') && isSafari === 'false' && router.url.endsWith('/comments')"
+ routerLink="participant/room/{{shortId}}/comments/questionwall">
+ <mat-icon class="beamer-icon" svgIcon="beamer"></mat-icon>
+ <span>{{'header.questionwall' | translate}}</span>
+ </button>
+
+ <button mat-flat-button
+ tabindex="0"
+ *ngIf="!router.url.endsWith('moderator/comments') && router.url.endsWith('/comments')"
+ (click)="navigateTopicCloud()">
+ <mat-icon>cloud</mat-icon>
+ <span>{{'header.tag-cloud' | translate}}</span>
+ </button>
+
+ <h2 class="oldtypo-h2"
+ *ngIf="deviceType === 'desktop' && router.url !== '/home'">
+ {{cTime}}
+ </h2>
+
+ <button mat-flat-button
+ tabindex="0"
+ *ngIf="!router.url.endsWith('moderator/comments') && router.url.endsWith('/comments')"
+ routerLink="quiz">
+ <mat-icon>timer</mat-icon>
+ <span>{{'header.quiz-now' | translate}}</span>
+ </button>
+
+ <button mat-flat-button
+ tabindex="0"
+ *ngIf="user && user.role > 0 && !router.url.includes('/participant/') &&
+ !router.url.endsWith('moderator/comments') && router.url.endsWith('/comments')"
+ routerLink="moderator/room/{{shortId}}/moderator/comments">
+ <mat-icon>visibility_off</mat-icon>
+ <span>{{'header.moderationboard' | translate}}</span>
+ </button>
+
+ <span
+ *ngIf="moderationEnabled && router.url.includes('comments')"
+ class="moderation-enabled"
fxLayoutAlign="center center">
- {{ 'header.home-header' | translate }}
- </h2>
+ <mat-icon style="color: red" matTooltip="{{ 'header.moderation-enabled' | translate }}">
+ gavel
+ </mat-icon>
+ </span>
- <span class="fill-remaining-space"></span>
+ <!--Feedback im Hörsaal-->
+ <h2 class="header-slogan-mobile"
+ *ngIf="router.url.includes('home') && deviceType === 'mobile'"
+ fxLayoutAlign="center center">
+ {{ 'header.home-header-mobile' | translate }}
+ </h2>
+
+ <h2 class="header-slogan-desktop"
+ *ngIf="router.url.includes('home') && deviceType === 'desktop'"
+ fxLayoutAlign="center center">
+ {{ 'header.home-header' | translate }}
+ </h2>
+
+ <h1
+ *ngIf="room && room.questionsBlocked">
+ {{'header.questions-blocked'|translate}}
+ </h1>
+
+ <!--Topic Cloud-->
+ <div class="topic-cloud-btns"
+ *ngIf="router.url.includes('tagcloud')"
+ ars-flex-box>
+ <ars-col>
+ <button mat-icon-button
+ disableRipple="true"
+ *ngIf="isAdminConfigEnabled"
+ class="pseudo-button"
+ matTooltip="{{'header.overview-admin-config-enabled' | translate}}">
+ <mat-icon class="oldtypo-h2 comment_tag-icon"
+ style="color: red !important;">warning
+ </mat-icon>
+ </button>
+ <button mat-icon-button
+ disableRipple="true"
+ class="pseudo-button"
+ matTooltip="{{'header.overview-question-tooltip' | translate}}">
+ <mat-icon class="oldtypo-h2 comment_tag-icon">comment</mat-icon>
+ <span style="margin-left: 0.25em;">{{commentsCountQuestions}}</span>
+ </button>
+ <button mat-icon-button
+ disableRipple="true"
+ class="pseudo-button"
+ matTooltip="{{'header.overview-questioners-tooltip' | translate}}">
+ <mat-icon class="oldtypo-h2 comment_tag-icon">person</mat-icon>
+ <span style="margin-left: 0.25em;">{{commentsCountUsers}}</span>
+ </button>
+ <button mat-icon-button
+ disableRipple="true"
+ class="pseudo-button"
+ matTooltip="{{'header.overview-keywords-tooltip' | translate}}">
+ <mat-icon svgIcon="hashtag"
+ class="oldtypo-h2 comment_tag-icon"></mat-icon>
+ <span style="margin-left: 0.25em;">{{commentsCountKeywords}}</span>
+ </button>
+ </ars-col>
+ </div>
+ </div>
<mat-menu #userMenu="matMenu"
[overlapTrigger]="false">
@@ -175,57 +195,15 @@
<!-- Question board -->
<ng-container *ngIf="router.url.endsWith('/comments')">
- <ng-container>
-
- <button mat-menu-item
- *ngIf="user && user.role > 0 && !router.url.includes('/comment/') && !router.url.endsWith('/tagcloud') && !router.url.endsWith('moderator/comments')"
- tabindex="0"
- (click)="showQRDialog();">
- <mat-icon svgIcon="qrcode"
- class="header-icons qrcode">
- </mat-icon>
- <span>{{'header.room-qr' | translate}}</span>
- </button>
-
- <button mat-menu-item
- tabindex="0"
- *ngIf="user && user.role > 0 && !router.url.includes('/participant/') && !router.url.endsWith('moderator/comments')"
- routerLink="moderator/room/{{shortId}}/moderator/comments">
- <mat-icon>
- visibility_off
- </mat-icon>
- <span>{{'header.moderationboard' | translate}}</span>
- </button>
-
- <button mat-menu-item
- tabindex="0"
- *ngIf="deviceType !== 'mobile' && !router.url.endsWith('moderator/comments') && isSafari === 'false'"
- routerLink="participant/room/{{shortId}}/comments/questionwall">
- <mat-icon class="beamer-icon"
- svgIcon="beamer">
- </mat-icon>
- <span>{{'header.questionwall' | translate}}</span>
- </button>
-
- <button mat-menu-item
- tabindex="0"
- *ngIf="!router.url.endsWith('moderator/comments')"
- (click)="navigateTopicCloud()">
- <mat-icon>cloud
- </mat-icon>
- <span>{{'header.tag-cloud' | translate}}</span>
- </button>
-
- <button mat-menu-item
- tabindex="0"
- *ngIf="!router.url.endsWith('moderator/comments')"
- routerLink="quiz">
- <mat-icon>timer
- </mat-icon>
- <span>{{'header.quiz-now' | translate}}</span>
- </button>
-
- </ng-container>
+ <button mat-menu-item
+ *ngIf="user && user.role > 0 && !router.url.includes('/comment/') && !router.url.endsWith('/tagcloud') && !router.url.endsWith('moderator/comments')"
+ tabindex="0"
+ (click)="showQRDialog();">
+ <mat-icon svgIcon="qrcode"
+ class="header-icons qrcode">
+ </mat-icon>
+ <span>{{'header.room-qr' | translate}}</span>
+ </button>
</ng-container>
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index 7b638a9af..0423b7557 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -35,11 +35,28 @@ mat-toolbar-row {
font-weight: bold;
}
-.noOfQuestions {
- position: absolute !important;
- right: 130px !important;
- padding: 10px !important;
- margin: 0 !important;
+.header-content-container {
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ justify-content: space-around;
+ align-items: center;
+ overflow: hidden;
+
+ > button {
+ background-color: var(--primary-variant);
+ border-radius: 5px;
+
+ &:hover {
+ color: var(--on-secondary) !important;
+ background-color: var(--secondary) !important;
+
+ mat-icon {
+ color: var(--on-secondary) !important;
+ background-color: var(--secondary) !important;
+ }
+ }
+ }
}
.topic-cloud-btns {
@@ -127,6 +144,7 @@ svg {
.beamer-icon {
transform: scale(1.4);
+ margin-right: 5px;
}
.mat-menu-inner-title {
@@ -174,10 +192,11 @@ h1 {
}
.userActivityIcon {
+ display: inline-block;
width: 25px;
height: 25px;
margin-left: 25px;
- margin-bottom: 5px;
+ margin-bottom: -5px;
background-color: var(--primary);
-webkit-mask-image: url("../../../../assets/icons/activity.svg");
mask-image: url("../../../../assets/icons/activity.svg");
@@ -187,6 +206,7 @@ h1 {
}
.userActivityTxt {
+ display: inline-block;
color: var(--primary);
margin-left: 5px;
font-size: 14px;
--
GitLab