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-4159] DemoShell - add nested menu on ProcessCloud (#4385)

Browse Source 
* [ADF-4159] DemoShell - add nested menu on ProcessCloud

* [ADF-4159] DemoShell - fix e2e tests

* [ADF-4159] DemoShell fix typo

* [ADF-4159] - fix e2e lint

* [ADF-4159] - change app nested menu for process list

* [ADF-4159] - lint
This commit is contained in:
Silviu Popa
2019-03-13 13:37:00 +02:00
committed by Eugenio Romano
parent 574cc9c1a6
commit 3a7376af9f
4 changed files with 69 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
demo-shell/resources/i18n/en.json
View File

@@ -53,6 +53,7 @@
}
},
"APP_LAYOUT": {
"APP": "App",
"APP_NAME": "ADF Demo Application",
"HOME": "Home",
"NODE-SELECTOR": "Node Selector",

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

@@ -1,19 +1,12 @@
<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="hideSidenav"
[expandedSidenav]="expandedSidenav" (expanded)="setState($event)"
[position]="position">
[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"
[position]="position"
(clicked)=toggleMenu($event)>
<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)>
<div class="adf-app-layout-menu-spacer"></div>
@@ -21,10 +14,7 @@
<div class="adf-header-delimiexpandedSidenavter"></div>
<adf-userinfo
class="adf-app-layout-user-profile"
[menuPositionX]="'before'"
[menuPositionY]="'above'">
<adf-userinfo class="adf-app-layout-user-profile" [menuPositionX]="'before'" [menuPositionY]="'above'">
</adf-userinfo>
<app-theme-picker></app-theme-picker>
@@ -42,14 +32,29 @@
<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">
<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 *ngFor="let link of links">
<a mat-list-item *ngIf="link.children" [attr.data-automation-id]="link.title | translate"
class="adf-sidenav-link" [matMenuTriggerFor]="nestedMenu"
[matMenuTriggerData]="{links: link.children}">
<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>
<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>
<a mat-list-item adf-logout [enableRedirect]="enableRedirect" redirectUri="/logout"
class="adf-sidenav-link">
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>
@@ -66,3 +71,17 @@
</adf-sidenav-layout>
<app-log></app-log>
<mat-menu #nestedMenu="matMenu">
<ng-template matMenuContent let-links="links">
<button mat-menu-item *ngFor="let link of links"
[attr.data-automation-id]="link.title | translate"
routerLinkActive="active"
[routerLink]="link.href"
[routerLinkActiveOptions]="{ exact: true }">
<mat-icon matListIcon class="adf-sidenav-menu-icon">{{link.icon}}</mat-icon>
{{ link.title | translate }}
</button>
</ng-template>
</mat-menu>

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

@@ -39,19 +39,25 @@ export class AppLayoutComponent implements OnInit {
{ 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' },
{ href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD' },
{ href: '/cloud/people-group-cloud', icon: 'group', title: 'APP_LAYOUT.PEOPLE_GROUPS_CLOUD' },
{ href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
{ href: '/cloud', icon: 'cloud', title: 'APP_LAYOUT.PROCESS_CLOUD', children: [
{ href: '/cloud/', icon: 'cloud', title: 'APP_LAYOUT.HOME' },
{ href: '/cloud/people-group-cloud', icon: 'group', title: 'APP_LAYOUT.PEOPLE_GROUPS_CLOUD' }
]},
{ href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES', children: [
{ href: '/activiti', icon: 'vpn_key', title: 'APP_LAYOUT.APP' },
{ href: '/process-list', icon: 'assignment', title: 'APP_LAYOUT.PROCESS_LIST' },
{ href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
{ href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
{ href: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' }
]},
{ href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
{ href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },
{ href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
{ href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
{ href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },
{ href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE', children: [
{ href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
{ href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' }
]},
{ href: '/template-list', icon: 'list_alt', title: 'APP_LAYOUT.TEMPLATE' },
{ href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
{ href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
{ href: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' },
{ href: '/webscript', icon: 'extension', title: 'APP_LAYOUT.WEBSCRIPT' },
{ href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },
{ href: '/social', icon: 'thumb_up', title: 'APP_LAYOUT.SOCIAL' },

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

@@ -26,10 +26,14 @@ export class NavigationBarPage {
contentServicesButton = element(by.css('a[data-automation-id="Content Services"]'));
dataTableButton = element(by.css('a[data-automation-id="Datatable"]'));
dataTableNestedButton = element(by.css('button[data-automation-id="Datatable"]'));
taskListButton = element(by.css("a[data-automation-id='Task List']"));
configEditorButton = element(by.css('a[data-automation-id="Configuration Editor"]'));
processServicesButton = element(by.css('a[data-automation-id="Process Services"]'));
processServicesNestedButton = element(by.css('button[data-automation-id="App"]'));
processServicesCloudButton = element(by.css('a[data-automation-id="Process Cloud"]'));
processServicesCloudHomeButton = element(by.css('button[data-automation-id="Home"]'));
processServicesCloudPeopleGroupButton = element(by.css('button[data-automation-id="People/Group Cloud"]'));
loginButton = element(by.css('a[data-automation-id="Login"]'));
trashcanButton = element(by.css('a[data-automation-id="Trashcan"]'));
overlayViewerButton = element(by.css('a[data-automation-id="Overlay Viewer"]'));
@@ -41,7 +45,7 @@ export class NavigationBarPage {
appTitle = element(by.css('.adf-app-title'));
headerDataButton = element(by.css('a[data-automation-id="Header Data"]'));
menuButton = element(by.css('button[data-automation-id="adf-menu-icon"]'));
formButton = element(by.css('a[data-automation-id="Form"]'));
formButton = element(by.css('button[data-automation-id="Form"]'));
treeViewButton = element(by.css('a[data-automation-id="Tree View"]'));
iconsButton = element(by.css('a[data-automation-id="Icons"]'));
customSourcesButton = element(by.css('a[data-automation-id="Custom Sources"]'));
@@ -52,6 +56,7 @@ export class NavigationBarPage {
navigateToDatatable() {
Util.waitUntilElementIsVisible(this.dataTableButton);
this.dataTableButton.click();
this.dataTableNestedButton.click();
}
clickContentServicesButton() {
@@ -72,12 +77,16 @@ export class NavigationBarPage {
navigateToProcessServicesPage() {
Util.waitUntilElementIsVisible(this.processServicesButton);
this.processServicesButton.click();
Util.waitUntilElementIsVisible(this.processServicesNestedButton);
this.processServicesNestedButton.click();
return new ProcessServicesPage();
}
navigateToProcessServicesCloudPage() {
Util.waitUntilElementIsVisible(this.processServicesCloudButton);
this.processServicesCloudButton.click();
Util.waitUntilElementIsVisible(this.processServicesCloudHomeButton);
this.processServicesCloudHomeButton.click();
return new AppListCloudPage();
}
@@ -188,6 +197,8 @@ export class NavigationBarPage {
}
clickFormButton() {
Util.waitUntilElementIsVisible(this.processServicesButton);
this.processServicesButton.click();
Util.waitUntilElementIsVisible(this.formButton);
return this.formButton.click();
}