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

[ADF-4601] DemoShell - Side navigation RTL support (#4768)

Browse Source 
* 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
2019-05-29 22:02:15 +03:00
committed by Eugenio Romano
parent 9cf6f5519c
commit 9aafb80483
9 changed files with 51 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -5,6 +5,7 @@ workspace.xml
.idea/ .idea/
.env.cloud .env.cloud
dist/ dist/
e2e/.env.cloud
tmp tmp
e2e-output/ e2e-output/
e2e/downloads/ e2e/downloads/

2
demo-shell/src/app/app.module.ts
View File

@@ -80,7 +80,6 @@ import { CloudFiltersDemoComponent } from './components/cloud/cloud-filters-demo
import { TemplateDemoComponent } from './components/template-list/template-demo.component'; import { TemplateDemoComponent } from './components/template-list/template-demo.component';
import { PeopleGroupCloudDemoComponent } from './components/cloud/people-groups-cloud-demo.component'; import { PeopleGroupCloudDemoComponent } from './components/cloud/people-groups-cloud-demo.component';
import { CloudSettingsComponent } from './components/cloud/cloud-settings.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 { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component'; import { FormCloudDemoComponent } from './components/app-layout/cloud/form-demo/cloud-form-demo.component';
import { CommunityCloudComponent } from './components/cloud/community/community-cloud.component'; import { CommunityCloudComponent } from './components/cloud/community/community-cloud.component';
@@ -155,7 +154,6 @@ import { CommunityTaskDetailsCloudDemoComponent } from './components/cloud/commu
TemplateDemoComponent, TemplateDemoComponent,
PeopleGroupCloudDemoComponent, PeopleGroupCloudDemoComponent,
CloudSettingsComponent, CloudSettingsComponent,
NestedMenuPositionDirective,
ConfirmDialogExampleComponent, ConfirmDialogExampleComponent,
FormCloudDemoComponent, FormCloudDemoComponent,
ConfirmDialogExampleComponent, ConfirmDialogExampleComponent,

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

@@ -32,33 +32,31 @@
<adf-sidenav-layout-navigation> <adf-sidenav-layout-navigation>
<ng-template let-isMenuMinimized="isMenuMinimized"> <ng-template let-isMenuMinimized="isMenuMinimized">
<mat-nav-list class="adf-sidenav-linklist"> <mat-nav-list class="adf-sidenav-linklist">
<ng-container *ngFor="let link of links"> <ng-container *ngFor="let link of links">
<a appNestedMenuPosition mat-list-item #appMenuTrigger *ngIf="link.children" [attr.data-automation-id]="link.title | translate" <ng-container *ngIf="link.children">
class="adf-sidenav-link" [matMenuTriggerFor]="nestedMenu" [menuMinimized]="isMenuMinimized()" <mat-list-item (click)="trigger.openMenu()" [attr.data-automation-id]="link.title | translate" class="adf-sidenav-link">
[matMenuTriggerData]="{links: link.children}"> <mat-icon matListIcon>{{link.icon}}</mat-icon>
<span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
<mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon> <mat-icon class="adf-sidenav-link__expand-button" [matMenuTriggerData]="{links: link.children}"
<div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()"> rippleTrigger mat-icon-button #trigger="matMenuTrigger"
{{link.title | translate }}</div> [matMenuTriggerFor]="nestedMenu">arrow_right</mat-icon>
<mat-icon class="adf-menu-expand-icon">arrow_right</mat-icon> </mat-list-item>
</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> </ng-container>
<a mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout" <ng-container *ngIf="!link.children">
class="adf-sidenav-link"> <mat-list-item [routerLink]="link.href"
<mat-icon matListIcon class="adf-sidenav-menu-icon">exit_to_app</mat-icon> routerLinkActive="adf-sidenav-link--active" [routerLinkActiveOptions]="{ exact: true }"
<div class="adf-sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div> [attr.data-automation-id]="link.title | translate" class="adf-sidenav-link">
</a> <mat-icon matListIcon >{{link.icon}}</mat-icon>
<span matLine *ngIf="!isMenuMinimized()">{{link.title | translate }}</span>
</mat-list-item>
</ng-container>
</ng-container>
<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> </mat-nav-list>
</ng-template> </ng-template>
@@ -73,15 +71,16 @@
</adf-sidenav-layout> </adf-sidenav-layout>
<app-log></app-log> <app-log></app-log>
<mat-menu #nestedMenu="matMenu" [xPosition]="'before'"> <mat-menu #nestedMenu="matMenu" xPosition="after" class="nestedMenu">
<ng-template matMenuContent let-links="links"> <ng-template matMenuContent let-links="links">
<button mat-menu-item *ngFor="let link of links" <button mat-menu-item *ngFor="let link of links"
class="adf-sidenav-link"
[attr.data-automation-id]="link.title | translate" [attr.data-automation-id]="link.title | translate"
routerLinkActive="active" routerLinkActive="adf-sidenav-link--active"
[routerLink]="link.href" [routerLink]="link.href"
[routerLinkActiveOptions]="{ exact: true }"> [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 }} {{ link.title | translate }}
</button> </button>
</ng-template> </ng-template>

23
demo-shell/src/app/components/app-layout/app-layout.component.scss
View File

@@ -35,27 +35,16 @@
height: 100%; height: 100%;
} }
.adf-sidenav-linklist { .adf-sidenav-link--active {
height: 100%;
overflow: auto;
padding-bottom: 8px;
box-sizing: border-box;
}
.adf-sidenav-link {
&.adf-active {
color: mat-color($primary); color: mat-color($primary);
} }
.adf-sidenav-menu-icon { .adf-sidenav-link {
margin-right: 20px; .mat-list-text {
font-size: 14px;
}
.adf-sidenav-menu-label {
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
min-width: 120px; min-width: 120px;
padding: 0 10px;
} }
} }
@@ -113,4 +102,8 @@
flex: auto; flex: auto;
} }
} }
[dir='rtl'] .adf-sidenav-link__expand-button {
transform: rotateY(180deg);
}
} }

43
demo-shell/src/app/components/cloud/directives/nested-menu-position.directive.ts
View File

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

2
e2e/pages/adf/contentServicesPage.ts
View File

@@ -44,7 +44,7 @@ export class ContentServicesPage {
createLibraryDialog = new CreateLibraryDialog(); createLibraryDialog = new CreateLibraryDialog();
dragAndDropAction = new DropActions(); dragAndDropAction = new DropActions();
uploadBorder = element(by.id('document-list-container')); uploadBorder = element(by.id('document-list-container'));
contentServices = element(by.css('a[data-automation-id="Content Services"]')); contentServices = element(by.css('.adf-sidenav-link[data-automation-id="Content Services"]'));
currentFolder = element(by.css('div[class*="adf-breadcrumb-item adf-active"] div')); currentFolder = element(by.css('div[class*="adf-breadcrumb-item adf-active"] div'));
createFolderButton = element(by.css('button[data-automation-id="create-new-folder"]')); createFolderButton = element(by.css('button[data-automation-id="create-new-folder"]'));
createLibraryButton = element(by.css('button[data-automation-id="create-new-library"]')); createLibraryButton = element(by.css('button[data-automation-id="create-new-library"]'));

27
e2e/pages/adf/navigationBarPage.ts
View File

@@ -25,26 +25,27 @@ import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing';
export class NavigationBarPage { export class NavigationBarPage {
linkListContainer = element(by.css('.adf-sidenav-linklist')); linkListContainer = element(by.css('.adf-sidenav-linklist'));
dataTableNestedButton = element(by.css('button[data-automation-id="Datatable"]')); linkMenuChildrenContainer = element(by.css('.nestedMenu'));
dataTableCopyContentButton = element(by.css('button[data-automation-id="Copy Content"]')); dataTableNestedButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Datatable"]'));
dataTableDragAndDropButton = element(by.css('button[data-automation-id="Drag and Drop"]')); dataTableCopyContentButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Copy Content"]'));
processServicesButton = element(by.css('a[data-automation-id="Process Services"]')); dataTableDragAndDropButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Drag and Drop"]'));
processServicesNestedButton = element(by.css('button[data-automation-id="App"]')); processServicesButton = element(by.css('.adf-sidenav-link[data-automation-id="Process Services"]'));
processServicesCloudHomeButton = element(by.css('button[data-automation-id="Home"]')); processServicesNestedButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="App"]'));
loginButton = element(by.css('a[data-automation-id="Login"]')); processServicesCloudHomeButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Home"]'));
overlayViewerButton = element(by.css('a[data-automation-id="Overlay Viewer"]')); loginButton = element(by.css('.adf-sidenav-link[data-automation-id="Login"]'));
overlayViewerButton = element(by.css('.adf-sidenav-link[data-automation-id="Overlay Viewer"]'));
themeButton = element(by.css('button[data-automation-id="theme menu"]')); themeButton = element(by.css('button[data-automation-id="theme menu"]'));
themeMenuContent = element(by.css('div[class*="mat-menu-panel"]')); themeMenuContent = element(by.css('div[class*="mat-menu-panel"]'));
logoutButton = element(by.css('a[adf-logout]')); logoutButton = element(by.css('.adf-sidenav-link[adf-logout]'));
cardViewButton = element(by.cssContainingText('.adf-sidenav-menu-label', 'CardView')); cardViewButton = element(by.css('.adf-sidenav-link[data-automation-id="CardView"]'));
languageMenuButton = element(by.css('button[data-automation-id="language-menu-button"]')); languageMenuButton = element(by.css('button[data-automation-id="language-menu-button"]'));
appTitle = element(by.css('.adf-app-title')); appTitle = element(by.css('.adf-app-title'));
menuButton = element(by.css('button[data-automation-id="adf-menu-icon"]')); menuButton = element(by.css('button[data-automation-id="adf-menu-icon"]'));
formButton = element(by.css('button[data-automation-id="Form"]')); formButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Form"]'));
peopleGroupCloudButton = element(by.css('button[data-automation-id="People/Group Cloud"]')); peopleGroupCloudButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="People/Group Cloud"]'));
clickMenuButton(title) { clickMenuButton(title) {
BrowserActions.clickExecuteScript(`a[data-automation-id="${title}"]`); BrowserActions.clickExecuteScript(`.adf-sidenav-link[data-automation-id="${title}"]`);
} }
async clickTagButton() { async clickTagButton() {

2
e2e/pages/adf/notificationPage.ts
View File

@@ -29,7 +29,7 @@ export class NotificationPage {
notificationSnackBar = element.all(by.css('simple-snack-bar')).first(); notificationSnackBar = element.all(by.css('simple-snack-bar')).first();
actionOutput = element(by.css('div[data-automation-id="notification-action-output"]')); actionOutput = element(by.css('div[data-automation-id="notification-action-output"]'));
selectionDropDown = element.all(by.css('.mat-select-panel')).first(); selectionDropDown = element.all(by.css('.mat-select-panel')).first();
notificationsPage = element(by.css('a[data-automation-id="Notifications"]')); notificationsPage = element(by.css('.adf-sidenav-link[data-automation-id="Notifications"]'));
notificationConfig = element(by.css('p[data-automation-id="notification-custom-object"]')); notificationConfig = element(by.css('p[data-automation-id="notification-custom-object"]'));
checkNotifyContains(message) { checkNotifyContains(message) {

2
scripts/lint.sh
View File

@@ -14,7 +14,7 @@ echo "====== Parallel lint ====="
npx concurrently -s "all" "npm run lint-lib || exit 1" "npm run stylelint || exit 1" "npm run spellcheck || exit " "ng lint dev || exit 1" "npm run lint-e2e || exit 1" || exit 1 npx concurrently -s "all" "npm run lint-lib || exit 1" "npm run stylelint || exit 1" "npm run spellcheck || exit " "ng lint dev || exit 1" "npm run lint-e2e || exit 1" || exit 1
if grep "envalfresco" . -R --exclude-dir={node_modules,.history,.idea,scripts}; then if grep "envalfresco" . -R --exclude-dir={node_modules,.history,.idea,scripts} --exclude=".env.cloud"; then
echo not permitted word echo not permitted word
exit 1 exit 1
fi fi