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 {
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"]'
};

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

@ -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>

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

@ -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 {

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

@ -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>
</div>

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

@ -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 {

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

@ -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);
}
}