inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-26 17:24:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-20] Sidenav - submenu conditional icon templates (#786)

Browse Source 
* remove focus outline

* button effect

* submenu conditional icon templates

* clean up styling

* update menu locator

* update library PO locators
This commit is contained in:
Cilibiu Bogdan 2018-11-07 13:07:25 +02:00 committed by Suzana Dirla
parent ae20b3ed75
commit dae45fce57
6 changed files with 158 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
e2e/components/sidenav/sidenav.ts
View File

@ -31,9 +31,9 @@ import { Utils } from '../../utilities/utils';
export class Sidenav extends Component { export class Sidenav extends Component {
private static selectors = { private static selectors = {
root: 'app-sidenav', root: 'app-sidenav',
link: '.sidenav-menu__item', link: '.menu__item',
label: '.menu__item--label', label: '.item--label',
activeLink: '.menu__item--active', activeLink: '.item--active',
newButton: '[data-automation-id="create-button"]' newButton: '[data-automation-id="create-button"]'
}; };

5
src/app/components/create-menu/create-menu.component.html
View File

@ -11,11 +11,14 @@
<ng-container *ngIf="!expanded"> <ng-container *ngIf="!expanded">
<button <button
color="accent"
mat-icon-button
class="app-create-menu--collapsed" class="app-create-menu--collapsed"
data-automation-id="create-button" data-automation-id="create-button"
[matMenuTriggerFor]="rootMenu" [matMenuTriggerFor]="rootMenu"
#createMenu="matMenuTrigger"
title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}"> 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> </button>
</ng-container> </ng-container>

5
src/app/components/create-menu/create-menu.component.scss
View File

@ -3,6 +3,10 @@
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
.app-create-menu:focus {
outline: none;
}
.app-create-menu { .app-create-menu {
width: 100%; width: 100%;
@ -44,6 +48,7 @@
} }
&--collapsed { &--collapsed {
outline: none;
color: mat-color($foreground, text, 0.54); color: mat-color($foreground, text, 0.54);
cursor: pointer; cursor: pointer;
&:hover { &:hover {

68
src/app/components/sidenav/sidenav.component.html
View File

@ -1,19 +1,17 @@
<div class="sidenav"> <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> <app-create-menu [expanded]="showLabel"></app-create-menu>
</div> </div>
<div *ngFor="let group of groups; trackBy: trackById" <div *ngFor="let group of groups; trackBy: trackById" class="section">
class="sidenav__section sidenav__section--menu"> <div class="menu">
<div class="sidenav-menu">
<div *ngFor="let item of group.items; trackBy: trackById" <div *ngFor="let item of group.items; trackBy: trackById"
routerLinkActive routerLinkActive
#routerLink="routerLinkActive"> #routerLink="routerLinkActive">
<ng-container *ngIf="showLabel"> <ng-container *ngIf="showLabel">
<ng-container *ngIf="!item.children"> <ng-container *ngIf="!item.children">
<div class="sidenav-menu__item" <div class="menu__item"
[attr.title]="item.description | translate"> [attr.title]="item.description | translate">
<button [id]="item.id" <button [id]="item.id"
mat-icon-button mat-ripple mat-icon-button mat-ripple
@ -29,12 +27,12 @@
</button> </button>
<span #rippleTrigger <span #rippleTrigger
class="menu__item--label" class="item--label"
[routerLink]="item.url" [routerLink]="item.url"
[attr.aria-label]="item.title | translate" [attr.aria-label]="item.title | translate"
[ngClass]="{ [ngClass]="{
'menu__item--active': routerLink.isActive, 'item--active': routerLink.isActive,
'menu__item--default': !routerLink.isActive 'item--default': !routerLink.isActive
}"> }">
{{ item.title | translate }}</span> {{ item.title | translate }}</span>
</div> </div>
@ -45,10 +43,10 @@
<mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px" [id]="item.id"> <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px" [id]="item.id">
<mat-panel-title [attr.title]="item.description | translate"> <mat-panel-title [attr.title]="item.description | translate">
<mat-icon [color]="routerLink.isActive? 'accent': 'primary'">{{ item.icon }}</mat-icon> <mat-icon [color]="routerLink.isActive? 'accent': 'primary'">{{ item.icon }}</mat-icon>
<span class="menu__item--label" <span class="item--label"
[ngClass]="{ [ngClass]="{
'menu__item--active': routerLink.isActive, 'item--active': routerLink.isActive,
'menu__item--default': !routerLink.isActive 'item--default': !routerLink.isActive
}"> }">
{{ item.title | translate }}</span> {{ item.title | translate }}</span>
</mat-panel-title> </mat-panel-title>
@ -58,6 +56,7 @@
routerLinkActive #childRouteActive="routerLinkActive" routerLinkActive #childRouteActive="routerLinkActive"
[attr.title]="child.description | translate"> [attr.title]="child.description | translate">
<ng-container *ngIf="child.icon">
<button [id]="child.id" <button [id]="child.id"
mat-icon-button mat-ripple mat-icon-button mat-ripple
[routerLink]="child.url" [routerLink]="child.url"
@ -73,12 +72,29 @@
<span #rippleTrigger <span #rippleTrigger
[routerLink]="child.url" [routerLink]="child.url"
class="menu__item--label" class="item--label item--label__trigger"
[ngClass]="{ [ngClass]="{
'menu__item--active': childRouteActive.isActive, 'item--active': childRouteActive.isActive,
'menu__item--default': !childRouteActive.isActive 'item--default': !childRouteActive.isActive
}"> }">
{{ child.title | translate }}</span> {{ child.title | translate }}
</span>
</ng-container>
<ng-container *ngIf="!child.icon">
<div [id]="child.id"
class="menu__item item--label item--child"
[routerLink]="child.url"
[attr.aria-label]="child.title | translate">
<span [ngClass]="{
'item--active': childRouteActive.isActive,
'item--default': !childRouteActive.isActive
}">
{{ child.title | translate }}
</span>
</div>
</ng-container>
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>
</ng-container> </ng-container>
@ -86,7 +102,7 @@
<ng-container *ngIf="!showLabel"> <ng-container *ngIf="!showLabel">
<ng-container *ngIf="!item.children"> <ng-container *ngIf="!item.children">
<div class="sidenav-menu__item"> <div class="menu__item">
<button [id]="item.id" <button [id]="item.id"
mat-icon-button [routerLink]="item.url" mat-icon-button [routerLink]="item.url"
[color]="routerLink.isActive ? 'accent': 'primary'" [color]="routerLink.isActive ? 'accent': 'primary'"
@ -99,17 +115,11 @@
</ng-container> </ng-container>
<ng-container *ngIf="item.children && item.children.length"> <ng-container *ngIf="item.children && item.children.length">
<div class="sidenav-menu__item" <div class="menu__item"
[attr.title]="item.description | translate"> [attr.title]="item.description | translate">
<button [id]="item.id" <button [id]="item.id"
color="accent" color="accent"
mat-mini-fab
mat-icon-button mat-icon-button
disableRipple="true"
matRipple
[matRippleCentered]="true"
matRippleColor="accent"
[matRippleRadius]="24"
#childMenu="matMenuTrigger" #childMenu="matMenuTrigger"
[matMenuTriggerFor]="menu"> [matMenuTriggerFor]="menu">
@ -117,11 +127,6 @@
[color]="routerLink.isActive || childMenu.menuOpen? 'accent': 'primary'"> [color]="routerLink.isActive || childMenu.menuOpen? 'accent': 'primary'">
{{ item.icon }} {{ item.icon }}
</mat-icon> </mat-icon>
<mat-icon
[color]="routerLink.isActive|| childMenu.menuOpen? 'accent': 'primary'">
more_vert
</mat-icon>
</button> </button>
</div> </div>
@ -134,11 +139,6 @@
[attr.title]="child.description | translate" [attr.title]="child.description | translate"
[id]="child.id"> [id]="child.id">
<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 }"> <span class="mat-button" [ngClass]="{ 'mat-primary': menuRouterLink.isActive }">
{{ child.title | translate }} {{ child.title | translate }}
</span> </span>

35
src/app/components/sidenav/sidenav.component.scss
View File

@ -4,30 +4,29 @@
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
&__section:last-child { .section:last-child {
border-bottom: 0; border-bottom: 0;
} }
&_action-menu { .section {
padding: 8px 14px;
}
.action-menu {
display: flex; display: flex;
padding: 16px 24px;
height: 40px; height: 40px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
&__section { .menu {
padding: 8px 14px;
}
&-menu {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
&-menu__item { .menu__item {
padding: 12px 0; padding: 12px 0;
flex-direction: row; flex-direction: row;
display: flex; display: flex;
@ -37,22 +36,34 @@
height: 24px; height: 24px;
} }
.menu__item--label { .item--label {
cursor: pointer; cursor: pointer;
width: 240px; width: 240px;
padding-left: 10px; padding-left: 10px;
} }
.menu__item--label:focus { .item--child {
padding-left: 25px;
}
.item--label:focus {
outline: none; outline: none;
} }
.item--label__trigger {
padding-left: 0;
}
.mat-expansion-panel-header { .mat-expansion-panel-header {
padding: 0 8px !important; padding: 0 8px !important;
} }
.mat-expansion-panel-header-title span { .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 { .mat-expansion-panel-header-title {

13
src/app/components/sidenav/sidenav.component.theme.scss
View File

@ -25,28 +25,27 @@
background: none !important; background: none !important;
} }
.mat-mini-fab { .mat-expansion-panel-header {
box-shadow: unset !important; font-size: 14px !important;
background-color: unset !important;
} }
.adf-sidebar-action-menu-button { .adf-sidebar-action-menu-button {
background-color: mat-color($accent); background-color: mat-color($accent);
} }
&__section { .section {
border-bottom: $border; border-bottom: $border;
} }
.menu__item--label:not(.menu__item--active):hover { .item--label:not(.item--active):hover {
color: mat-color($foreground, text); color: mat-color($foreground, text);
} }
.menu__item--active { .item--active {
color: mat-color($accent); color: mat-color($accent);
} }
.menu__item--default { .item--default {
color: mat-color($primary, 0.87); color: mat-color($primary, 0.87);
} }
} }