diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index a3bc001b0597366fabd3485001a40e9d46c72e87..391372186bb1c1a71525ae5694016e7e334789f3 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -1,28 +1,81 @@
<footer>
<mat-toolbar id="footer-toolbar">
- <button (click)="navToBlog()" *ngIf="router.url !== '/home'" mat-button>
- <mat-icon>notes</mat-icon>
+ <button mat-button (click)="navToBlog()" *ngIf="router.url !== '/home'">
+ <mat-icon>ondemand_video</mat-icon>
<span *ngIf="deviceType === 'desktop'">
{{ 'footer.blog' | translate }}
</span>
</button>
- <button (click)="showDemo()" *ngIf="router.url === '/home'" mat-button>
+ <button mat-button (click)="showDemo()" *ngIf="router.url === '/home'">
<mat-icon>ondemand_video</mat-icon>
- {{ 'footer.demo' | translate}}
+ <span *ngIf="deviceType === 'desktop'">
+ {{ 'footer.demo' | translate }}
+ </span>
+ </button>
+
+ <span class="fill-remaining-space"></span>
+ <button mat-button [matMenuTriggerFor]="themeMenu">
+ <mat-icon>palette</mat-icon>
+ <span *ngIf="deviceType === 'desktop'">
+ {{'footer.style' | translate}}
+ </span>
+ </button>
+
+ <span class="fill-remaining-space"></span>
+ <button mat-button [matMenuTriggerFor]="langMenu">
+ <mat-icon>language</mat-icon>
+ <span *ngIf="deviceType === 'desktop'">
+ {{'footer.language' | translate}}
+ </span>
</button>
+
<span class="fill-remaining-space"></span>
- <button (click)="navToDSGVO()" mat-button>
+ <button mat-button (click)="navToDSGVO()">
<mat-icon>security</mat-icon>
<span *ngIf="deviceType === 'desktop'">
{{ 'footer.dsgvo' | translate}}
</span>
</button>
<span class="fill-remaining-space"></span>
- <button (click)="navToImprint()" mat-button>
+ <button mat-button (click)="navToImprint()">
<mat-icon>info</mat-icon>
<span *ngIf="deviceType === 'desktop'">
{{ 'footer.imprint' | translate}}
</span>
</button>
+
+ <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
+ <mat-grid-list cols="2">
+ <mat-grid-tile>
+ <button mat-icon-button class="default color-button" (click)="changeTheme('arsnova')">
+ <mat-icon class="color-icon" matTooltip="{{ 'footer.bright' | translate }}">lens</mat-icon>
+ <mat-icon *ngIf="themeClass === 'arsnova'" class="check">check_circle</mat-icon>
+ </button>
+ </mat-grid-tile>
+ <mat-grid-tile>
+ <button mat-icon-button class="dark color-button" (click)="changeTheme('dark')">
+ <mat-icon class="color-icon" matTooltip="{{ 'footer.dark' | translate }}">lens</mat-icon>
+ <mat-icon *ngIf="themeClass === 'dark'" class="check">check_circle</mat-icon>
+ </button>
+ </mat-grid-tile>
+ <mat-grid-tile>
+ <button mat-icon-button class="purple color-button" (click)="changeTheme('purple')">
+ <mat-icon class="color-icon" matTooltip="{{ 'footer.beamer' | translate }}">lens</mat-icon>
+ <mat-icon *ngIf="themeClass === 'purple'" class="check">check_circle</mat-icon>
+ </button>
+ </mat-grid-tile>
+ <mat-grid-tile>
+ <button mat-icon-button class="blue color-button" (click)="changeTheme('blue')">
+ <mat-icon class="color-icon" matTooltip="{{ 'footer.wai' | translate }}">lens</mat-icon>
+ <mat-icon *ngIf="themeClass === 'blue'" class="check">check_circle</mat-icon>
+ </button>
+ </mat-grid-tile>
+ </mat-grid-list>
+ </mat-menu>
+
+ <mat-menu #langMenu="matMenu" [overlapTrigger]="false">
+ <button mat-menu-item (click)="useLanguage('de')">{{ 'footer.german' | translate }}</button>
+ <button mat-menu-item (click)="useLanguage('en')">{{ 'footer.english' | translate }}</button>
+ </mat-menu>
</mat-toolbar>
</footer>
diff --git a/src/app/components/shared/footer/footer.component.scss b/src/app/components/shared/footer/footer.component.scss
index 0f52d01b5a15cb721c07c5762f163c66894feca0..21eb6fe61baa1b28346942eefd891905cb3563cb 100644
--- a/src/app/components/shared/footer/footer.component.scss
+++ b/src/app/components/shared/footer/footer.component.scss
@@ -24,3 +24,46 @@ footer {
mat-icon {
margin-right: 2%;
}
+
+.purple {
+ color: var(--purple);
+}
+
+.blue {
+ color: var(--blue);
+}
+
+.dark {
+ color: var(--black);
+}
+
+.default {
+ color: var(--light-green);
+}
+
+.color-button {
+ width: 100%;
+ height: 100%;
+}
+
+.color-icon {
+ font-size: 45px;
+ height: 45px;
+ width: 45px;
+ line-height: 100%!important;
+}
+
+::ng-deep .color-menu {
+ padding: 0 8px 0 8px;
+}
+
+.check {
+ font-size: 25px;
+ height: 25px;
+ width: 25px;
+ line-height: 100%!important;
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ color: white;
+}
diff --git a/src/app/components/shared/footer/footer.component.ts b/src/app/components/shared/footer/footer.component.ts
index 77b0d03dbb2eb3c55fdce01c3c15274a46c753ab..340e5f1b199c798bdaa7e5fe955b9986a555f003 100644
--- a/src/app/components/shared/footer/footer.component.ts
+++ b/src/app/components/shared/footer/footer.component.ts
@@ -4,12 +4,11 @@ import { NotificationService } from '../../../services/util/notification.service
import { Router } from '@angular/router';
import { MatDialog } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
-import { UserRole } from '../../../models/user-roles.enum';
import { AuthenticationService } from '../../../services/http/authentication.service';
import { User } from '../../../models/user';
-import { RoomService } from '../../../services/http/room.service';
import { Room } from '../../../models/room';
import { DemoVideoComponent } from '../../home/_dialogs/demo-video/demo-video.component';
+import { ThemeService } from '../../../../theme/theme.service';
@Component({
selector: 'app-footer',
@@ -29,13 +28,15 @@ export class FooterComponent implements OnInit {
open: string;
deviceType: string;
+ themeClass = localStorage.getItem('theme');
+
constructor(public notificationService: NotificationService,
public router: Router,
public dialog: MatDialog,
private translateService: TranslateService,
private langService: LanguageService,
public authenticationService: AuthenticationService,
- private roomService: RoomService) {
+ private themeService: ThemeService) {
langService.langEmitter.subscribe(lang => translateService.use(lang));
}
@@ -90,36 +91,6 @@ export class FooterComponent implements OnInit {
});
}
- navToDemoSession() {
- this.roomService.getRoomByShortId(this.demoId)
- .subscribe(room => {
- this.room = room;
- });
- if (!this.user) {
- this.guestLogin();
- } else {
- if (this.user.role === UserRole.CREATOR) {
- this.authenticationService.logout();
- this.guestLogin();
- } else {
- this.addAndNavigate();
- }
- }
- }
-
- guestLogin() {
- this.authenticationService.guestLogin(UserRole.PARTICIPANT).subscribe(loggedIn => {
- if (loggedIn === 'true') {
- this.addAndNavigate();
- }
- });
- }
-
- addAndNavigate() {
- this.roomService.addToHistory(this.room.id);
- this.router.navigate([`/participant/room/${this.room.shortId}/comments`]);
- }
-
showDemo() {
const dialogRef = this.dialog.open(DemoVideoComponent, {
position: {
@@ -133,4 +104,15 @@ export class FooterComponent implements OnInit {
});
dialogRef.componentInstance.deviceType = this.deviceType;
}
+
+ useLanguage(language: string) {
+ this.translateService.use(language);
+ localStorage.setItem('currentLang', language);
+ this.langService.langEmitter.emit(language);
+ }
+
+ changeTheme(theme) {
+ this.themeClass = theme;
+ this.themeService.activate(theme);
+ }
}
diff --git a/src/app/components/shared/header/header.component.html b/src/app/components/shared/header/header.component.html
index e7515dceaf69684da9bbf438b0263988a0783985..643de9117b1ad3ad48e224a866627376194c00c7 100644
--- a/src/app/components/shared/header/header.component.html
+++ b/src/app/components/shared/header/header.component.html
@@ -26,62 +26,6 @@
</h3>
<span class="fill-remaining-space"></span>
- <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
- <mat-grid-list cols="2">
- <mat-grid-tile>
- <button mat-icon-button class="default color-button" (click)="changeTheme('arsnova')">
- <mat-icon class="color-icon" matTooltip="{{ 'header.bright' | translate }}">lens</mat-icon>
- <mat-icon *ngIf="themeClass === 'arsnova'" class="check">check_circle</mat-icon>
- </button>
- </mat-grid-tile>
- <mat-grid-tile>
- <button mat-icon-button class="dark color-button" (click)="changeTheme('dark')">
- <mat-icon class="color-icon" matTooltip="{{ 'header.dark' | translate }}">lens</mat-icon>
- <mat-icon *ngIf="themeClass === 'dark'" class="check">check_circle</mat-icon>
- </button>
- </mat-grid-tile>
- <mat-grid-tile>
- <button mat-icon-button class="purple color-button" (click)="changeTheme('purple')">
- <mat-icon class="color-icon" matTooltip="{{ 'header.beamer' | translate }}">lens</mat-icon>
- <mat-icon *ngIf="themeClass === 'purple'" class="check">check_circle</mat-icon>
- </button>
- </mat-grid-tile>
- <mat-grid-tile>
- <button mat-icon-button class="blue color-button" (click)="changeTheme('blue')">
- <mat-icon class="color-icon" matTooltip="{{ 'header.wai' | translate }}">lens</mat-icon>
- <mat-icon *ngIf="themeClass === 'blue'" class="check">check_circle</mat-icon>
- </button>
- </mat-grid-tile>
- </mat-grid-list>
- </mat-menu>
-
- <button mat-button *ngIf="deviceType === 'desktop'" [matMenuTriggerFor]="themeMenu">
- <div class="label-icon">
- <mat-icon aria-label="Example" class="header-icons">palette</mat-icon>
- <h3>{{'header.style' | translate}}</h3>
- </div>
- </button>
-
- <button mat-icon-button *ngIf="deviceType === 'mobile'" [matMenuTriggerFor]="themeMenu">
- <mat-icon class="header-icons">palette</mat-icon>
- </button>
-
- <mat-menu #langMenu="matMenu" [overlapTrigger]="false">
- <button mat-menu-item (click)="useLanguage('de')">{{ 'header.german' | translate }}</button>
- <button mat-menu-item (click)="useLanguage('en')">{{ 'header.english' | translate }}</button>
- </mat-menu>
-
- <button mat-button *ngIf="deviceType === 'desktop'" [matMenuTriggerFor]="langMenu">
- <div class="label-icon">
- <mat-icon class="header-icons">language</mat-icon>
- <h3>{{'header.language' | translate}}</h3>
- </div>
- </button>
-
- <button mat-icon-button *ngIf="deviceType === 'mobile'" [matMenuTriggerFor]="langMenu">
- <mat-icon class="header-icons">language</mat-icon>
- </button>
-
<mat-menu #userMenu="matMenu" [overlapTrigger]="false">
<button mat-menu-item *ngIf="user" routerLink="/user">
<mat-icon class="sessions">work</mat-icon>
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index f9e023037bdaaad38c7b44f041cb95d923788891..456b95c998d992d359c03feec0bfb6868279cbac 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -13,22 +13,6 @@ mat-toolbar {
color: var(--on-surface);
}
-.purple {
- color: var(--purple);
-}
-
-.blue {
- color: var(--blue);
-}
-
-.dark {
- color: var(--black);
-}
-
-.default {
- color: var(--light-green);
-}
-
.moderation-enabled {
color: var(--on-surface);
margin-left: 5px;
@@ -36,33 +20,6 @@ mat-toolbar {
font-weight: bold;
}
-.color-button {
- width: 100%;
- height: 100%;
-}
-
-.color-icon {
- font-size: 45px;
- height: 45px;
- width: 45px;
- line-height: 100%!important;
-}
-
-::ng-deep .color-menu {
- padding: 0 8px 0 8px;
-}
-
-.check {
- font-size: 25px;
- height: 25px;
- width: 25px;
- line-height: 100%!important;
- position: absolute;
- top: 15px;
- right: 15px;
- color: white;
-}
-
.sessions {
color: var(--primary);
}
diff --git a/src/app/components/shared/header/header.component.ts b/src/app/components/shared/header/header.component.ts
index 0ec582d1eccfbe49a785e1940d261cd089eee538..d36fc93d82cb5361cbb70915a65e06fed3287cf4 100644
--- a/src/app/components/shared/header/header.component.ts
+++ b/src/app/components/shared/header/header.component.ts
@@ -6,10 +6,8 @@ import { User } from '../../../models/user';
import { UserRole } from '../../../models/user-roles.enum';
import { Location } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';
-import { LanguageService } from '../../../services/util/language.service';
import { MatDialog } from '@angular/material';
import { LoginComponent } from '../login/login.component';
-import { ThemeService } from '../../../../theme/theme.service';
@Component({
selector: 'app-header',
@@ -18,7 +16,6 @@ import { ThemeService } from '../../../../theme/theme.service';
})
export class HeaderComponent implements OnInit {
user: User;
- themeClass = localStorage.getItem('theme');
cTime: string;
shortId: string;
deviceType: string;
@@ -29,9 +26,7 @@ export class HeaderComponent implements OnInit {
private notificationService: NotificationService,
public router: Router,
private translationService: TranslateService,
- private langService: LanguageService,
- public dialog: MatDialog,
- private themeService: ThemeService
+ public dialog: MatDialog
) {
}
@@ -95,17 +90,6 @@ export class HeaderComponent implements OnInit {
this.location.back();
}
- useLanguage(language: string) {
- this.translationService.use(language);
- localStorage.setItem('currentLang', language);
- this.langService.langEmitter.emit(language);
- }
-
- changeTheme(theme) {
- this.themeClass = theme;
- this.themeService.activate(theme);
- }
-
login(isLecturer: boolean) {
const dialogRef = this.dialog.open(LoginComponent, {
width: '350px'
diff --git a/src/assets/i18n/home/de.json b/src/assets/i18n/home/de.json
index 20fb588e050fa931447d1d8ef3559d67486e847b..bb1eabb9b5376a0798de094c2219723c2d9ad04e 100644
--- a/src/assets/i18n/home/de.json
+++ b/src/assets/i18n/home/de.json
@@ -1,22 +1,13 @@
{
"header": {
- "english": "Englisch",
- "german": "Deutsch",
"logout": "Abmelden",
- "guest": "Gast",
"logged-out": "Ausloggen erfolgreich",
"back": "Zurück",
"my-sessions": "Meine Sessions",
"visited-sessions": "Besuchte Sessions",
- "style": "Stil",
- "language": "Sprache",
"login": "Login",
"my-account": "Konto",
"id": "ID",
- "dark": "Dunkler Hintergrund",
- "bright": "Heller Hintergrund",
- "beamer": "Für den Beamer optimiert (in Arbeit)",
- "wai": "Barrierefrei nach WCAG 2.0 (in Arbeit)",
"moderation-enabled": "Moderiert"
},
"login-page": {
@@ -97,6 +88,14 @@
"imprint": "Impressum",
"will-open": " wird in einem neuen Fenster geöffnet...",
"open": "Öffnen",
- "blog": "Blog"
+ "blog": "Blog",
+ "dark": "Dunkler Hintergrund",
+ "bright": "Heller Hintergrund",
+ "beamer": "Für den Beamer optimiert (in Arbeit)",
+ "wai": "Barrierefrei nach WCAG 2.0 (in Arbeit)",
+ "style": "Stil",
+ "language": "Sprache",
+ "english": "Englisch",
+ "german": "Deutsch"
}
}
diff --git a/src/assets/i18n/home/en.json b/src/assets/i18n/home/en.json
index 3c70f764d9706190c5774315d97dbfcf79a6f017..baa2745898df562ef7878c6126056aa80e21d1a4 100644
--- a/src/assets/i18n/home/en.json
+++ b/src/assets/i18n/home/en.json
@@ -1,22 +1,13 @@
{
"header": {
- "english": "English",
- "german": "German",
"logout": "Log out",
- "guest": "Guest",
"logged-out": "Logging out successful",
"back": "Back",
"my-sessions": "My sessions",
"visited-sessions": "Visited sessions",
- "style": "Style",
- "language": "Language",
"login": "Login",
"my-account": "My account",
"id": "ID",
- "dark": "Dark background",
- "bright": "Bright background",
- "beamer": "Optimized for the projector (work in progress)",
- "wai": "Accessible according to WCAG 2.0 (work in progress)",
"moderation-enabled": "Moderated"
},
"login-page": {
@@ -97,6 +88,14 @@
"imprint": "Imprint",
"will-open": " will be opened in a new tab...",
"open": "Open",
- "blog": "Blog"
+ "blog": "Blog",
+ "dark": "Dark background",
+ "bright": "Bright background",
+ "beamer": "Optimized for the projector (work in progress)",
+ "wai": "Accessible according to WCAG 2.0 (work in progress)",
+ "style": "Style",
+ "language": "Language",
+ "english": "English",
+ "german": "German"
}
}