From 9aafb804830cba52f2a92e0a14549f6b41fcaa92 Mon Sep 17 00:00:00 2001 From: Cilibiu Bogdan Date: Wed, 29 May 2019 22:02:15 +0300 Subject: [PATCH] [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 --- .gitignore | 1 + demo-shell/src/app/app.module.ts | 2 - .../app-layout/app-layout.component.html | 51 +++++++++---------- .../app-layout/app-layout.component.scss | 23 +++------ .../nested-menu-position.directive.ts | 43 ---------------- e2e/pages/adf/contentServicesPage.ts | 2 +- e2e/pages/adf/navigationBarPage.ts | 27 +++++----- e2e/pages/adf/notificationPage.ts | 2 +- scripts/lint.sh | 2 +- 9 files changed, 51 insertions(+), 102 deletions(-) delete mode 100644 demo-shell/src/app/components/cloud/directives/nested-menu-position.directive.ts diff --git a/.gitignore b/.gitignore index 8ab3608d5e..1dde918019 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ workspace.xml .idea/ .env.cloud dist/ +e2e/.env.cloud tmp e2e-output/ e2e/downloads/ diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts index 361c504351..0ee4c3a028 100644 --- a/demo-shell/src/app/app.module.ts +++ b/demo-shell/src/app/app.module.ts @@ -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, diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html index 1cc1e35967..7db3e57b9b 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.html +++ b/demo-shell/src/app/components/app-layout/app-layout.component.html @@ -32,33 +32,31 @@ - - + + + {{link.icon}} + {{link.title | translate }} + arrow_right + + - {{link.icon}} -
- {{link.title | translate }}
- arrow_right - - - - - {{link.icon}} -
- {{link.title | translate }}
- + + + {{link.icon}} + {{link.title | translate }} + + - - exit_to_app -
Logout
- + + exit_to_app + Logout + @@ -73,15 +71,16 @@ - + diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.scss b/demo-shell/src/app/components/app-layout/app-layout.component.scss index a8ff43c03e..e6fbcb3304 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.scss +++ b/demo-shell/src/app/components/app-layout/app-layout.component.scss @@ -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); + } } diff --git a/demo-shell/src/app/components/cloud/directives/nested-menu-position.directive.ts b/demo-shell/src/app/components/cloud/directives/nested-menu-position.directive.ts deleted file mode 100644 index 9c803d6486..0000000000 --- a/demo-shell/src/app/components/cloud/directives/nested-menu-position.directive.ts +++ /dev/null @@ -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; - }); - } - } - -} diff --git a/e2e/pages/adf/contentServicesPage.ts b/e2e/pages/adf/contentServicesPage.ts index 0e355c1c00..08591447e1 100644 --- a/e2e/pages/adf/contentServicesPage.ts +++ b/e2e/pages/adf/contentServicesPage.ts @@ -44,7 +44,7 @@ export class ContentServicesPage { createLibraryDialog = new CreateLibraryDialog(); dragAndDropAction = new DropActions(); 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')); createFolderButton = element(by.css('button[data-automation-id="create-new-folder"]')); createLibraryButton = element(by.css('button[data-automation-id="create-new-library"]')); diff --git a/e2e/pages/adf/navigationBarPage.ts b/e2e/pages/adf/navigationBarPage.ts index b9c45da291..7fbd9d32a9 100644 --- a/e2e/pages/adf/navigationBarPage.ts +++ b/e2e/pages/adf/navigationBarPage.ts @@ -25,26 +25,27 @@ import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing'; export class NavigationBarPage { linkListContainer = element(by.css('.adf-sidenav-linklist')); - dataTableNestedButton = element(by.css('button[data-automation-id="Datatable"]')); - dataTableCopyContentButton = element(by.css('button[data-automation-id="Copy Content"]')); - dataTableDragAndDropButton = element(by.css('button[data-automation-id="Drag and Drop"]')); - processServicesButton = element(by.css('a[data-automation-id="Process Services"]')); - processServicesNestedButton = element(by.css('button[data-automation-id="App"]')); - processServicesCloudHomeButton = element(by.css('button[data-automation-id="Home"]')); - loginButton = element(by.css('a[data-automation-id="Login"]')); - overlayViewerButton = element(by.css('a[data-automation-id="Overlay Viewer"]')); + linkMenuChildrenContainer = element(by.css('.nestedMenu')); + dataTableNestedButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Datatable"]')); + dataTableCopyContentButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Copy Content"]')); + dataTableDragAndDropButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Drag and Drop"]')); + processServicesButton = element(by.css('.adf-sidenav-link[data-automation-id="Process Services"]')); + processServicesNestedButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="App"]')); + processServicesCloudHomeButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Home"]')); + 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"]')); themeMenuContent = element(by.css('div[class*="mat-menu-panel"]')); - logoutButton = element(by.css('a[adf-logout]')); - cardViewButton = element(by.cssContainingText('.adf-sidenav-menu-label', 'CardView')); + logoutButton = element(by.css('.adf-sidenav-link[adf-logout]')); + cardViewButton = element(by.css('.adf-sidenav-link[data-automation-id="CardView"]')); languageMenuButton = element(by.css('button[data-automation-id="language-menu-button"]')); appTitle = element(by.css('.adf-app-title')); menuButton = element(by.css('button[data-automation-id="adf-menu-icon"]')); - formButton = element(by.css('button[data-automation-id="Form"]')); - peopleGroupCloudButton = element(by.css('button[data-automation-id="People/Group Cloud"]')); + formButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="Form"]')); + peopleGroupCloudButton = this.linkMenuChildrenContainer.element(by.css('.adf-sidenav-link[data-automation-id="People/Group Cloud"]')); clickMenuButton(title) { - BrowserActions.clickExecuteScript(`a[data-automation-id="${title}"]`); + BrowserActions.clickExecuteScript(`.adf-sidenav-link[data-automation-id="${title}"]`); } async clickTagButton() { diff --git a/e2e/pages/adf/notificationPage.ts b/e2e/pages/adf/notificationPage.ts index 717206c1bc..4b86cf3299 100644 --- a/e2e/pages/adf/notificationPage.ts +++ b/e2e/pages/adf/notificationPage.ts @@ -29,7 +29,7 @@ export class NotificationPage { notificationSnackBar = element.all(by.css('simple-snack-bar')).first(); actionOutput = element(by.css('div[data-automation-id="notification-action-output"]')); 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"]')); checkNotifyContains(message) { diff --git a/scripts/lint.sh b/scripts/lint.sh index 6cbef049e2..5cfaa789a8 100755 --- a/scripts/lint.sh +++ b/scripts/lint.sh @@ -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 -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 exit 1 fi