Design improvements (#94)

* [web-gui] install date-fns

* [time-formatter] use date-fns functions

* [time-formatter] added some docstrings

* [angular.json] increase production budget

* [ticket-user-display] fix overflow for long names

* [dropdown-menu] style improvements

* [menu-bar] style improvements

- remove dropdown
- fix classroom name pos. for large usernames

* [menu-bar] show icon based on user role

* [time-formatter] added format

* [ticket.component] show tooltip with full time

* [time-formatter][format] change hour format

* [user-list-entry] change icon color

* [create-conference-dialog] style improvements

- change checkbox color
- fix text spacing

* [ticket-list] fix overflow

* [classroom] change heigt

* [classroom] change drawer position

* [side-drawer] change icon position

* [user-list] fix overflow

* [time-formatter][timeAgo] fix local

web-gui/angular.json

@@ -47,8 +47,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "10024kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "15024kb",
+                  "maximumError": "1.5mb"
                 },
                 {
                   "type": "anyComponentStyle",

web-gui/package.json

@@ -25,6 +25,7 @@
     "@angular/router": "^12.2.8",
     "@auth0/angular-jwt": "^5.0.2",
     "angular2-click-outside": "^0.1.0",
+    "date-fns": "^2.25.0",
     "howler": "^2.2.3",
     "ngx-avatar": "^4.1.0",
     "rsocket-core": "0.0.27",

web-gui/src/app/app.module.ts

@@ -30,7 +30,6 @@ import {MatFormFieldModule} from "@angular/material/form-field";
 import { LogoutComponent } from './page-components/full-page/logout/logout.component';
 import {NotFoundComponent} from "./page-components/full-page/not-found/not-found.component";
 import { OverlayErrorComponent } from './page-components/overlay-error/overlay-error.component';
-import { ChooseConferenceDialogComponent } from './dialogs/choose-conference-dialog/choose-conference-dialog.component';
 import {JoinUserConferenceDialogComponent} from "./dialogs/join-user-conference-dialog/join-user-conference-dialog.component";
 import {AvatarModule} from "ngx-avatar";
 import { FullPageComponent } from './page-components/full-page/full-page.component';
@@ -43,6 +42,8 @@ import { DropdownMenuComponent } from './page-components/menu-bar/dropdown-menu/
 import { TicketUserDisplayComponent } from './page-components/classroom/ticket-list/ticket/ticket-user-display/ticket-user-display.component';
 import {LinkConferenceToTicketDialogComponent} from "./dialogs/link-conference-to-ticket-dialog/link-conference-to-ticket-dialog.component";
 import { UserListEntryComponent } from './page-components/classroom/user-list/user-list-entry/user-list-entry.component';
+import {ConfirmationDialogComponent} from "./dialogs/confirmation-dialog/confirmation-dialog.component";
+import {ChooseConferenceDialogComponent} from "./dialogs/choose-conference-dialog/choose-conference-dialog.component";
 
 
 @NgModule({
@@ -63,11 +64,9 @@ import { UserListEntryComponent } from './page-components/classroom/user-list/us
     ConferenceListComponent,
     CreateConferenceDialogComponent,
     LogoutComponent,
-    CreateConferenceDialogComponent,
     OverlayErrorComponent,
-    ChooseConferenceDialogComponent,
+    LinkConferenceToTicketDialogComponent,
     JoinUserConferenceDialogComponent,
-    OverlayErrorComponent,
     FullPageComponent,
     TicketComponent,
     TicketAssignComponent,
@@ -76,8 +75,9 @@ import { UserListEntryComponent } from './page-components/classroom/user-list/us
     ConferenceAttendeesComponent,
     DropdownMenuComponent,
     TicketUserDisplayComponent,
-    LinkConferenceToTicketDialogComponent,
-    UserListEntryComponent
+    UserListEntryComponent,
+    ConfirmationDialogComponent,
+    ChooseConferenceDialogComponent
   ],
   imports: [
     BrowserModule,

web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,7 @@
+<div class="container">
+  <div class="dialogTitle" matDialogTitle><p>{{this.data}}</p></div>
+  <mat-action-row>
+    <button color="warn" mat-raised-button (click)="close(true)">Ja</button>
+    <button color="secondary" mat-raised-button (click)="close(false)">Abbrechen</button>
+  </mat-action-row>
+</div>

web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.scss

@@ -0,0 +1,15 @@
+button {
+  margin:3px;
+}
+
+.container {
+  width: 20rem;
+}
+
+mat-action-row {
+  align-items: center;
+}
+
+.dialogTitle {
+  word-break: break-word;
+}

web-gui/src/app/dialogs/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,18 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+
+@Component({
+  selector: 'app-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrls: ['./confirmation-dialog.component.scss']
+})
+export class ConfirmationDialogComponent {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: string,
+              public dialogRef: MatDialogRef<ConfirmationDialogComponent>
+  ) { }
+
+  public close(result: boolean = false) {
+    this.dialogRef.close(result)
+  }
+}

web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.html

@@ -4,16 +4,26 @@
     <form [formGroup]="form">
       <mat-form-field appearance="fill">
         <mat-label>Konferenzname</mat-label>
-        <input matInput type="text" [formControl]="conferenceSubject" required>
+        <input
+          matInput
+          type="text"
+          [formControl]="conferenceSubject"
+          required
+        />
       </mat-form-field>
       <div class="checkbox-form">
-        <mat-label>Konferenz sichtbar?</mat-label>
-        <mat-checkbox [formControl]="conferenceVisible"></mat-checkbox>
+        <mat-label class="visable-text">Konferenz sichtbar?</mat-label>
+        <mat-checkbox
+          [formControl]="conferenceVisible"
+          color="primary"
+        ></mat-checkbox>
       </div>
     </form>
   </mat-dialog-content>
   <mat-action-row>
     <button mat-raised-button (click)="close()">Schließen</button>
-    <button mat-raised-button class="mat-primary" (click)="createConference()">Erstellen</button>
+    <button mat-raised-button class="mat-primary" (click)="createConference()">
+      Erstellen
+    </button>
   </mat-action-row>
 </div>

web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.scss

@@ -4,7 +4,6 @@ button {
 
 .container {
   width: 20rem;
-
 }
 
 form {
@@ -17,6 +16,7 @@ mat-dialog-content {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  margin-bottom: 10px;
 }
 
 .checkbox-form {
@@ -27,3 +27,7 @@ mat-action-row {
   width: unset;
   margin-top: 10px;
 }
+
+.visable-text {
+  margin-right: 10px;
+}

web-gui/src/app/dialogs/create-conference-dialog/create-conference-dialog.component.ts

@@ -21,7 +21,7 @@ export class CreateConferenceDialogComponent {
               private notification: NotificationService,
               private dialogRef: MatDialogRef<CreateConferenceDialogComponent>
   ) {
-    this.conferenceSubject = new FormControl('Konferenz von ' + this.data.currentUser.fullName)
+    this.conferenceSubject = new FormControl('Meeting von ' + this.data.currentUser.fullName)
     this.conferenceVisible = new FormControl(true)
 
     this.form = this.fb.group({

web-gui/src/app/page-components/classroom/classroom.component.html

@@ -1,9 +1,9 @@
-<div class="container">
+<div class="classroom-content">
   <app-menu-bar [currentUser]="currentUser" [classroomInfo]="classroomInfo"></app-menu-bar>
-</div>
 
-<div class="classroom-content">
-  <app-side-drawer-menu label="Teilnehmer" orientation="left" [component]="userListComponent"></app-side-drawer-menu>
-  <app-ticket-list [currentUser]="currentUser" [tickets]="tickets" [users]="users" class="classroom-column"></app-ticket-list>
-  <app-side-drawer-menu label="Konferenzen" orientation="right" [component]="conferenceListComponent"></app-side-drawer-menu>
+  <div class="classroom-body">
+    <app-side-drawer-menu class="drawer" label="Teilnehmer" orientation="left" [component]="userListComponent"></app-side-drawer-menu>
+    <app-ticket-list [currentUser]="currentUser" [tickets]="tickets" [users]="users" class="classroom-column"></app-ticket-list>
+    <app-side-drawer-menu class="drawer" label="Konferenzen" orientation="right" [component]="conferenceListComponent"></app-side-drawer-menu>
+  </div>
 </div>

web-gui/src/app/page-components/classroom/classroom.component.scss

@@ -1,56 +1,33 @@
-.container {
-  display: block;
-  padding: 16px;
-  z-index: 2;
-  position: relative;
-}
-.actions {
-  margin: -15px;
-  display: flex;
-  height: 40px;
-  width: 100%;
-  padding-left: 10px;
-  margin-bottom: 10px;
-  .mat-flat-button {
-    line-height: 30px;
-    margin: 0 2.5px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .mat-icon {
-      height: 25px;
-    }
-  }
-  span {
-    height: 24px;
-    margin-top: 2px;
-  }
-  .mat-icon {
-    cursor: pointer;
-  }
-}
-
 .classroom-content {
-  height: 70%;
-  flex-grow: 2;
+
   display: flex;
-  flex-direction:row;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 
-  .classroom-column {
-    width:50%;
-    flex-grow: 2;
+  app-menu-bar {
     display: block;
+    padding: 16px;
+    z-index: 2;
+    position: relative;
   }
-}
 
-.classroom-bottom {
-  grid-row: 99;
-  grid-column: 1;
-  vertical-align: bottom;
-  display: block;
-}
+  .classroom-body {
+    display: flex;
+    flex: 1;
+    overflow: auto;
+    flex-basis: max-content;
+    flex-direction: row;
+
+    .classroom-column {
+      width: 50%;
+      flex-grow: 1;
+      display: block;
+    }
+
+    .drawer {
+      margin-top: 20px;
+    }
+  }
 
-.spacer {
-  flex: 1 1 auto;
 }

web-gui/src/app/page-components/classroom/conference-list/conference/conference.component.ts

@@ -4,6 +4,7 @@ import {User} from "../../../../model/User";
 import {ConferenceService} from "../../../../service/conference.service";
 import {ClassroomService} from "../../../../service/classroom.service";
 import {Ticket} from "../../../../model/Ticket";
+import {filter, tap} from "rxjs/operators";
 
 @Component({
   selector: 'app-conference',
@@ -42,7 +43,10 @@ export class ConferenceComponent {
   }
 
   public endConference() {
-    this.conferenceService.endConference(this.conference!!)
+    this.classroomService.getConfirmation("BBB-Konferenz \"" + this.conference?.conferenceName + "\" beenden?").pipe(
+      filter(result => result),
+      tap(_ => this.conferenceService.endConference(this.conference!!))
+    ).subscribe()
   }
 
   public joinTooltip(): string {

web-gui/src/app/page-components/classroom/ticket-list/ticket-list.component.html

@@ -1,11 +1,15 @@
 <div class="ticket-list">
   <div class="list-header">
-    <mat-icon class="functional-icon" (click)="classroomService.createOrEditTicket()" svgIcon="add-ticket"></mat-icon>
+    <mat-icon
+      class="functional-icon"
+      (click)="classroomService.createOrEditTicket()"
+      svgIcon="add-ticket"
+    ></mat-icon>
     <h3>Tickets</h3>
     <mat-icon class="functional-icon">filter_list</mat-icon>
   </div>
-  <hr>
-  <mat-list>
+  <hr />
+  <mat-list class="list-body">
     <mat-card class="ticket" *ngFor="let ticket of sortTickets(tickets)">
       <app-ticket [ticket]="ticket" [users]="users"></app-ticket>
     </mat-card>

web-gui/src/app/page-components/classroom/ticket-list/ticket-list.component.scss

@@ -1,11 +1,11 @@
 h3 {
-  text-align:center;
+  text-align: center;
 }
 
 .ticket-list {
-  height: 90%;
+  height: 100%;
   display: flex;
-  flex-direction:column;
+  flex-direction: column;
   flex-grow: 2;
   margin-left: 5%;
   margin-right: 5%;
@@ -23,9 +23,11 @@ h3 {
   }
 }
 
+.list-body {
+  overflow: auto;
+}
+
 .ticket {
   padding: 5px;
   margin: 5px;
 }
-
-