inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3512] SidenavLayoutComponent option to show the sidebar on the right (#3768)

Browse Source 
* add sidebar end start property

* add demo and test

* fix test

* fix failing test
This commit is contained in:
Eugenio Romano
2018-09-12 10:02:24 +01:00
committed by GitHub
parent 3d5da1e622
commit cc396e2a11
16 changed files with 186 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
demo-shell/src/app/components/app-layout/app-layout.component.html
View File

@@ -1,28 +1,39 @@
<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="hideSidenav" [expandedSidenav]= "expandedSidenav" (expanded)="setState($event)">
<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav" (expanded)="setState($event)"
[position]="position">
<adf-sidenav-layout-header>
<ng-template let-toggleMenu="toggleMenu">
<adf-layout-header id="adf-header" [title]="title | translate" [redirectUrl]="redirectUrl" [logo]="logo" [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [color]="color" (clicked)=toggleMenu($event) >
<ng-template let-toggleMenu=" toggleMenu">
<div class="adf-app-layout-menu-spacer"></div>
<adf-layout-header id="adf-header"
[title]="title | translate"
[redirectUrl]="redirectUrl"
[logo]="logo"
[tooltip]="tooltip | translate"
[showSidenavToggle]="showMenu"
[color]="color"
[position]="position"
(clicked)=toggleMenu($event)>
<app-search-bar fxFlex="0 1 auto"></app-search-bar>
<div class="adf-app-layout-menu-spacer"></div>
<div class="adf-header-delimiter"></div>
<app-search-bar fxFlex="0 1 auto"></app-search-bar>
<adf-userinfo
class="adf-app-layout-user-profile"
[menuPositionX]="'before'"
[menuPositionY]="'above'">
</adf-userinfo>
<div class="adf-header-delimiter"></div>
<app-theme-picker></app-theme-picker>
<button data-automation-id="language-menu-button" mat-icon-button [matMenuTriggerFor]="langMenu">
<mat-icon>language</mat-icon>
</button>
<mat-menu #langMenu="matMenu" class="adf-menu">
<adf-language-menu></adf-language-menu>
</mat-menu>
<adf-userinfo
class="adf-app-layout-user-profile"
[menuPositionX]="'before'"
[menuPositionY]="'above'">
</adf-userinfo>
<app-theme-picker></app-theme-picker>
<button data-automation-id="language-menu-button" mat-icon-button [matMenuTriggerFor]="langMenu">
<mat-icon>language</mat-icon>
</button>
<mat-menu #langMenu="matMenu" class="adf-menu">
<adf-language-menu></adf-language-menu>
</mat-menu>
</adf-layout-header>
</ng-template>
@@ -31,19 +42,23 @@
<adf-sidenav-layout-navigation>
<ng-template let-isMenuMinimized="isMenuMinimized">
<mat-nav-list class="adf-sidenav-linklist">
<a mat-list-item *ngFor="let link of links" [attr.data-automation-id]="link.title | translate" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="adf-sidenav-link">
<a mat-list-item *ngFor="let link of links" [attr.data-automation-id]="link.title | translate"
[routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
class="adf-sidenav-link">
<mat-icon matListIcon class="sidenav-menu-icon">{{link.icon}}</mat-icon>
<div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">{{link.title | translate }}</div>
</a>
<a mat-list-item adf-logout [enabelRedirect]="enabelRedirect" redirectUri="/logout" class="adf-sidenav-link">
<a mat-list-item adf-logout [enabelRedirect]="enabelRedirect" redirectUri="/logout"
class="adf-sidenav-link">
<mat-icon matListIcon class="sidenav-menu-icon">exit_to_app</mat-icon>
<div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>
</a>
</mat-nav-list>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-content >
<adf-sidenav-layout-content>
<ng-template>
<router-outlet></router-outlet>
</ng-template>

11
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@@ -34,9 +34,9 @@ export class AppLayoutComponent implements OnInit {
{ href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
{ href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
{ href: '/breadcrumb', icon: 'label', title: 'APP_LAYOUT.BREADCRUMB' },
{ href: '/notifications', icon: 'alarm', title: 'APP_LAYOUT.NOTIFICATIONS'},
{ href: '/card-view', icon: 'view_headline', title: 'APP_LAYOUT.CARD_VIEW'},
{ href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA'},
{ href: '/notifications', icon: 'alarm', title: 'APP_LAYOUT.NOTIFICATIONS' },
{ href: '/card-view', icon: 'view_headline', title: 'APP_LAYOUT.CARD_VIEW' },
{ href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA' },
{ href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
{ href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
{ href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
@@ -61,6 +61,8 @@ export class AppLayoutComponent implements OnInit {
expandedSidenav = false;
position = 'start';
hideSidenav = false;
showMenu = true;
@@ -87,6 +89,7 @@ export class AppLayoutComponent implements OnInit {
this.headerService.logo.subscribe(path => this.logo = path);
this.headerService.redirectUrl.subscribe(redirectUrl => this.redirectUrl = redirectUrl);
this.headerService.tooltip.subscribe(tooltip => this.tooltip = tooltip);
this.headerService.position.subscribe(position => this.position = position);
}
constructor(
@@ -104,4 +107,4 @@ export class AppLayoutComponent implements OnInit {
this.userpreference.set('expandedSidenav', state);
}
}
}
}