From 1a6448e195cd55cad8db702bd3393e5bf91443a1 Mon Sep 17 00:00:00 2001
From: Ruben Bimberg <ruben.bimberg@mni.thm.de>
Date: Mon, 25 Oct 2021 14:50:38 +0200
Subject: [PATCH] Adjust elements to new header layout
---
.../shared/header/header.component.html | 57 ++++++++-----------
.../shared/header/header.component.scss | 8 ++-
.../shared/header/header.component.ts | 12 ++--
.../shared/tag-cloud/tag-cloud.component.ts | 2 +-
src/theme/theme.service.ts | 20 +++++--
5 files changed, 52 insertions(+), 47 deletions(-)
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index d21862632..eea60d4da 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -22,7 +22,7 @@
</span>
</button>
- <div class="header-content-container">
+ <div class="header-content-container" [ngClass]="{'darken': themeService.currentTheme.isDark}">
<div *ngIf="toggleUserActivity">
<div class="userActivityIcon"
matTooltip="{{'header.users-online' | translate}}"></div>
@@ -34,14 +34,14 @@
{{'header.moderation-warning'|translate}}
</h2>
- <button mat-flat-button
- tabindex="0"
- *ngIf="deviceType === 'desktop' && !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>
+ <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>
<button mat-flat-button
tabindex="0"
@@ -66,25 +66,6 @@
<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') &&
- deviceType === 'desktop'"
- 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">
- <mat-icon style="color: red" matTooltip="{{ 'header.moderation-enabled' | translate }}">
- gavel
- </mat-icon>
- </span>
-
<!--Feedback im Hörsaal-->
<h2 class="header-slogan-mobile"
*ngIf="router.url.includes('home') && deviceType === 'mobile'"
@@ -98,10 +79,11 @@
{{ 'header.home-header' | translate }}
</h2>
- <h1
- *ngIf="room && room.questionsBlocked">
- {{'header.questions-blocked'|translate}}
- </h1>
+ <span *ngIf="room && room.questionsBlocked">
+ <mat-icon style="color: red;" [matTooltip]="'header.questions-blocked' | translate">
+ block
+ </mat-icon>
+ </span>
<!--Topic Cloud-->
<div class="topic-cloud-btns"
@@ -212,12 +194,21 @@
<button mat-menu-item
tabindex="0"
*ngIf="user && user.role > 0 && !router.url.includes('/participant/') &&
- !router.url.endsWith('moderator/comments') && deviceType === 'mobile'"
+ !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') && deviceType === 'mobile'"
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index 0423b7557..c494f368f 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -39,7 +39,7 @@ mat-toolbar-row {
display: flex;
flex-direction: row;
flex: 1;
- justify-content: space-around;
+ justify-content: space-evenly;
align-items: center;
overflow: hidden;
@@ -57,6 +57,11 @@ mat-toolbar-row {
}
}
}
+
+ &.darken > button {
+ background-color: var(--dialog);
+ color: var(--on-dialog)
+ }
}
.topic-cloud-btns {
@@ -195,7 +200,6 @@ h1 {
display: inline-block;
width: 25px;
height: 25px;
- margin-left: 25px;
margin-bottom: -5px;
background-color: var(--primary);
-webkit-mask-image: url("../../../../assets/icons/activity.svg");
diff --git a/src/app/components/shared/header/header.component.ts b/src/app/components/shared/header/header.component.ts
index 2e64ca1d4..55aa4acee 100644
--- a/src/app/components/shared/header/header.component.ts
+++ b/src/app/components/shared/header/header.component.ts
@@ -30,13 +30,15 @@ import { HeaderService } from '../../../services/util/header.service';
import { OnboardingService } from '../../../services/util/onboarding.service';
import { WorkerConfigDialogComponent } from '../_dialogs/worker-config-dialog/worker-config-dialog.component';
import { ArsComposeHostDirective } from '../../../../../projects/ars/src/lib/compose/ars-compose-host.directive';
+import { ThemeService } from '../../../../theme/theme.service';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
-export class HeaderComponent implements OnInit,AfterViewInit {
+export class HeaderComponent implements OnInit, AfterViewInit {
+ @ViewChild(ArsComposeHostDirective) host: ArsComposeHostDirective;
user: User;
cTime: string;
shortId: string;
@@ -52,7 +54,6 @@ export class HeaderComponent implements OnInit,AfterViewInit {
userActivity = 0;
deviceType = localStorage.getItem('deviceType');
private _subscriptionRoomService = null;
- @ViewChild(ArsComposeHostDirective)host:ArsComposeHostDirective;
constructor(public location: Location,
private authenticationService: AuthenticationService,
@@ -70,12 +71,13 @@ export class HeaderComponent implements OnInit,AfterViewInit {
private wsRoomService: WsRoomService,
private topicCloudAdminService: TopicCloudAdminService,
private headerService: HeaderService,
- private onboardingService: OnboardingService
+ private onboardingService: OnboardingService,
+ public themeService: ThemeService
) {
}
- ngAfterViewInit(){
- this.headerService.initHeader(()=>this);
+ ngAfterViewInit() {
+ this.headerService.initHeader(() => this);
}
ngOnInit() {
diff --git a/src/app/components/shared/tag-cloud/tag-cloud.component.ts b/src/app/components/shared/tag-cloud/tag-cloud.component.ts
index 7f8955384..510f32dfc 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.ts
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.ts
@@ -400,7 +400,7 @@ export class TagCloudComponent implements OnInit, OnDestroy, AfterContentInit {
this.topicCloudAdmin.setAdminData(admin, false, this.userRole);
if (this.deviceInfo.isCurrentlyMobile) {
const defaultParams = new CloudParameters();
- defaultParams.resetToDefault(this.themeService.getThemeByKey(this.themeService.themeName).isDark);
+ defaultParams.resetToDefault(this.themeService.currentTheme.isDark);
data.fontSizeMin = defaultParams.fontSizeMin;
data.fontSizeMax = defaultParams.fontSizeMax;
}
diff --git a/src/theme/theme.service.ts b/src/theme/theme.service.ts
index d35a31290..2a1b2f230 100644
--- a/src/theme/theme.service.ts
+++ b/src/theme/theme.service.ts
@@ -7,8 +7,7 @@ import { Theme } from './Theme';
providedIn: 'root'
})
export class ThemeService {
- themeName = localStorage.getItem('theme');
- private activeThem = new BehaviorSubject(this.themeName);
+ private activeThem = new BehaviorSubject(localStorage.getItem('theme'));
private themes: Theme[] = [];
constructor() {
@@ -33,19 +32,28 @@ export class ThemeService {
return 0;
});
const isDark = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : true;
- const selectedTheme = this.themes.find(elem => elem.key === this.themeName);
- if (!this.themeName || !selectedTheme || selectedTheme.isDark !== isDark) {
+ let currentTheme = this.currentThemeName;
+ const selectedTheme = this.themes.find(elem => elem.key === currentTheme);
+ if (!currentTheme || !selectedTheme || selectedTheme.isDark !== isDark) {
for (let i = this.themes.length - 1; i > 0; i--) {
const theme = this.themes[i];
if (theme.isDark === isDark) {
- this.themeName = theme.key;
+ currentTheme = theme.key;
break;
}
}
- this.activate(this.themeName);
+ this.activate(currentTheme);
}
}
+ get currentThemeName(): string {
+ return this.activeThem.value;
+ }
+
+ get currentTheme(): Theme {
+ return this.getThemeByKey(this.currentThemeName);
+ }
+
public getTheme() {
return this.activeThem.asObservable();
}
--
GitLab