From dae45fce57a55b76f8dd11d2b0b4ab97e8c6e329 Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Wed, 7 Nov 2018 13:07:25 +0200
Subject: [PATCH] [ACA-20] Sidenav - submenu conditional icon templates (#786)

* remove focus outline

* button effect

* submenu conditional icon templates

* clean up styling

* update menu locator

* update library PO locators
---
 e2e/components/sidenav/sidenav.ts             |   6 +-
 .../create-menu/create-menu.component.html    |   5 +-
 .../create-menu/create-menu.component.scss    |   5 +
 .../components/sidenav/sidenav.component.html | 234 +++++++++---------
 .../components/sidenav/sidenav.component.scss |  35 ++-
 .../sidenav/sidenav.component.theme.scss      |  13 +-
 6 files changed, 158 insertions(+), 140 deletions(-)

diff --git a/e2e/components/sidenav/sidenav.ts b/e2e/components/sidenav/sidenav.ts
index 2dc92966b..47f1856de 100755
--- a/e2e/components/sidenav/sidenav.ts
+++ b/e2e/components/sidenav/sidenav.ts
@@ -31,9 +31,9 @@ import { Utils } from '../../utilities/utils';
 export class Sidenav extends Component {
   private static selectors = {
     root: 'app-sidenav',
-    link: '.sidenav-menu__item',
-    label: '.menu__item--label',
-    activeLink: '.menu__item--active',
+    link: '.menu__item',
+    label: '.item--label',
+    activeLink: '.item--active',
     newButton: '[data-automation-id="create-button"]'
   };
 
diff --git a/src/app/components/create-menu/create-menu.component.html b/src/app/components/create-menu/create-menu.component.html
index 38f7b924e..411c58632 100644
--- a/src/app/components/create-menu/create-menu.component.html
+++ b/src/app/components/create-menu/create-menu.component.html
@@ -11,11 +11,14 @@
 
 <ng-container *ngIf="!expanded">
   <button
+    color="accent"
+    mat-icon-button
     class="app-create-menu--collapsed"
     data-automation-id="create-button"
     [matMenuTriggerFor]="rootMenu"
+    #createMenu="matMenuTrigger"
     title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">
-    <mat-icon title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">queue</mat-icon>
+    <mat-icon [color]="createMenu.menuOpen? 'accent': 'primary'" title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">queue</mat-icon>
   </button>
 </ng-container>
 
diff --git a/src/app/components/create-menu/create-menu.component.scss b/src/app/components/create-menu/create-menu.component.scss
index 519f628e7..c28990892 100644
--- a/src/app/components/create-menu/create-menu.component.scss
+++ b/src/app/components/create-menu/create-menu.component.scss
@@ -3,6 +3,10 @@
   $accent: map-get($theme, accent);
   $primary: map-get($theme, primary);
 
+  .app-create-menu:focus {
+    outline: none;
+  }
+
   .app-create-menu {
     width: 100%;
 
@@ -44,6 +48,7 @@
     }
 
     &--collapsed {
+      outline: none;
       color: mat-color($foreground, text, 0.54);
       cursor: pointer;
       &:hover {
diff --git a/src/app/components/sidenav/sidenav.component.html b/src/app/components/sidenav/sidenav.component.html
index 2a05f5d5e..5cf1b6ef6 100644
--- a/src/app/components/sidenav/sidenav.component.html
+++ b/src/app/components/sidenav/sidenav.component.html
@@ -1,63 +1,62 @@
 <div class="sidenav">
-    <div class="sidenav__section sidenav__section sidenav_action-menu">
+    <div class="section action-menu">
         <app-create-menu [expanded]="showLabel"></app-create-menu>
     </div>
 
-    <div *ngFor="let group of groups; trackBy: trackById"
-            class="sidenav__section sidenav__section--menu">
+    <div *ngFor="let group of groups; trackBy: trackById" class="section">
+        <div class="menu">
+            <div *ngFor="let item of group.items; trackBy: trackById"
+                routerLinkActive
+                #routerLink="routerLinkActive">
 
-            <div class="sidenav-menu">
-                <div *ngFor="let item of group.items; trackBy: trackById"
-                    routerLinkActive
-                    #routerLink="routerLinkActive">
-
-                    <ng-container *ngIf="showLabel">
-                        <ng-container *ngIf="!item.children">
-                            <div class="sidenav-menu__item"
+                <ng-container *ngIf="showLabel">
+                    <ng-container *ngIf="!item.children">
+                        <div class="menu__item"
                             [attr.title]="item.description | translate">
-                                <button [id]="item.id"
-                                    mat-icon-button mat-ripple
-                                    [routerLink]="item.url"
-                                    [color]="routerLink.isActive ? 'accent': 'primary'"
-                                    [attr.aria-label]="item.title | translate"
-                                    matRippleColor="primary"
-                                    [matRippleTrigger]="rippleTrigger"
-                                    [matRippleCentered]="true"
-                                    [matRippleRadius]="20">
+                            <button [id]="item.id"
+                                mat-icon-button mat-ripple
+                                [routerLink]="item.url"
+                                [color]="routerLink.isActive ? 'accent': 'primary'"
+                                [attr.aria-label]="item.title | translate"
+                                matRippleColor="primary"
+                                [matRippleTrigger]="rippleTrigger"
+                                [matRippleCentered]="true"
+                                [matRippleRadius]="20">
 
-                                    <mat-icon>{{ item.icon }}</mat-icon>
-                                </button>
+                                <mat-icon>{{ item.icon }}</mat-icon>
+                            </button>
 
-                                <span #rippleTrigger
-                                    class="menu__item--label"
-                                    [routerLink]="item.url"
-                                    [attr.aria-label]="item.title | translate"
-                                    [ngClass]="{
-                                        'menu__item--active': routerLink.isActive,
-                                        'menu__item--default': !routerLink.isActive
-                                    }">
-                                    {{ item.title | translate }}</span>
-                            </div>
-                        </ng-container>
+                            <span #rippleTrigger
+                                class="item--label"
+                                [routerLink]="item.url"
+                                [attr.aria-label]="item.title | translate"
+                                [ngClass]="{
+                                    'item--active': routerLink.isActive,
+                                    'item--default': !routerLink.isActive
+                                }">
+                                {{ item.title | translate }}</span>
+                        </div>
+                    </ng-container>
 
-                        <ng-container *ngIf="item.children && item.children.length">
-                            <mat-expansion-panel [expanded]="routerLink.isActive" [@.disabled]="true">
-                                <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px" [id]="item.id">
-                                    <mat-panel-title [attr.title]="item.description | translate">
-                                        <mat-icon [color]="routerLink.isActive? 'accent': 'primary'">{{ item.icon }}</mat-icon>
-                                        <span class="menu__item--label"
-                                            [ngClass]="{
-                                                'menu__item--active': routerLink.isActive,
-                                                'menu__item--default': !routerLink.isActive
-                                            }">
-                                            {{ item.title | translate }}</span>
-                                    </mat-panel-title>
-                                </mat-expansion-panel-header>
+                    <ng-container *ngIf="item.children && item.children.length">
+                        <mat-expansion-panel [expanded]="routerLink.isActive" [@.disabled]="true">
+                            <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px" [id]="item.id">
+                                <mat-panel-title [attr.title]="item.description | translate">
+                                    <mat-icon [color]="routerLink.isActive? 'accent': 'primary'">{{ item.icon }}</mat-icon>
+                                    <span class="item--label"
+                                        [ngClass]="{
+                                            'item--active': routerLink.isActive,
+                                            'item--default': !routerLink.isActive
+                                        }">
+                                        {{ item.title | translate }}</span>
+                                </mat-panel-title>
+                            </mat-expansion-panel-header>
 
-                                <div *ngFor="let child of item.children; trackBy: trackById"
-                                    routerLinkActive #childRouteActive="routerLinkActive"
-                                    [attr.title]="child.description | translate">
+                            <div *ngFor="let child of item.children; trackBy: trackById"
+                                routerLinkActive #childRouteActive="routerLinkActive"
+                                [attr.title]="child.description | translate">
 
+                                <ng-container *ngIf="child.icon">
                                     <button [id]="child.id"
                                         mat-icon-button mat-ripple
                                         [routerLink]="child.url"
@@ -73,80 +72,81 @@
 
                                     <span #rippleTrigger
                                         [routerLink]="child.url"
-                                        class="menu__item--label"
+                                        class="item--label item--label__trigger"
                                         [ngClass]="{
-                                            'menu__item--active': childRouteActive.isActive,
-                                            'menu__item--default': !childRouteActive.isActive
+                                            'item--active': childRouteActive.isActive,
+                                            'item--default': !childRouteActive.isActive
                                         }">
-                                        {{ child.title | translate }}</span>
-                                </div>
-                            </mat-expansion-panel>
-                        </ng-container>
-                    </ng-container>
+                                        {{ child.title | translate }}
+                                    </span>
+                                </ng-container>
 
-                    <ng-container *ngIf="!showLabel">
-                        <ng-container *ngIf="!item.children">
-                                <div class="sidenav-menu__item">
-                                    <button [id]="item.id"
-                                        mat-icon-button [routerLink]="item.url"
-                                        [color]="routerLink.isActive ? 'accent': 'primary'"
-                                        [attr.aria-label]="item.title | translate"
-                                        [attr.title]="item.description | translate">
-
-                                        <mat-icon>{{ item.icon }}</mat-icon>
-                                    </button>
-                                </div>
-                            </ng-container>
-
-                            <ng-container *ngIf="item.children && item.children.length">
-                                <div class="sidenav-menu__item"
-                                    [attr.title]="item.description | translate">
-                                    <button [id]="item.id"
-                                        color="accent"
-                                        mat-mini-fab
-                                        mat-icon-button
-                                        disableRipple="true"
-                                        matRipple
-                                        [matRippleCentered]="true"
-                                        matRippleColor="accent"
-                                        [matRippleRadius]="24"
-                                        #childMenu="matMenuTrigger"
-                                        [matMenuTriggerFor]="menu">
-
-                                        <mat-icon
-                                            [color]="routerLink.isActive|| childMenu.menuOpen? 'accent': 'primary'">
-                                            {{ item.icon }}
-                                        </mat-icon>
-
-                                        <mat-icon
-                                            [color]="routerLink.isActive|| childMenu.menuOpen? 'accent': 'primary'">
-                                            more_vert
-                                        </mat-icon>
-                                    </button>
-                                </div>
-
-                                <mat-menu #menu="matMenu"[overlapTrigger]="false">
-                                    <button mat-menu-item
-                                        *ngFor="let child of item.children; trackBy: trackById"
-                                        routerLinkActive
-                                        #menuRouterLink="routerLinkActive"
+                                <ng-container *ngIf="!child.icon">
+                                    <div [id]="child.id"
+                                        class="menu__item item--label item--child"
                                         [routerLink]="child.url"
-                                        [attr.title]="child.description | translate"
-                                        [id]="child.id">
+                                        [attr.aria-label]="child.title | translate">
 
-                                        <mat-icon [color]="menuRouterLink.isActive ? 'primary': null"
-                                            [attr.color]="menuRouterLink.isActive ? 'primary': null">
-                                            {{ child.icon }}
-                                        </mat-icon>
-
-                                        <span class="mat-button" [ngClass]="{ 'mat-primary': menuRouterLink.isActive }">
-                                            {{ child.title | translate }}
+                                        <span [ngClass]="{
+                                            'item--active': childRouteActive.isActive,
+                                            'item--default': !childRouteActive.isActive
+                                        }">
+                                                {{ child.title | translate }}
                                         </span>
-                                    </button>
-                                </mat-menu>
-                            </ng-container>
+                                    </div>
+                                </ng-container>
+                            </div>
+                        </mat-expansion-panel>
                     </ng-container>
-                </div>
+                </ng-container>
+
+                <ng-container *ngIf="!showLabel">
+                    <ng-container *ngIf="!item.children">
+                            <div class="menu__item">
+                                <button [id]="item.id"
+                                    mat-icon-button [routerLink]="item.url"
+                                    [color]="routerLink.isActive ? 'accent': 'primary'"
+                                    [attr.aria-label]="item.title | translate"
+                                    [attr.title]="item.description | translate">
+
+                                    <mat-icon>{{ item.icon }}</mat-icon>
+                                </button>
+                            </div>
+                    </ng-container>
+
+                    <ng-container *ngIf="item.children && item.children.length">
+                        <div class="menu__item"
+                            [attr.title]="item.description | translate">
+                            <button [id]="item.id"
+                                color="accent"
+                                mat-icon-button
+                                #childMenu="matMenuTrigger"
+                                [matMenuTriggerFor]="menu">
+
+                                <mat-icon
+                                    [color]="routerLink.isActive || childMenu.menuOpen? 'accent': 'primary'">
+                                    {{ item.icon }}
+                                </mat-icon>
+                            </button>
+                        </div>
+
+                        <mat-menu #menu="matMenu"[overlapTrigger]="false">
+                            <button mat-menu-item
+                                *ngFor="let child of item.children; trackBy: trackById"
+                                routerLinkActive
+                                #menuRouterLink="routerLinkActive"
+                                [routerLink]="child.url"
+                                [attr.title]="child.description | translate"
+                                [id]="child.id">
+
+                                <span class="mat-button" [ngClass]="{ 'mat-primary': menuRouterLink.isActive }">
+                                    {{ child.title | translate }}
+                                </span>
+                            </button>
+                        </mat-menu>
+                    </ng-container>
+                </ng-container>
             </div>
+        </div>
     </div>
-    </div>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/app/components/sidenav/sidenav.component.scss b/src/app/components/sidenav/sidenav.component.scss
index 4882b7bfa..12f09ac28 100644
--- a/src/app/components/sidenav/sidenav.component.scss
+++ b/src/app/components/sidenav/sidenav.component.scss
@@ -4,30 +4,29 @@
   flex-direction: column;
   height: 100%;
 
-  &__section:last-child {
+  .section:last-child {
     border-bottom: 0;
   }
 
-  &_action-menu {
+  .section {
+    padding: 8px 14px;
+  }
+
+  .action-menu {
     display: flex;
-    padding: 16px 24px;
     height: 40px;
     justify-content: center;
     align-items: center;
   }
 
-  &__section {
-    padding: 8px 14px;
-  }
-
-  &-menu {
+  .menu {
     display: flex;
     flex-direction: column;
     padding: 0;
     margin: 0;
   }
 
-  &-menu__item {
+  .menu__item {
     padding: 12px 0;
     flex-direction: row;
     display: flex;
@@ -37,22 +36,34 @@
     height: 24px;
   }
 
-  .menu__item--label {
+  .item--label {
     cursor: pointer;
     width: 240px;
     padding-left: 10px;
   }
 
-  .menu__item--label:focus {
+  .item--child {
+    padding-left: 25px;
+  }
+
+  .item--label:focus {
     outline: none;
   }
 
+  .item--label__trigger {
+    padding-left: 0;
+  }
+
   .mat-expansion-panel-header {
     padding: 0 8px !important;
   }
 
   .mat-expansion-panel-header-title span {
-    margin-left: 18px;
+    margin-left: 8px;
+  }
+
+  .mat-expansion-panel-body {
+    padding: 0 24px 0px;
   }
 
   .mat-expansion-panel-header-title {
diff --git a/src/app/components/sidenav/sidenav.component.theme.scss b/src/app/components/sidenav/sidenav.component.theme.scss
index d3149d383..85ff9c878 100644
--- a/src/app/components/sidenav/sidenav.component.theme.scss
+++ b/src/app/components/sidenav/sidenav.component.theme.scss
@@ -25,28 +25,27 @@
       background: none !important;
     }
 
-    .mat-mini-fab {
-      box-shadow: unset !important;
-      background-color: unset !important;
+    .mat-expansion-panel-header {
+      font-size: 14px !important;
     }
 
     .adf-sidebar-action-menu-button {
       background-color: mat-color($accent);
     }
 
-    &__section {
+    .section {
       border-bottom: $border;
     }
 
-    .menu__item--label:not(.menu__item--active):hover {
+    .item--label:not(.item--active):hover {
       color: mat-color($foreground, text);
     }
 
-    .menu__item--active {
+    .item--active {
       color: mat-color($accent);
     }
 
-    .menu__item--default {
+    .item--default {
       color: mat-color($primary, 0.87);
     }
   }