From d65fbf643b083a61d751a3cd7fe0ac0191d4fcdd Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Thu, 26 Sep 2019 22:57:32 +0200
Subject: [PATCH] feat: link task list and project settings from main menu bar
 at the top

---
 .../main-header/main-header.component.html    | 69 +++++++++++--------
 .../main-header/main-header.component.scss    | 34 ++++++++-
 2 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/src/app/core-ui/main-header/main-header.component.html b/src/app/core-ui/main-header/main-header.component.html
index 2b95da9d6c..ebf1e85d2f 100644
--- a/src/app/core-ui/main-header/main-header.component.html
+++ b/src/app/core-ui/main-header/main-header.component.html
@@ -7,37 +7,46 @@
     <mat-icon>menu</mat-icon>
   </button>
 
-  <div class="current-project-title">{{(projectService.currentProject$|async).title}}</div>
 
-<!--    <button [matMenuTriggerFor]="projectMenu"-->
-<!--            [style.pointer-events]="isProjectMenuDisabled ? 'none' : 'all'"-->
-<!--            (menuOpened)="isProjectMenuDisabled = true"-->
-<!--            (menuClosed)="isProjectMenuDisabled = false"-->
-<!--            class="project-btn"-->
-<!--            mat-button-->
-<!--            [title]="T.MH.PROJECT_MENU|translate">-->
-<!--      <span class="current-project-title">{{(projectService.currentProject$|async).title}}</span>-->
-<!--      <mat-icon aria-hidden="true">arrow_drop_down</mat-icon>-->
-<!--    </button>-->
-<!--    <mat-menu #projectMenu="matMenu">-->
-<!--      <button (click)="switchProject(project.id)"-->
-<!--              *ngFor="let project of (projectService.list$|async); trackBy:trackById;"-->
-<!--              mat-menu-item>-->
-<!--        <mat-icon *ngIf="project.id===(projectService.currentId$|async)">radio_button_checked</mat-icon>-->
-<!--        <mat-icon *ngIf="project.id!==(projectService.currentId$|async)">radio_button_unchecked</mat-icon>-->
-<!--        {{project.title}}-->
-<!--      </button>-->
-<!--      <button mat-menu-item-->
-<!--              routerLink="projects">-->
-<!--        <mat-icon>list</mat-icon>-->
-<!--        {{T.MH.MANAGE_PROJECTS|translate}}-->
-<!--      </button>-->
-<!--      <button (click)="addProject()"-->
-<!--              mat-menu-item>-->
-<!--        <mat-icon>add</mat-icon>-->
-<!--        {{T.MH.CREATE_PROJECT|translate}}-->
-<!--      </button>-->
-<!--    </mat-menu>-->
+  <div class="current-project-title"
+       mat-ripple
+       routerLink="work-view">{{(projectService.currentProject$|async).title}}</div>
+
+  <button mat-icon-button
+          class="project-settings-btn"
+          routerLink="project-settings">
+    <mat-icon>more_vert</mat-icon>
+  </button>
+
+  <!--    <button [matMenuTriggerFor]="projectMenu"-->
+  <!--            [style.pointer-events]="isProjectMenuDisabled ? 'none' : 'all'"-->
+  <!--            (menuOpened)="isProjectMenuDisabled = true"-->
+  <!--            (menuClosed)="isProjectMenuDisabled = false"-->
+  <!--            class="project-btn"-->
+  <!--            mat-button-->
+  <!--            [title]="T.MH.PROJECT_MENU|translate">-->
+  <!--      <span class="current-project-title">{{(projectService.currentProject$|async).title}}</span>-->
+  <!--      <mat-icon aria-hidden="true">arrow_drop_down</mat-icon>-->
+  <!--    </button>-->
+  <!--    <mat-menu #projectMenu="matMenu">-->
+  <!--      <button (click)="switchProject(project.id)"-->
+  <!--              *ngFor="let project of (projectService.list$|async); trackBy:trackById;"-->
+  <!--              mat-menu-item>-->
+  <!--        <mat-icon *ngIf="project.id===(projectService.currentId$|async)">radio_button_checked</mat-icon>-->
+  <!--        <mat-icon *ngIf="project.id!==(projectService.currentId$|async)">radio_button_unchecked</mat-icon>-->
+  <!--        {{project.title}}-->
+  <!--      </button>-->
+  <!--      <button mat-menu-item-->
+  <!--              routerLink="projects">-->
+  <!--        <mat-icon>list</mat-icon>-->
+  <!--        {{T.MH.MANAGE_PROJECTS|translate}}-->
+  <!--      </button>-->
+  <!--      <button (click)="addProject()"-->
+  <!--              mat-menu-item>-->
+  <!--        <mat-icon>add</mat-icon>-->
+  <!--        {{T.MH.CREATE_PROJECT|translate}}-->
+  <!--      </button>-->
+  <!--    </mat-menu>-->
 
 
   <nav class="action-nav">
diff --git a/src/app/core-ui/main-header/main-header.component.scss b/src/app/core-ui/main-header/main-header.component.scss
index 80d21d2aa6..8fe9ae35db 100644
--- a/src/app/core-ui/main-header/main-header.component.scss
+++ b/src/app/core-ui/main-header/main-header.component.scss
@@ -50,15 +50,43 @@ $macExtraPadding: (-8px+$mac-title-bar-padding);
 .current-project-title {
   //font-weight: bold;
   font-size: 18px;
-  margin-left: $s;
-  margin-right: 2*$s;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex-grow: 1;
+  //flex-grow: 1;
   white-space: nowrap;
   max-width: 220px;
+  cursor: pointer;
+  border-radius: $card-border-radius;
+  padding: $s 2*$s $s $s;
+
+  @include mq(xs) {
+    padding-right: $s;
+  }
+
+  &:focus {
+    outline: none
+  }
 }
 
+.project-settings-btn {
+  display: none;
+  @include mq(xs) {
+    display: block;
+    transition: $transition-standard;
+    opacity: 0;
+    margin-right: 2*$s;
+    margin-left: -$s;
+    position: relative;
+    z-index: 1;
+  }
+
+  &:hover,
+  .current-project-title:hover + & {
+    opacity: 1;
+  }
+}
+
+
 a,
 button {
   cursor: pointer;