mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4601] DemoShell - Side navigation RTL support (#4768)
* rtl support * fix lint * Run e2e in case demoshell has been changed * Skip file * Skip file * remove demoshell directive * refactor side navigation * remove env.cloud file * class name selectors * side navigation selectors * fix clickMenuButton selector * nested menu element context * fix notification navigation selector
This commit is contained in:
Cilibiu Bogdan
committed by
Eugenio Romano
Eugenio Romano
parent
9cf6f5519c
commit
9aafb80483
@@ -80,7 +80,6 @@ import { CloudFiltersDemoComponent } from './components/cloud/cloud-filters-demo
|
||||
import { TemplateDemoComponent } from './components/template-list/template-demo.component';
|
||||
import { PeopleGroupCloudDemoComponent } from './components/cloud/people-groups-cloud-demo.component';
|
||||
import { CloudSettingsComponent } from './components/cloud/cloud-settings.component';
|
||||
import { NestedMenuPositionDirective } from './components/cloud/directives/nested-menu-position.directive';
|
||||
import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
|
||||
import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component';
|
||||
import { CommunityCloudComponent } from './components/cloud/community/community-cloud.component';
|
||||
@@ -155,7 +154,6 @@ import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/commu
|
||||
TemplateDemoComponent,
|
||||
PeopleGroupCloudDemoComponent,
|
||||
CloudSettingsComponent,
|
||||
NestedMenuPositionDirective,
|
||||
ConfirmDialogExampleComponent,
|
||||
FormCloudDemoComponent,
|
||||
ConfirmDialogExampleComponent,
|
||||
|
||||
@@ -32,33 +32,31 @@
|
||||
<adf-sidenav-layout-navigation>
|
||||
<ng-template let-isMenuMinimized="isMenuMinimized">
|
||||
<mat-nav-list class="adf-sidenav-linklist">
|
||||
|
||||
<ng-container *ngFor="let link of links">
|
||||
<a appNestedMenuPosition mat-list-item #appMenuTrigger *ngIf="link.children" [attr.data-automation-id]="link.title | translate"
|
||||
class="adf-sidenav-link" [matMenuTriggerFor]="nestedMenu" [menuMinimized]="isMenuMinimized()"
|
||||
[matMenuTriggerData]="{links: link.children}">
|
||||
<ng-container *ngIf="link.children">
|
||||
<mat-list-item (click)="trigger.openMenu()" [attr.data-automation-id]="link.title | translate" class="adf-sidenav-link">
|
||||
<mat-icon matListIcon>{{link.icon}}</mat-icon>
|
||||
<span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
|
||||
<mat-icon class="adf-sidenav-link__expand-button" [matMenuTriggerData]="{links: link.children}"
|
||||
rippleTrigger mat-icon-button #trigger="matMenuTrigger"
|
||||
[matMenuTriggerFor]="nestedMenu">arrow_right</mat-icon>
|
||||
</mat-list-item>
|
||||
</ng-container>
|
||||
|
||||
<mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
|
||||
<div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">
|
||||
{{link.title | translate }}</div>
|
||||
<mat-icon class="adf-menu-expand-icon">arrow_right</mat-icon>
|
||||
</a>
|
||||
|
||||
<a mat-list-item *ngIf="!link.children" [attr.data-automation-id]="link.title | translate"
|
||||
class="adf-sidenav-link" [routerLink]="link.href" routerLinkActive="active"
|
||||
[routerLinkActiveOptions]="{ exact: true }">
|
||||
|
||||
<mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
|
||||
<div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">
|
||||
{{link.title | translate }}</div>
|
||||
</a>
|
||||
<ng-container *ngIf="!link.children">
|
||||
<mat-list-item [routerLink]="link.href"
|
||||
routerLinkActive="adf-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
|
||||
[attr.data-automation-id]="link.title | translate" class="adf-sidenav-link">
|
||||
<mat-icon matListIcon >{{link.icon}}</mat-icon>
|
||||
<span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
|
||||
</mat-list-item>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<a mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout"
|
||||
class="adf-sidenav-link">
|
||||
<mat-icon matListIcon class="adf-sidenav-menu-icon">exit_to_app</mat-icon>
|
||||
<div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>
|
||||
</a>
|
||||
<mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout" class="adf-sidenav-link">
|
||||
<mat-icon matListIcon>exit_to_app</mat-icon>
|
||||
<span matLine *ngIf="!isMenuMinimized()">Logout</span>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
|
||||
</ng-template>
|
||||
@@ -73,15 +71,16 @@
|
||||
</adf-sidenav-layout>
|
||||
<app-log></app-log>
|
||||
|
||||
<mat-menu #nestedMenu="matMenu" [xPosition]="'before'">
|
||||
<mat-menu #nestedMenu="matMenu" xPosition="after" class="nestedMenu">
|
||||
<ng-template matMenuContent let-links="links">
|
||||
<button mat-menu-item *ngFor="let link of links"
|
||||
class="adf-sidenav-link"
|
||||
[attr.data-automation-id]="link.title | translate"
|
||||
routerLinkActive="active"
|
||||
routerLinkActive="adf-sidenav-link--active"
|
||||
[routerLink]="link.href"
|
||||
[routerLinkActiveOptions]="{ exact: true }">
|
||||
|
||||
<mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
|
||||
<mat-icon matListIcon>{{link.icon}}</mat-icon>
|
||||
{{ link.title | translate }}
|
||||
</button>
|
||||
</ng-template>
|
||||
|
||||
@@ -35,27 +35,16 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-sidenav-linklist {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom: 8px;
|
||||
box-sizing: border-box;
|
||||
.adf-sidenav-link--active {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.adf-sidenav-link {
|
||||
&.adf-active {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.adf-sidenav-menu-icon {
|
||||
margin-right: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.adf-sidenav-menu-label {
|
||||
.mat-list-text {
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
min-width: 120px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -113,4 +102,8 @@
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] .adf-sidenav-link__expand-button {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Directive, HostListener, Input } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[appNestedMenuPosition]'
|
||||
})
|
||||
export class NestedMenuPositionDirective {
|
||||
|
||||
@Input()
|
||||
menuMinimized: string;
|
||||
|
||||
nestedMenuLeftPadding: string = '220px';
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
onClick() {
|
||||
|
||||
const overlayContainer = (document.querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement);
|
||||
(document.querySelector('.cdk-overlay-pane') as HTMLElement).style.width = '100%';
|
||||
|
||||
if (!this.menuMinimized) {
|
||||
setTimeout(() => {
|
||||
overlayContainer.style.left = this.nestedMenuLeftPadding;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user