From 655794032fceb0dd68fc38d3ebeda10d658f2a9f Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Sun, 22 Sep 2019 16:26:02 +0200
Subject: [PATCH] feat(reDesign): add project setting buttons

---
 .../core-ui/side-nav/side-nav.component.html  | 39 ++++++++-----
 .../core-ui/side-nav/side-nav.component.scss  | 55 ++++++++++++++++---
 2 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/src/app/core-ui/side-nav/side-nav.component.html b/src/app/core-ui/side-nav/side-nav.component.html
index ff1ef68a5b..157f97baca 100644
--- a/src/app/core-ui/side-nav/side-nav.component.html
+++ b/src/app/core-ui/side-nav/side-nav.component.html
@@ -1,24 +1,28 @@
 <section class="main">
-  <button mat-menu-item
+  <button class="route-link"
+          mat-menu-item
           routerLink="work-view"
           routerLinkActive="isActiveRoute">
     <mat-icon>wb_sunny</mat-icon>
     {{T.MH.TASKS|translate}}
   </button>
-  <button mat-menu-item
+  <button class="route-link"
+          mat-menu-item
           routerLink="schedule"
           routerLinkActive="isActiveRoute">
     <mat-icon>access_alarms</mat-icon>
     {{T.MH.SCHEDULED|translate}}
   </button>
-  <button mat-menu-item
+  <button class="route-link"
+          mat-menu-item
           routerLink="worklog"
           routerLinkActive="isActiveRoute">
     <mat-icon>date_range</mat-icon>
     <span class="text">{{T.MH.WORKLOG|translate}}</span>
   </button>
 
-  <button mat-menu-item
+  <button class="route-link"
+          mat-menu-item
           routerLink="metrics"
           routerLinkActive="isActiveRoute">
     <mat-icon>donut_large</mat-icon>
@@ -27,16 +31,23 @@
 </section>
 
 <section class="projects">
-  <button (click)="switchProject(project.id)"
-          [class.isCurrentProject]="project.id===(projectService.currentId$|async)"
-          *ngFor="let project of (projectService.list$|async); trackBy: trackById;"
-          mat-menu-item>
+  <div *ngFor="let project of (projectService.list$|async); trackBy: trackById;"
+       [class.isCurrentProject]="project.id===(projectService.currentId$|async)"
+       class="project">
     <div [ngStyle]="getThemeColor(project.theme?.primary || project.themeColor)"
          class="project-color"></div>
-    <mat-icon>list</mat-icon>
-    {{project.title}}
-  </button>
+    <button (click)="switchProject(project.id)"
+            mat-menu-item>
+      <mat-icon>list</mat-icon>
+      {{project.title}}
+    </button>
 
+    <button
+      class="project-settings-btn"
+      mat-icon-button>
+      <mat-icon>more_vert</mat-icon>
+    </button>
+  </div>
   <button (click)="addProject()"
           mat-menu-item>
     <mat-icon>add</mat-icon>
@@ -46,7 +57,8 @@
 
 
 <section class="app">
-  <button mat-menu-item
+  <button class="route-link"
+          mat-menu-item
           routerLink="projects"
           routerLinkActive="isActiveRoute">
     <mat-icon>list</mat-icon>
@@ -54,7 +66,8 @@
   </button>
 
 
-  <button mat-menu-item
+  <button class="route-link"
+          mat-menu-item
           routerLink="config"
           routerLinkActive="isActiveRoute">
     <mat-icon>settings_applications</mat-icon>
diff --git a/src/app/core-ui/side-nav/side-nav.component.scss b/src/app/core-ui/side-nav/side-nav.component.scss
index 98f8518dd6..d74829c28f 100644
--- a/src/app/core-ui/side-nav/side-nav.component.scss
+++ b/src/app/core-ui/side-nav/side-nav.component.scss
@@ -14,17 +14,56 @@ section {
 }
 
 
-button {
-  &.isCurrentProject,
-  &.isActiveRoute {
-    //position: sticky;
-    //top: 0;
-    font-weight: bold;
-    @include darkTheme {
-      background: rgba(255, 255, 255, 0.04);
+.project {
+  display: flex;
+  position: relative;
+  align-items: stretch;
+  justify-content: stretch;
+
+  button:first-of-type {
+    flex-grow: 1;
+  }
+
+  button:last-of-type {
+    border-radius: 0;
+    align-self: stretch;
+    display: block;
+    height: auto;
+    min-width: 48px;
+
+    @include mq(xs) {
+      opacity: 0;
+      display: none;
     }
   }
 
+  &:hover {
+    button:last-of-type {
+      opacity: 1;
+      display: block;
+    }
+  }
+}
+
+.project-settings-btn:hover,
+.project.isCurrentProject,
+.project button:first-of-type:hover,
+.route-link.isActiveRoute,
+.route-link:hover {
+  //position: sticky;
+  //top: 0;
+  font-weight: bold;
+  @include lightTheme {
+    background: rgba(var(--palette-background-hover), var(--palette-background-hover-alpha, 1));
+  }
+  @include darkTheme {
+    background: rgba(255, 255, 255, 0.04);
+
+  }
+}
+
+.project,
+.route-link {
   .project-color,
   &.isActiveRoute:before {
     content: '';