improve options menu usability

src/app/components/creator/room-creator-page/room-creator-page.component.ts

@@ -22,6 +22,9 @@ import { EventService } from '../../../services/util/event.service';
 import { KeyboardUtils } from '../../../utils/keyboard';
 import { KeyboardKey } from '../../../utils/keyboard/keys';
 import { TitleService } from '../../../services/util/title.service';
+import { DeleteCommentsComponent } from '../_dialogs/delete-comments/delete-comments.component';
+import { Export } from '../../../models/export';
+import { BonusTokenService } from '../../../services/http/bonus-token.service';
 
 @Component({
   selector: 'app-room-creator-page',
@@ -39,6 +42,7 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
   moderatorCommentCounter: number;
   commentCounterEmitSubscription: any;
   urlToCopy = `${window.location.protocol}//${window.location.hostname}/participant/room/`;
+  headerInterface = null;
 
   constructor(protected roomService: RoomService,
               protected notification: NotificationService,
@@ -52,7 +56,9 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
               private liveAnnouncer: LiveAnnouncer,
               private _r: Renderer2,
               public eventService: EventService,
-              public titleService: TitleService) {
+              public titleService: TitleService,
+              private notificationService: NotificationService,
+              private bonusTokenService: BonusTokenService) {
     super(roomService, route, location, wsCommentService, commentService, eventService);
     this.commentCounterEmitSubscription = this.commentCounterEmit.subscribe(e => {
       this.titleService.attachTitle('(' + e + ')');
@@ -60,10 +66,51 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
     langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
 
+  initNavigation() {
+    const navigation = {};
+    const nav = (b, c) => navigation[b] = c;
+    nav('roomBonusToken', () => this.showBonusTokenDialog());
+    nav('moderator', () => this.showModeratorsDialog());
+    nav('tags', () => this.showTagsDialog());
+    nav('exportQuestions', () => {
+      const exp: Export = new Export(
+        this.room,
+        this.commentService,
+        this.bonusTokenService,
+        this.translateService,
+        'comment-list',
+        this.notificationService);
+      exp.exportAsCsv();
+    });
+    nav('deleteQuestions', () => {
+      const dialogRef = this.dialog.open(DeleteCommentsComponent, {
+        width: '400px'
+      });
+      dialogRef.componentInstance.roomId = this.room.id;
+      dialogRef.afterClosed()
+      .subscribe(result => {
+        if (result === 'delete') {
+          this.translateService.get('room-page.comments-deleted').subscribe(msg => {
+            this.notificationService.show(msg);
+          });
+          this.commentService.deleteCommentsByRoomId(this.room.id).subscribe();
+        }
+      });
+    });
+    this.headerInterface = this.eventService.on<string>('navigate').subscribe(e => {
+      if (navigation.hasOwnProperty(e)) {
+        navigation[e]();
+      }
+    });
+  }
+
   ngOnDestroy() {
     super.ngOnDestroy();
     this.commentCounterEmitSubscription.unsubscribe();
     this.titleService.resetTitle();
+    if (this.headerInterface) {
+      this.headerInterface.unsubscribe();
+    }
   }
 
   ngAfterContentInit(): void {
@@ -73,6 +120,7 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
   }
 
   ngOnInit() {
+    this.initNavigation();
     window.scroll(0, 0);
     this.translateService.use(localStorage.getItem('currentLang'));
     this.route.params.subscribe(params => {

src/app/components/home/new-landing/new-landing.component.scss

@@ -12,5 +12,5 @@
   padding-right: 10px;
   padding-left: 10px;
   transform: scale(2);
-  color: var(--secondary);
+  color: var(--primary);
 }

src/app/components/moderator/moderator-comment-list/moderator-comment-list.component.ts

-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Comment } from '../../../models/comment';
 import { CommentService } from '../../../services/http/comment.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -16,13 +16,20 @@ import { EventService } from '../../../services/util/event.service';
 import { Router } from '@angular/router';
 import { AppComponent } from '../../../app.component';
 import { Period } from '../../shared/comment-list/comment-list.component';
+import { ModeratorsComponent } from '../../creator/_dialogs/moderators/moderators.component';
+import { TagsComponent } from '../../creator/_dialogs/tags/tags.component';
+import { DeleteCommentsComponent } from '../../creator/_dialogs/delete-comments/delete-comments.component';
+import { Export } from '../../../models/export';
+import { CreateCommentComponent } from '../../shared/_dialogs/create-comment/create-comment.component';
+import { NotificationService } from '../../../services/util/notification.service';
+import { BonusTokenService } from '../../../services/http/bonus-token.service';
 
 @Component({
   selector: 'app-moderator-comment-list',
   templateUrl: './moderator-comment-list.component.html',
   styleUrls: ['./moderator-comment-list.component.scss']
 })
-export class ModeratorCommentListComponent implements OnInit {
+export class ModeratorCommentListComponent implements OnInit, OnDestroy {
   @ViewChild('searchBox') searchField: ElementRef;
   @Input() user: User;
   @Input() roomId: string;
@@ -58,6 +65,7 @@ export class ModeratorCommentListComponent implements OnInit {
   periodsList = Object.values(Period);
   period: Period = Period.TWOWEEKS;
   fromNow: number;
+  headerInterface = null;
 
   constructor(
     private commentService: CommentService,
@@ -67,12 +75,94 @@ export class ModeratorCommentListComponent implements OnInit {
     private wsCommentService: WsCommentServiceService,
     protected roomService: RoomService,
     public eventService: EventService,
-    private router: Router
+    private router: Router,
+    private notificationService: NotificationService,
+    private translationService: TranslateService,
+    private bonusTokenService: BonusTokenService
   ) {
     langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
 
+  initNavigation() {
+    const navigation = {};
+    const nav = (b, c) => navigation[b] = c;
+    nav('moderator', () => {
+      const dialogRef = this.dialog.open(ModeratorsComponent, {
+        width: '400px'
+      });
+      dialogRef.componentInstance.roomId = this.room.id;
+    });
+    nav('tags', () => {
+      const updRoom = JSON.parse(JSON.stringify(this.room));
+      const dialogRef = this.dialog.open(TagsComponent, {
+        width: '400px'
+      });
+      let tags = [];
+      if (this.room.tags !== undefined) {
+        tags = this.room.tags;
+      }
+      dialogRef.componentInstance.tags = tags;
+      dialogRef.afterClosed()
+      .subscribe(result => {
+        if (!result || result === 'abort') {
+          return;
+        } else {
+          updRoom.tags = result;
+          this.roomService.updateRoom(updRoom)
+          .subscribe((room) => {
+              this.room = room;
+              this.translateService.get('room-page.changes-successful').subscribe(msg => {
+                this.notificationService.show(msg);
+              });
+            },
+            error => {
+              this.translateService.get('room-page.changes-gone-wrong').subscribe(msg => {
+                this.notificationService.show(msg);
+              });
+            });
+        }
+      });
+    });
+    nav('deleteQuestions', () => {
+      const dialogRef = this.dialog.open(DeleteCommentsComponent, {
+        width: '400px'
+      });
+      dialogRef.componentInstance.roomId = this.roomId;
+      dialogRef.afterClosed()
+      .subscribe(result => {
+        if (result === 'delete') {
+          this.translationService.get('room-page.comments-deleted').subscribe(msg => {
+            this.notificationService.show(msg);
+          });
+          this.commentService.deleteCommentsByRoomId(this.roomId).subscribe();
+        }
+      });
+    });
+    nav('exportQuestions', () => {
+      const exp: Export = new Export(
+        this.room,
+        this.commentService,
+        this.bonusTokenService,
+        this.translationService,
+        'comment-list',
+        this.notificationService);
+      exp.exportAsCsv();
+    });
+    this.headerInterface = this.eventService.on<string>('navigate').subscribe(e => {
+      if (navigation.hasOwnProperty(e)) {
+        navigation[e]();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.headerInterface) {
+      this.headerInterface.unsubscribe();
+    }
+  }
+
   ngOnInit() {
+    this.initNavigation();
     this.roomId = localStorage.getItem(`roomId`);
     const userId = this.user.id;
     this.userRole = this.user.role;

src/app/components/shared/comment-list/comment-list.component.ts

@@ -23,6 +23,11 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { AuthenticationService } from '../../../services/http/authentication.service';
 import { Title } from '@angular/platform-browser';
 import { TitleService } from '../../../services/util/title.service';
+import { ModeratorsComponent } from '../../creator/_dialogs/moderators/moderators.component';
+import { TagsComponent } from '../../creator/_dialogs/tags/tags.component';
+import { DeleteCommentsComponent } from '../../creator/_dialogs/delete-comments/delete-comments.component';
+import { Export } from '../../../models/export';
+import { BonusTokenService } from '../../../services/http/bonus-token.service';
 
 export enum Period {
   FROMNOW = 'from-now',
@@ -84,6 +89,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
   freeze = false;
   commentStream: Subscription;
   periodsList = Object.values(Period);
+  headerInterface = null;
   period: Period = Period.TWOWEEKS;
   fromNow: number;
 
@@ -102,11 +108,87 @@ export class CommentListComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private titleService: TitleService,
+    private translationService: TranslateService,
+    private bonusTokenService: BonusTokenService
   ) {
     langService.langEmitter.subscribe(lang => translateService.use(lang));
   }
 
+  initNavigation() {
+    const navigation = {};
+    const nav = (b, c) => navigation[b] = c;
+    nav('createQuestion', () => this.openCreateDialog());
+    nav('moderator', () => {
+      const dialogRef = this.dialog.open(ModeratorsComponent, {
+        width: '400px'
+      });
+      dialogRef.componentInstance.roomId = this.room.id;
+    });
+    nav('tags', () => {
+      const updRoom = JSON.parse(JSON.stringify(this.room));
+      const dialogRef = this.dialog.open(TagsComponent, {
+        width: '400px'
+      });
+      let tags = [];
+      if (this.room.tags !== undefined) {
+        tags = this.room.tags;
+      }
+      dialogRef.componentInstance.tags = tags;
+      dialogRef.afterClosed()
+      .subscribe(result => {
+        if (!result || result === 'abort') {
+          return;
+        } else {
+          updRoom.tags = result;
+          this.roomService.updateRoom(updRoom)
+          .subscribe((room) => {
+              this.room = room;
+              this.translateService.get('room-page.changes-successful').subscribe(msg => {
+                this.notificationService.show(msg);
+              });
+            },
+            error => {
+              this.translateService.get('room-page.changes-gone-wrong').subscribe(msg => {
+                this.notificationService.show(msg);
+              });
+            });
+        }
+      });
+    });
+    nav('deleteQuestions', () => {
+      const dialogRef = this.dialog.open(DeleteCommentsComponent, {
+        width: '400px'
+      });
+      dialogRef.componentInstance.roomId = this.roomId;
+      dialogRef.afterClosed()
+      .subscribe(result => {
+        if (result === 'delete') {
+          this.translationService.get('room-page.comments-deleted').subscribe(msg => {
+            this.notificationService.show(msg);
+          });
+          this.commentService.deleteCommentsByRoomId(this.roomId).subscribe();
+        }
+      });
+    });
+    nav('exportQuestions', () => {
+      const exp: Export = new Export(
+        this.room,
+        this.commentService,
+        this.bonusTokenService,
+        this.translationService,
+        'comment-list',
+        this.notificationService);
+      exp.exportAsCsv();
+    });
+    this.headerInterface = this.eventService.on<string>('navigate').subscribe(e => {
+      if (navigation.hasOwnProperty(e)) {
+        navigation[e]();
+      }
+    });
+  }
+
   ngOnInit() {
+    this.initNavigation();
     this.authenticationService.watchUser.subscribe(newUser => {
       if (newUser) {
         this.user = newUser;
@@ -162,6 +244,9 @@ export class CommentListComponent implements OnInit, OnDestroy {
       this.commentStream.unsubscribe();
     }
     this.titleService.resetTitle();
+    if (this.headerInterface) {
+      this.headerInterface.unsubscribe();
+    }
   }
 
   checkScroll(): void {

src/app/components/shared/header/header.component.html

@@ -23,14 +23,6 @@
     </h2>
     <span *ngIf="router.url.includes('comments')  && !router.url.includes('moderator/comments') && deviceType === 'desktop'"
           class="fill-remaining-space"></span>
-    <button *ngIf="router.url.includes('comments')  && !router.url.includes('moderator/comments') && deviceType === 'desktop'"
-            mat-flat-button
-            class="question-focus-btn"
-            routerLink="participant/room/{{shortId}}/comments/questionwall">
-      <mat-icon svgIcon="beamer"
-                class="header-icons beamer-icon"></mat-icon>
-      <span class="question-focus-btn-txt">{{'header.question-wall' | translate}}</span>
-    </button>
     <span class="fill-remaining-space"
           *ngIf="router.url.includes('comments') && deviceType === 'desktop'"></span>
     <span
@@ -47,32 +39,186 @@
         *ngIf="router.url.includes('comments')"
         fxLayoutAlign="center center">
       {{ shortId.slice(0, 4) }} {{  shortId.slice(4, 8) }}
-    </h2>
+    </h2>-->
     <!--Feedback im Hörsaal-->
     <h2 class="oldtypo-h2"
         *ngIf="router.url.includes('home')"
         fxLayoutAlign="center center">
       {{ 'header.home-header' | translate }}
     </h2>
-    <button *ngIf="router.url.includes('room')"
-            mat-icon-button
-            (click)="showQRDialog();"
-            fxLayoutAlign="center center">
-      <mat-icon svgIcon="qrcode"
-                class="header-icons qrcode"
-                matTooltip="{{ 'header.QR' | translate }}">
-      </mat-icon>
-
-    </button>
     <span class="fill-remaining-space"></span>
-    <button mat-icon-button *ngIf="user" (click)="showMotdDialog()">
-      <mat-icon class="header-icons">{{ motdState ? 'notifications_active' : 'notifications_none' }}</mat-icon>
-    </button>
 
     <mat-menu #userMenu="matMenu"
               [overlapTrigger]="false">
+      <!--      <p class="mat-menu-inner-title">Account</p>-->
+
+      <div class="mat-menu-inner-box">
+
+        <!-- Home -->
+        <ng-container *ngIf="router.url.endsWith('/home')">
+        </ng-container>
+
+        <!-- Session list -->
+        <ng-container *ngIf="router.url.endsWith('/user')">
+        </ng-container>
+
+        <!-- Room -->
+        <ng-container *ngIf="router.url.includes('/room/')">
+
+          <!-- Room General Options - top -->
+
+          <!-- Moderator board / index -->
+
+          <ng-container *ngIf="router.url.endsWith('/moderator/comments')">
+
+            <button mat-menu-item
+                    tabindex="0"
+                    routerLink="participant/room/{{shortId}}/comments">
+              <mat-icon
+                matTooltip="{{ 'header.back-to-questionboard' | translate }}">
+                forum
+              </mat-icon>
+              <span>{{'header.back-to-questionboard' | translate}}</span>
+            </button>
+
+          </ng-container>
+
+          <!-- Question board -->
+          <ng-container *ngIf="router.url.endsWith('/comments')">
+
+            <button mat-menu-item
+                    *ngIf="user && user.role > 0 && !router.url.endsWith('moderator/comments')"
+                    tabindex="0"
+                    (click)="navigateCreateQuestion();">
+              <mat-icon
+                matTooltip="{{ 'header.create-question' | translate }}">
+                comment
+              </mat-icon>
+              <span>{{'header.create-question' | translate}}</span>
+            </button>
+
+            <ng-container *ngIf="user && user.role > 0">
+
+              <button mat-menu-item
+                      tabindex="0"
+                      *ngIf="deviceType !== 'mobile' && !router.url.includes('/participant/')"
+                      routerLink="participant/room/{{shortId}}/comments/questionwall">
+                <mat-icon
+                  svgIcon="beamer"
+                  matTooltip="{{ 'header.questionwall-title' | translate }}">
+                  comment
+                </mat-icon>
+                <span>{{'header.questionwall' | translate}}</span>
+              </button>
+
+            </ng-container>
+
+            <ng-container *ngIf="router.url.includes('/participant/room/')">
+            </ng-container>
+            <ng-container *ngIf="router.url.includes('/moderator/room/')">
+            </ng-container>
+            <ng-container *ngIf="router.url.includes('/creator/room/')">
+            </ng-container>
+
+            <button mat-menu-item
+                    *ngIf="user"
+                    (click)="navigateExportQuestions()"
+                    tabindex="0">
+              <mat-icon>save</mat-icon>
+              <span>{{'header.export-questions' | translate}}</span>
+            </button>
+
+            <button mat-menu-item
+                    *ngIf="user && user.role > 0 && !router.url.includes('/participant/')"
+                    (click)="navigateDeleteQuestions()"
+                    tabindex="0">
+              <mat-icon class="color-warn">delete</mat-icon>
+              <span>{{'header.delete-questions' | translate}}</span>
+            </button>
+
+          </ng-container>
+
+          <!-- Session -->
+          <ng-container *ngIf="!router.url.endsWith('/comments')">
+
+            <!-- app-room-participant-page -->
+            <ng-container *ngIf="router.url.includes('/participant/room/')">
+            </ng-container>
+            <!-- app-room-creator-page -->
+            <ng-container *ngIf="router.url.includes('/moderator/room/')">
+            </ng-container>
+            <!-- app-room-creator-page -->
+            <ng-container *ngIf="router.url.includes('/creator/room/')">
+
+              <button mat-menu-item
+                      *ngIf="user"
+                      (click)="navigateRoomBonusToken()"
+                      tabindex="0">
+                <mat-icon class="star">grade</mat-icon>
+                <span>{{'header.bonustoken' | translate}}</span>
+              </button>
+
+              <button mat-menu-item
+                      *ngIf="user"
+                      (click)="navigateExportQuestions()"
+                      tabindex="0">
+                <mat-icon>save</mat-icon>
+                <span>{{'header.export-questions' | translate}}</span>
+              </button>
+
+              <button mat-menu-item
+                      *ngIf="user"
+                      (click)="navigateDeleteQuestions()"
+                      tabindex="0">
+                <mat-icon class="color-warn">delete</mat-icon>
+                <span>{{'header.delete-questions' | translate}}</span>
+              </button>
+
+            </ng-container>
+
+          </ng-container>
+
+          <!-- Room General Options - bot -->
+
+          <ng-container *ngIf="user && user.role > 0 && !router.url.includes('/participant')">
+
+            <button mat-menu-item
+                    *ngIf="user"
+                    (click)="navigateModerator()"
+                    tabindex="0">
+              <mat-icon>gavel</mat-icon>
+              <span>{{'header.edit-moderator' | translate}}</span>
+            </button>
+
+            <button mat-menu-item
+                    *ngIf="user"
+                    (click)="navigateTags()"
+                    tabindex="0">
+              <mat-icon svgIcon="comment_tag"></mat-icon>
+              <span>{{'header.edit-tags' | translate}}</span>
+            </button>
+
+          </ng-container>
+
+          <button mat-menu-item
+                  *ngIf="user && user.role > 0"
+                  tabindex="0"
+                  (click)="showQRDialog();">
+            <mat-icon svgIcon="qrcode"
+                      class="header-icons qrcode"
+                      matTooltip="{{ 'header.QR' | translate }}">
+            </mat-icon>
+            <span>{{'header.room-qr' | translate}}</span>
+          </button>
+
+        </ng-container>
+
+      </div>
+
+      <!-- General Options -->
+
       <button mat-menu-item
-              *ngIf="user"
+              *ngIf="user && !router.url.endsWith('/user')"
               routerLink="/user"
               tabindex="0">
         <mat-icon class="sessions">group</mat-icon>
@@ -80,6 +226,7 @@
         <span *ngIf="user.isGuest"
               svgIcon="meeting_room">{{'header.visited-sessions' | translate}}</span>
       </button>
+
       <button mat-menu-item
               *ngIf="user"
               (click)="openUserBonusTokenDialog()"
@@ -87,19 +234,42 @@
         <mat-icon class="star">grade</mat-icon>
         <span>{{'header.user-bonus-token' | translate}}</span>
       </button>
+
+      <button mat-menu-item
+              *ngIf="user"
+              (click)="showMotdDialog()">
+        <mat-icon>
+          {{ motdState ? 'notifications_active' : 'notifications_none' }}
+        </mat-icon>
+        <span>{{'header.motd' | translate}}</span>
+      </button>
+
+      <button mat-menu-item
+              aria-hidden="true"
+              *ngIf="isSafari === 'false'  && !router.url.includes('home')"
+              (click)="getRescale().toggleState();">
+        <mat-icon (click)="getRescale().toggleState();">fullscreen
+