[ACA-1237] Sidenav - navigation menu UX (#256)

2026-09-09 18:02:54 +00:00 · 2018-03-24 07:27:40 +00:00
parent 15c361c962
commit d69a18127b
6 changed files with 174 additions and 111 deletions
@@ -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>
@@ -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;
+    }
 }
@@ -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);
+        }
+
+    }
+  }
@@ -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);
+}
@@ -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 {
@@ -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);