From d69a18127bb2a1213da58e053121942f0a6783f8 Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Sat, 24 Mar 2018 09:27:40 +0200
Subject: [PATCH] [ACA-1237] Sidenav - navigation menu UX (#256)

---
 .../components/sidenav/sidenav.component.html |  51 ++++--
 .../components/sidenav/sidenav.component.scss | 146 ++++++------------
 .../sidenav/sidenav.component.theme.scss      |  32 ++++
 src/app/ui/custom-theme.scss                  |  48 ++++++
 src/app/ui/overrides/_toolbar.scss            |   4 +
 src/app/ui/theme.scss                         |   4 +
 6 files changed, 174 insertions(+), 111 deletions(-)
 create mode 100644 src/app/components/sidenav/sidenav.component.theme.scss
 create mode 100644 src/app/ui/custom-theme.scss

diff --git a/src/app/components/sidenav/sidenav.component.html b/src/app/components/sidenav/sidenav.component.html
index 0fb4674f0..ae13470bd 100644
--- a/src/app/components/sidenav/sidenav.component.html
+++ b/src/app/components/sidenav/sidenav.component.html
@@ -1,14 +1,20 @@
 <div class="sidenav">
     <div class="sidenav__section sidenav__section--new" [ngClass]="{ 'section--new--mini': !showLabel }">
         <button *ngIf="showLabel"
-            class="sidenav__section--new__button" mat-button [matMenuTriggerFor]="menu">
+            [matMenuTriggerFor]="menu"
+            class="sidenav__section--new__button"
+            [disableRipple]="true"
+            mat-raised-button
+            color="accent">
+
             <span>{{ 'APP.NEW_MENU.LABEL' | translate }}</span>
             <mat-icon>arrow_drop_down</mat-icon>
         </button>
 
-        <button
-            class="new__button--mini"
-            *ngIf="!showLabel" mat-icon-button [matMenuTriggerFor]="menu">
+        <button [matMenuTriggerFor]="menu"
+            *ngIf="!showLabel"
+            color="accent"
+            mat-icon-button>
             <mat-icon>add_box</mat-icon>
         </button>
 
@@ -55,19 +61,32 @@
         </mat-menu>
     </div>
 
-    <div class="sidenav__section" *ngFor="let list of navigation">
+    <div class="sidenav__section sidenav__section--menu" *ngFor="let list of navigation">
         <ul class="sidenav-menu">
-            <li class="sidenav-menu__item" *ngFor="let item of list">
-                <a
-                    class="sidenav-link"
-                    [ngClass]="{ 'sidenav-menu__item-link--noicon' : !item.icon }"
-                    routerLinkActive="sidenav-link--active"
-                    [routerLink]="item.disabled? null : item.route.url"
-                    [ngClass]="{ 'disabled': item.disabled }"
-                    title="{{ item.title || '' | translate }}">
-                    <mat-icon class="sidenav-link__icon">{{ item.icon }}</mat-icon>
-                    <span class="sidenav-link__label" *ngIf="showLabel">{{ item.label | translate }}</span>
-                </a>
+            <li *ngFor="let item of list" class="sidenav-menu__item"
+                routerLinkActive
+                #rla="routerLinkActive"
+                title="{{ item.title || '' | translate }}">
+
+                <button [routerLink]="item.route.url"
+                    [color]="rla.isActive ? 'accent': 'primary'"
+                    mat-icon-button
+                    mat-ripple
+                    [matRippleColor]="primary"
+                    [matRippleTrigger]="rippleTrigger"
+                    [matRippleCentered]="true">
+
+                    <mat-icon>{{ item.icon }}</mat-icon>
+                </button>
+
+                <span #rippleTrigger
+                    class="menu__item--label"
+                    [routerLink]="item.route.url"
+                    [hidden]="!showLabel"
+                    [ngClass]="{
+                        'menu__item--active': rla.isActive,
+                        'menu__item--default': !rla.isActive
+                    }">{{ item.label | translate }}</span>
             </li>
         </ul>
     </div>
diff --git a/src/app/components/sidenav/sidenav.component.scss b/src/app/components/sidenav/sidenav.component.scss
index e65f5b46e..724a6ee3f 100644
--- a/src/app/components/sidenav/sidenav.component.scss
+++ b/src/app/components/sidenav/sidenav.component.scss
@@ -1,106 +1,62 @@
-@import 'variables';
+.sidenav {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 100%;
 
-$sidenav-section--h-padding: 24px;
-$sidenav-section--v-padding: 8px;
+    &__section:last-child {
+        border-bottom: 0;
+    }
 
-$sidenav-menu-item--h-padding: 24px;
-$sidenav-menu-item--v-padding: 12px;
-
-$sidenav-menu-item--icon-size: 24px;
-
-:host {
-    .sidenav {
+    .section--new--mini  {
         display: flex;
-        flex: 1;
-        flex-direction: column;
-        background: #fafafa;
-        border-right: 1px solid rgba(0, 0, 0, 0.07);
-        height: 100%;
+        justify-content: center;
+        align-items: center;
+    }
 
-        &__section:last-child {
-            border-bottom: 0;
+    &__section {
+        padding: 8px 14px;
+        position: relative;
+
+        &--new {
+            padding: 16px 24px;
+            height: 40px;
         }
 
-        .section--new--mini  {
-            display: flex;
-            justify-content: center;
-            align-items: center;
+        &--new__button {
+            width: 100%;
         }
 
-        &__section {
-            padding:
-                $sidenav-section--v-padding
-                $sidenav-section--h-padding;
-
-            border-bottom: 1px solid $alfresco-divider-color;
-            position: relative;
-
-            &--new {
-                padding-top: 2 * $sidenav-section--v-padding;
-                padding-bottom: 2 * $sidenav-section--v-padding;
-                height: 40px;
-            }
-
-            &--new__button {
-                width: 100%;
-                color: $alfresco-white;
-                background-color: $alfresco-primary-accent--default;
-            }
-
-            .new__button--mini {
-                color: $alfresco-primary-accent--default;
-            }
-        }
-
-        &-menu {
-            display: inline-flex;
-            flex-direction: column;
-            padding: 0;
-            margin: 0;
-            list-style-type: none;
-
-            &__item {
-                height: 24px;
-                padding: 12px 0;
-            }
-        }
-
-        &-link {
-            flex-direction: row;
-            display: flex;
-            align-items: center;
-            text-decoration: none;
-            color: $alfresco-secondary-text-color;
-            text-decoration: none;
-            height: 24px;
-
-            &--active {
-                color: $alfresco-primary-accent--default;
-            }
-
-            &:not(&--active):hover {
-                color: $alfresco-primary-text-color;
-            }
-
-            &.disabled {
-                cursor: default !important;
-                color: $alfresco-secondary-text-color !important;
-                opacity: .25;
-            }
-
-            &--noicon {
-                padding-left: 26px;
-            }
-        }
-
-        &-link__icon {
-            width: 24px;
-        }
-
-        &-link__label {
-            opacity: 1;
-            width: 240px;
-            margin-left: 20px;
+        &--new__button.mat-raised-button {
+            box-shadow: none !important;
         }
     }
+
+    &-menu {
+        display: inline-flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+    }
+
+    &-menu__item {
+        padding: 12px 0;
+        flex-direction: row;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        text-decoration: none;
+        height: 24px;
+    }
+
+    .menu__item--label {
+        cursor: pointer;
+        width: 240px;
+        padding-left: 10px;
+    }
+
+    .menu__item--label:focus {
+        outline: none;
+    }
 }
diff --git a/src/app/components/sidenav/sidenav.component.theme.scss b/src/app/components/sidenav/sidenav.component.theme.scss
new file mode 100644
index 000000000..8941378c3
--- /dev/null
+++ b/src/app/components/sidenav/sidenav.component.theme.scss
@@ -0,0 +1,32 @@
+@mixin sidenav-component-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+
+    $border: 1px solid mat-color($foreground, divider, .07);
+
+    .sidenav {
+        @include angular-material-theme($theme);
+
+        background-color: mat-color($background, background);
+        border-right: $border;
+
+        &__section {
+            border-bottom: $border;
+        }
+
+        .menu__item--label:not(.menu__item--active):hover {
+            color: mat-color($foreground, text);
+        }
+
+        .menu__item--active {
+            color: mat-color($accent);
+        }
+
+        .menu__item--default {
+            color: mat-color($primary, .87);
+        }
+
+    }
+  }
diff --git a/src/app/ui/custom-theme.scss b/src/app/ui/custom-theme.scss
new file mode 100644
index 000000000..e6fdd28c8
--- /dev/null
+++ b/src/app/ui/custom-theme.scss
@@ -0,0 +1,48 @@
+@import "~@angular/material/theming";
+@import '~@alfresco/adf-content-services/theming';
+
+@import '../components/sidenav/sidenav.component.theme';
+
+$grey-scale: (
+    50 : #e0e0e0,
+    100 : #b3b3b3,
+    200 : #808080,
+    300 : #4d4d4d,
+    400 : #262626,
+    500 : #000000,
+    600 : #000000,
+    700 : #000000,
+    800 : #000000,
+    900 : #000000,
+    A100 : #a6a6a6,
+    A200 : #8c8c8c,
+    A400 : #737373,
+    A700 : #666666,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #ffffff,
+        400 : #ffffff,
+        500 : #ffffff,
+        600 : #ffffff,
+        700 : #ffffff,
+        800 : #ffffff,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #ffffff,
+        A700 : #ffffff,
+    )
+);
+
+@include mat-core();
+
+$custom-theme-primary: mat-palette($grey-scale, A400);
+$custom-theme-accent: mat-palette($alfresco-accent-orange);
+$custom-theme-warn: mat-palette($alfresco-warn);
+$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
+
+@mixin custom-theme($theme) {
+    @include sidenav-component-theme($custom-theme);
+}
diff --git a/src/app/ui/overrides/_toolbar.scss b/src/app/ui/overrides/_toolbar.scss
index 4e17ae320..1b3344379 100644
--- a/src/app/ui/overrides/_toolbar.scss
+++ b/src/app/ui/overrides/_toolbar.scss
@@ -1,6 +1,10 @@
 @import 'variables.scss';
 
 .adf-toolbar {
+    .mat-toolbar-single-row {
+        padding: 0 14px;
+    }
+
     // TODO: review and remove once ADF 2.0.0 is out
     &.inline {
         .mat-toolbar {
diff --git a/src/app/ui/theme.scss b/src/app/ui/theme.scss
index 6e2210ceb..96302e8aa 100644
--- a/src/app/ui/theme.scss
+++ b/src/app/ui/theme.scss
@@ -3,6 +3,8 @@
 @import '~@alfresco/adf-content-services/theming';
 @import '~@alfresco/adf-core/theming';
 
+@import 'custom-theme';
+
 @include mat-core();
 
 $primary: mat-palette($alfresco-accent-orange);
@@ -14,3 +16,5 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 
 @include adf-content-services-theme($theme);
 @include adf-core-theme($theme);
+
+@include custom-theme($custom-theme);