Improve navbar ui/ux (#81)

ls1intum · Jan 26, 2024 · 3cff79a · 3cff79a
1 parent 533f928
commit 3cff79a
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 127 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,9 +1,39 @@
 <div>
   <!-- title bar -->
-  <div class="title-bar">
-    <div class="title-bar-item-container flex-row flex-center">
-      <img class="icon" src="/assets/images/icon.png" />
-      <div class="app-title toolbar-items-spacing flex-grow">TEASE</div>
+  <div class="w-100 d-flex bg-artemis-dark justify-content-between p-3 align-items-center">
+    <div class="d-flex align-items-center gap-3">
+      <img class="" src="/assets/images/logo-s.svg" />
+      <div class="text-white fs-3 fw-light">TEASE</div>
+    </div>
+
+    <div class="d-flex gap-2">
+      <button class="btn btn-icon" matTooltip="Highlight" (click)="showPersonHighlightingOverlay()">
+        <mat-icon>edit</mat-icon>
+      </button>
+      <button class="btn btn-icon" matTooltip="Sort" (click)="showSortConfirmation()">
+        <mat-icon>sort</mat-icon>
+      </button>
+      <button mat-raised-button class="bg-artemis-primary text-white" (click)="openConstraintsDialog()">
+        <mat-icon>groups_3</mat-icon>
+        <div>Distribute Teams</div>
+      </button>
+      <button class="btn btn-icon" [matMenuTriggerFor]="menu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="showExportOverlay()">
+          <mat-icon>file_upload</mat-icon>
+          <div>Export</div>
+        </button>
+        <button mat-menu-item (click)="showImportOverlay()">
+          <mat-icon>file_download</mat-icon>
+          <div>Import</div>
+        </button>
+        <button mat-menu-item (click)="showResetTeamAllocationConfirmation()">
+          <mat-icon>replay</mat-icon>
+          <div>Reset</div>
+        </button>
+      </mat-menu>
     </div>
   </div>
 
@@ -19,69 +49,6 @@
 
   <!-- dashboard -->
   <div class="mt-3 app-content position-fixed-fill">
-    <app-dashboard
-      (importPressed)="showImportOverlay()"
-      [teamStatisticsButtonPressed]="teamStatisticsButtonPressed"></app-dashboard>
-  </div>
-
-  <!-- buttons overlay -->
-  <div class="buttons-overlay flex-row-reverse pointer-events-none">
-    <div class="buttons-overlay-item pointer-events-auto">
-      <button
-        mat-raised-button
-        color="primary"
-        (click)="
-          teamStatisticsButtonPressed.emit(toggleTeamStatisticsButtonState);
-          toggleTeamStatisticsButtonState = !toggleTeamStatisticsButtonState
-        ">
-        <div class="flex-row flex-center">
-          <mat-icon class="me-2">timeline</mat-icon>
-          @if (toggleTeamStatisticsButtonState) {
-            <div>Show Team Statistics</div>
-          } @else {
-            <div>Hide Team Statistics</div>
-          }
-        </div>
-      </button>
-    </div>
-    <div class="buttons-overlay-item pointer-events-auto">
-      <button mat-raised-button color="primary" (click)="showExportOverlay()">
-        <div class="flex-row flex-center">
-          <mat-icon class="me-2">file_download</mat-icon>
-          <div>Export</div>
-        </div>
-      </button>
-    </div>
-
-    <div class="buttons-overlay-item pointer-events-auto">
-      <button mat-raised-button color="primary" (click)="showResetTeamAllocationConfirmation()">
-        <div class="flex-row flex-center">
-          <mat-icon class="me-2">replay</mat-icon>
-          <div>Reset</div>
-        </div>
-      </button>
-    </div>
-
-    <div class="buttons-overlay-item pointer-events-auto">
-      <button mat-raised-button color="primary" (click)="showSortConfirmation()">
-        <div class="flex-row flex-center">
-          <mat-icon class="me-2">sort</mat-icon>
-          <div>Sort</div>
-        </div>
-      </button>
-    </div>
-
-    <div class="buttons-overlay-item pointer-events-auto">
-      <button mat-raised-button color="primary" (click)="showImportOverlay()">
-        <div class="flex-row flex-center">
-          <mat-icon class="me-2">file_upload</mat-icon>
-          <div>Import</div>
-        </div>
-      </button>
-    </div>
-
-    <div class="buttons-overlay-item pointer-events-auto">
-      <app-highlighting-toolbar></app-highlighting-toolbar>
-    </div>
+    <app-dashboard (importPressed)="showImportOverlay()"></app-dashboard>
   </div>
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -15,31 +15,6 @@
   background-color: $gray-f5;
 }
 
-// toolbar
-.title-bar {
-  width: 100vw;
-  height: $toolbar-height;
-  background-color: $primary-color;
-  position:sticky;
-}
-
-.title-bar-item-container {
-  padding: 10px 20px;
-}
-
-@include horizontal-spacing(toolbar-items-spacing, 5px);
-
-.icon {
-  height: 60px;
-  margin-right: 20px;
-}
-
-.app-title {
-  color: white;
-  font-size: 40px;
-  font-weight: 100;
-}
-
 /* overlay container */
 .overlay-container {
     margin-top: auto;
@@ -79,15 +54,3 @@
   width: 100vw;
   overflow: hidden;
 }
-
-// toolbar temporary
-.buttons-overlay {
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-}
-
-.buttons-overlay-item {
-  margin: 10px 10px 0 0;
-}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, ComponentFactoryResolver, EventEmitter, Type, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, ComponentFactoryResolver, Type, ViewChild, ViewEncapsulation } from '@angular/core';
 import { TeamService } from './shared/layers/business-logic-layer/team.service';
 import { DashboardComponent } from './dashboard/dashboard/dashboard.component';
 import { OverlayHostDirective } from './overlay-host.directive';
@@ -9,6 +9,7 @@ import { PersonHighlightingOverlayComponent } from './dashboard/person-highlight
 import { Location } from '@angular/common';
 import { ExportOverlayComponent } from './dashboard/export-overlay/export-overlay.component';
 import { ConstraintLoggingService } from './shared/layers/business-logic-layer/constraint-logging.service';
+import { ConstraintsOverlayComponent } from './dashboard/constraints-overlay/constraints-overlay.component';
 
 @Component({
   selector: 'app-root',
@@ -18,8 +19,6 @@ import { ConstraintLoggingService } from './shared/layers/business-logic-layer/c
 })
 export class AppComponent implements OverlayServiceHost {
   overlayVisible = false;
-  teamStatisticsButtonPressed = new EventEmitter<boolean>();
-  toggleTeamStatisticsButtonState = true;
 
   @ViewChild(DashboardComponent)
   dashboardComponent: DashboardComponent;
@@ -41,7 +40,7 @@ export class AppComponent implements OverlayServiceHost {
         history.pushState(null, '', '#TEASE');
       };
       pushState();
-      this.location.subscribe(event => {
+      this.location.subscribe(() => {
         pushState();
       });
     }
@@ -97,6 +96,14 @@ export class AppComponent implements OverlayServiceHost {
     this.overlayService.displayComponent(PersonHighlightingOverlayComponent, {});
   }
 
+  openConstraintsDialog(): void {
+    this.overlayService.displayComponent(ConstraintsOverlayComponent, { displayWarning: !this.areAllTeamsEmpty() });
+  }
+
+  protected areAllTeamsEmpty(): boolean {
+    return this.teamService.teams.reduce((acc, team) => acc && !team.persons.length, true);
+  }
+
   /* OverlayServiceHost interface */
   public displayComponent(component: Type<OverlayComponent>, data: any) {
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -20,6 +20,8 @@ import { LPTeamGenerationService } from './shared/layers/business-logic-layer/te
 import { HighlightingToolbarComponent } from './highlighting-toolbar/highlighting-toolbar.component';
 import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatMenuModule } from '@angular/material/menu';
 
 @NgModule({
   declarations: [AppComponent, OverlayHostDirective, HighlightingToolbarComponent],
@@ -33,9 +35,11 @@ import { ReactiveFormsModule } from '@angular/forms';
     AppRoutingModule,
     DragulaModule.forRoot(),
     ReactiveFormsModule,
+    MatTooltipModule,
     /* own modules */
     SharedModule,
     DashboardModule,
+    MatMenuModule,
   ],
   providers: [
     TeamService,

diff --git a/src/app/dashboard/dashboard/dashboard.component.html b/src/app/dashboard/dashboard/dashboard.component.html
@@ -30,20 +30,20 @@
         mat-raised-button
         color="primary"
         class="distribute-button flex-no-shrink"
-        (click)="togglePersonPoolStatistics()">
-        <div class="flex-row flex-center distribute-button-row">
-          <mat-icon class="flex-spacing-x-2px me-2">timeline</mat-icon>
-          <div>{{ statisticsVisible ? 'Hide' : 'Show' }} Statistics</div>
+        (click)="onTeamStatisticsButtonPressed()">
+        <div class="flex-row flex-center">
+          <mat-icon class="me-2">timeline</mat-icon>
+          <div>{{ toggleTeamStatisticsButtonState ? 'Show' : 'Hide' }} Team Statistics</div>
         </div>
       </button>
       <button
         mat-raised-button
         color="primary"
         class="distribute-button flex-no-shrink"
-        (click)="openConstraintsDialog()">
+        (click)="togglePersonPoolStatistics()">
         <div class="flex-row flex-center distribute-button-row">
-          <mat-icon class="flex-spacing-x-2px me-2">build</mat-icon>
-          <div>Distribute With Constraints</div>
+          <mat-icon class="flex-spacing-x-2px me-2">timeline</mat-icon>
+          <div>{{ statisticsVisible ? 'Hide' : 'Show' }} Statistics</div>
         </div>
       </button>
       <form [formGroup]="personPoolDisplayModeFormGroup">

diff --git a/src/app/dashboard/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard/dashboard.component.ts
@@ -1,10 +1,9 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
 import { TeamService } from '../../shared/layers/business-logic-layer/team.service';
 import { DragulaService } from 'ng2-dragula';
 import { Person } from '../../shared/models/person';
 import { PersonDetailOverlayComponent } from '../person-detail-overlay/person-detail-overlay.component';
 import { OverlayService } from '../../overlay.service';
-import { ConstraintsOverlayComponent } from '../constraints-overlay/constraints-overlay.component';
 import { SkillLevel } from '../../shared/models/skill';
 import { Device } from '../../shared/models/device';
 import { FormControl, FormGroup } from '@angular/forms';
@@ -24,7 +23,8 @@ enum PersonPoolDisplayMode {
 })
 export class DashboardComponent implements OnInit, OnDestroy {
   @Output() importPressed = new EventEmitter();
-  @Input() teamStatisticsButtonPressed;
+  teamStatisticsButtonPressed = new EventEmitter<boolean>();
+  toggleTeamStatisticsButtonState = true;
 
   statisticsVisible = false;
 
@@ -80,14 +80,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
     return this.teamService.teams && this.teamService.teams.length > 0;
   }
 
-  openConstraintsDialog(): void {
-    this.overlayService.displayComponent(ConstraintsOverlayComponent, { displayWarning: !this.areAllTeamsEmpty() });
-  }
-
-  protected areAllTeamsEmpty(): boolean {
-    return this.teamService.teams.reduce((acc, team) => acc && team.persons.length === 0, true);
-  }
-
   togglePersonPoolStatistics(): void {
     this.statisticsVisible = !this.statisticsVisible;
 
@@ -105,4 +97,9 @@ export class DashboardComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.dragulaSubscription?.unsubscribe();
   }
+
+  onTeamStatisticsButtonPressed() {
+    this.teamStatisticsButtonPressed.emit(this.toggleTeamStatisticsButtonState);
+    this.toggleTeamStatisticsButtonState = !this.toggleTeamStatisticsButtonState;
+  }
 }
diff --git a/src/assets/images/icon.png → src/assets/images/logo-l.png b/src/assets/images/icon.png → src/assets/images/logo-l.png
diff --git a/src/assets/images/logo-s.png b/src/assets/images/logo-s.png
diff --git a/src/assets/images/logo-s.svg b/src/assets/images/logo-s.svg
diff --git a/src/scss/_style-constants.scss b/src/scss/_style-constants.scss
@@ -27,3 +27,8 @@ $max-scrollbar-width: 100px;
 $standard-border: 1px solid #ccc;
 
 $regular-overlay-width: 850px;
+
+//tease 2.0 colors
+$artemis-dark: #353d47;
+$navbar-dark-color: rgba(255, 255, 255, .6);
+$artemis-primary: #3e8acc;
diff --git a/src/scss/_utility.scss b/src/scss/_utility.scss
@@ -31,3 +31,26 @@
   height: 100%;
 }
 
+
+//tease 2.0
+.bg-artemis-dark {
+  background-color: $artemis-dark !important;
+}
+
+.bg-artemis-primary {
+  background-color: $artemis-primary !important;
+}
+
+.btn-icon {
+  display: flex;
+  justify-content: center;
+}
+
+.btn-icon mat-icon {
+  color: $navbar-dark-color;
+}
+
+.btn-icon:hover mat-icon {
+  color: $artemis-primary;
+}
+