[ACA-1830] create menu enhancements (#670)

* nested menus for create button

* evaluate sub-menu permissions

* demo plugin

* "create library" action

* unit tests and proper effect name
This commit is contained in:
Denys Vuika 2018-09-27 09:07:24 +01:00 committed by GitHub
parent 23df2ad6a2
commit 457fa74048
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 347 additions and 186 deletions

View File

@ -49,8 +49,7 @@
"cardview",
"webm",
"keycodes",
"denysvuika",
"fdescribe"
"denysvuika"
],
"dictionaries": ["html", "en-gb", "en_US"]
}

View File

@ -612,6 +612,7 @@ Below is the list of public actions types you can use in the plugin definitions
| NAVIGATE_ROUTE | any[] | Navigate to a particular Route (supports parameters) |
| NAVIGATE_FOLDER | MinimalNodeEntity | Navigate to a folder based on the Node properties. |
| NAVIGATE_PARENT_FOLDER | MinimalNodeEntity | Navigate to a containing folder based on the Node properties. |
| NAVIGATE_LIBRARY | string | Navigate to library |
| SEARCH_BY_TERM | string | Perform a simple search by the term and navigate to Search results. |
| SNACKBAR_INFO | string | Show information snackbar with the message provided. |
| SNACKBAR_WARNING | string | Show warning snackbar with the message provided. |

View File

@ -33,7 +33,7 @@ export class Sidenav extends Component {
link: '.sidenav-menu__item',
label: '.menu__item--label',
activeLink: '.menu__item--active',
newButton: '.adf-sidebar-action-menu-button'
newButton: '[data-automation-id="create-button"]'
};
links: ElementArrayFinder = this.component.all(by.css(Sidenav.selectors.link));

View File

@ -1,14 +1,26 @@
<adf-sidebar-action-menu
[expanded]="showLabel"
[attr.title]="'APP.NEW_MENU.TOOLTIP' | translate"
[title]="'APP.NEW_MENU.LABEL' | translate">
<mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div sidebar-menu-expand-icon>
<mat-icon [title]="'APP.NEW_MENU.TOOLTIP' | translate">queue</mat-icon>
</div>
<div sidebar-menu-options>
<ng-container *ngFor="let action of createActions; trackBy: trackById">
<app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
</ng-container>
</div>
</adf-sidebar-action-menu>
<ng-container *ngIf="expanded">
<button
data-automation-id="create-button"
mat-raised-button
[matMenuTriggerFor]="rootMenu"
title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">
<span class="app-create-menu__text">{{ 'APP.NEW_MENU.LABEL' | translate }}</span>
<mat-icon title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">arrow_drop_down</mat-icon>
</button>
</ng-container>
<ng-container *ngIf="!expanded">
<button
class="app-create-menu--collapsed"
data-automation-id="create-button"
[matMenuTriggerFor]="rootMenu"
title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">
<mat-icon title="{{ 'APP.NEW_MENU.TOOLTIP' | translate }}">queue</mat-icon>
</button>
</ng-container>
<mat-menu #rootMenu="matMenu" class="app-create-menu__root-menu app-create-menu__sub-menu" [overlapTrigger]="false" yPosition="below">
<ng-container *ngFor="let action of createActions; trackBy: trackById">
<app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
</ng-container>
</mat-menu>

View File

@ -1,3 +1,87 @@
.app-create-menu {
width: 100%;
@mixin app-create-menu-theme($theme) {
$foreground: map-get($theme, foreground);
$accent: map-get($theme, accent);
$primary: map-get($theme, primary);
.app-create-menu {
width: 100%;
.mat-raised-button {
width: 100%;
display: block;
box-shadow: none !important;
height: 37.5px;
background-color: mat-color($accent);
color: mat-color($primary, default-contrast) !important;
border-radius: 4px;
font-size: 12.7px;
font-weight: normal;
text-transform: uppercase;
.mat-icon {
width: 24px;
height: 25px;
color: mat-color($primary, default-contrast) !important;
}
&__text {
width: 100%;
height: 20px;
text-align: left;
}
}
&__root-menu {
max-width: 290px !important;
width: 290px;
display: flex;
align-items: center;
justify-content: center;
& > .mat-menu-content {
width: 100%;
}
}
&--collapsed {
color: mat-color($foreground, text, 0.54);
cursor: pointer;
&:hover {
color: mat-color($primary);
}
margin: 0;
border: none;
background: none;
}
&__sub-menu {
.mat-menu-item {
display: flex;
flex-direction: row;
align-items: center;
font-size: 14px;
color: mat-color($foreground, text, 0.54);
line-height: 48px;
box-shadow: none;
transform: none;
transition: unset;
font-weight: normal;
text-transform: capitalize;
color: mat-color($primary);
&:hover {
color: mat-color($accent);
}
}
.mat-menu-item[disabled],
.mat-menu-item[disabled]:hover {
color: mat-color($foreground, text, 0.38);
.mat-icon {
color: mat-color($foreground, text, 0.38);
}
}
}
}
}

View File

@ -52,6 +52,9 @@ export class CreateMenuComponent implements OnInit, OnDestroy {
@Input()
showLabel: boolean;
@Input()
expanded: boolean;
constructor(
private store: Store<AppStore>,
private extensions: AppExtensionService

View File

@ -41,6 +41,8 @@ import { LibrariesComponent } from './libraries.component';
import { AppTestingModule } from '../../testing/app-testing.module';
import { ContentApiService } from '../../services/content-api.service';
import { ExperimentalDirective } from '../../directives/experimental.directive';
import { EffectsModule } from '@ngrx/effects';
import { LibraryEffects } from 'src/app/store/effects';
describe('LibrariesComponent', () => {
let fixture: ComponentFixture<LibrariesComponent>;
@ -69,7 +71,7 @@ describe('LibrariesComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [AppTestingModule],
imports: [AppTestingModule, EffectsModule.forRoot([LibraryEffects])],
declarations: [
DataTableComponent,
TimeAgoPipe,
@ -153,13 +155,8 @@ describe('LibrariesComponent', () => {
});
describe('Node navigation', () => {
let routerSpy;
beforeEach(() => {
routerSpy = spyOn(router, 'navigate');
});
it('does not navigate when id is not passed', () => {
spyOn(router, 'navigate').and.stub();
component.navigate(null);
expect(router.navigate).not.toHaveBeenCalled();
@ -167,11 +164,12 @@ describe('LibrariesComponent', () => {
it('navigates to node id', () => {
const document = { id: 'documentId' };
spyOn(router, 'navigate').and.stub();
spyOn(contentApi, 'getNode').and.returnValue(of({ entry: document }));
component.navigate(node.id);
expect(routerSpy.calls.argsFor(0)[0]).toEqual(['./', document.id]);
expect(router.navigate).toHaveBeenCalledWith(['libraries', 'documentId']);
});
});

View File

@ -24,18 +24,15 @@
*/
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ShareDataRow } from '@alfresco/adf-content-services';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { PageComponent } from '../page.component';
import { Store } from '@ngrx/store';
import { AppStore } from '../../store/states/app.state';
import { SiteEntry } from 'alfresco-js-api';
import { ContentManagementService } from '../../services/content-management.service';
import { ContentApiService } from '../../services/content-api.service';
import { AppExtensionService } from '../../extensions/extension.service';
import { map } from 'rxjs/operators';
import { NavigateLibraryAction } from 'src/app/store/actions';
@Component({
templateUrl: './libraries.component.html'
@ -44,12 +41,9 @@ export class LibrariesComponent extends PageComponent implements OnInit {
isSmallScreen = false;
constructor(
private route: ActivatedRoute,
content: ContentManagementService,
private contentApi: ContentApiService,
store: Store<AppStore>,
extensions: AppExtensionService,
private router: Router,
private breakpointObserver: BreakpointObserver
) {
super(store, extensions, content);
@ -60,9 +54,6 @@ export class LibrariesComponent extends PageComponent implements OnInit {
this.subscriptions.push(
this.content.libraryDeleted.subscribe(() => this.reload()),
this.content.libraryCreated.subscribe((node: SiteEntry) => {
this.navigate(node.entry.guid);
}),
this.breakpointObserver
.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
@ -101,15 +92,6 @@ export class LibrariesComponent extends PageComponent implements OnInit {
}
navigate(libraryId: string) {
if (libraryId) {
this.contentApi
.getNode(libraryId, { relativePath: '/documentLibrary' })
.pipe(map(node => node.entry))
.subscribe(documentLibrary => {
this.router.navigate(['./', documentLibrary.id], {
relativeTo: this.route
});
});
}
this.store.dispatch(new NavigateLibraryAction(libraryId));
}
}

View File

@ -1,6 +1,6 @@
<div class="sidenav">
<div class="sidenav__section sidenav__section sidenav_action-menu">
<app-create-menu [showLabel]="showLabel"></app-create-menu>
<app-create-menu [expanded]="showLabel"></app-create-menu>
</div>
<div *ngFor="let group of groups; trackBy: trackById"

View File

@ -1,14 +1,46 @@
<button
[id]="actionRef.id"
mat-menu-item
color="primary"
[disabled]="actionRef.disabled"
[attr.title]="(
actionRef.disabled
? actionRef['description-disabled']
: actionRef.description || actionRef.title
) | translate"
(click)="runAction()">
<mat-icon>{{ actionRef.icon }}</mat-icon>
<span>{{ actionRef.title | translate }}</span>
</button>
<ng-container [ngSwitch]="actionRef.type">
<ng-container *ngSwitchCase="'menu'">
<button
mat-menu-item
[disabled]="actionRef.disabled"
[matMenuTriggerFor]="childMenu">
<mat-icon>{{ actionRef.icon }}</mat-icon>
<span>{{ actionRef.title | translate }}</span>
</button>
<mat-menu #childMenu="matMenu" class="app-create-menu__sub-menu">
<ng-container *ngFor="let child of actionRef.children; trackBy: trackById">
<app-toolbar-menu-item [actionRef]="child"></app-toolbar-menu-item>
</ng-container>
</mat-menu>
</ng-container>
<ng-container *ngSwitchCase="'separator'">
<mat-divider></mat-divider>
</ng-container>
<ng-container *ngSwitchCase="'custom'">
<adf-dynamic-component [id]="actionRef.component"></adf-dynamic-component>
</ng-container>
<ng-container *ngSwitchDefault>
<button
[id]="actionRef.id"
mat-menu-item
color="primary"
[disabled]="actionRef.disabled"
[attr.title]="(
actionRef.disabled
? actionRef['description-disabled']
: actionRef.description || actionRef.title
) | translate"
(click)="runAction()">
<mat-icon>{{ actionRef.icon }}</mat-icon>
<span>{{ actionRef.title | translate }}</span>
</button>
</ng-container>
</ng-container>

View File

@ -51,4 +51,8 @@ export class ToolbarMenuItemComponent {
}
return false;
}
trackById(index: number, obj: { id: string }) {
return obj.id;
}
}

View File

@ -196,7 +196,8 @@ export class AppExtensionService implements RuleContext {
getCreateActions(): Array<ContentActionRef> {
return this.createActions
.filter(action => this.filterByRules(action))
.map(action => this.copyAction(action))
.map(action => this.buildMenu(action))
.map(action => {
let disabled = false;
@ -211,6 +212,39 @@ export class AppExtensionService implements RuleContext {
});
}
private buildMenu(actionRef: ContentActionRef): ContentActionRef {
if (
actionRef.type === ContentActionType.menu &&
actionRef.children &&
actionRef.children.length > 0
) {
const children = actionRef.children
.filter(action => this.filterByRules(action))
.map(action => this.buildMenu(action));
actionRef.children = children
.map(action => {
let disabled = false;
if (action.rules && action.rules.enabled) {
disabled = !this.extensions.evaluateRule(
action.rules.enabled,
this
);
}
return {
...action,
disabled
};
})
.reduce(reduceEmptyMenus, [])
.reduce(reduceSeparators, []);
}
return actionRef;
}
// evaluates content actions for the selection and parent folder node
getAllowedToolbarActions(): Array<ContentActionRef> {
return this.toolbarActions

View File

@ -234,7 +234,7 @@ export class ContentManagementService {
});
}
createLibrary() {
createLibrary(): Observable<SiteEntry> {
const dialogInstance = this.dialogRef.open(LibraryDialogComponent, {
width: '400px'
});
@ -243,11 +243,9 @@ export class ContentManagementService {
this.store.dispatch(new SnackbarErrorAction(message));
});
dialogInstance.afterClosed().subscribe((node: SiteEntry) => {
if (node) {
this.libraryCreated.next(node);
}
});
return dialogInstance
.afterClosed()
.pipe(tap(node => this.libraryCreated.next(node)));
}
deleteLibrary(id: string): void {

View File

@ -27,6 +27,7 @@ import { Action } from '@ngrx/store';
export const DELETE_LIBRARY = 'DELETE_LIBRARY';
export const CREATE_LIBRARY = 'CREATE_LIBRARY';
export const NAVIGATE_LIBRARY = 'NAVIGATE_LIBRARY';
export class DeleteLibraryAction implements Action {
readonly type = DELETE_LIBRARY;
@ -37,3 +38,8 @@ export class CreateLibraryAction implements Action {
readonly type = CREATE_LIBRARY;
constructor() {}
}
export class NavigateLibraryAction implements Action {
readonly type = NAVIGATE_LIBRARY;
constructor(public payload?: string) {}
}

View File

@ -39,7 +39,7 @@ import {
DownloadEffects,
ViewerEffects,
SearchEffects,
SiteEffects,
LibraryEffects,
UploadEffects,
FavoriteEffects,
ModalsEffects
@ -57,7 +57,7 @@ import {
DownloadEffects,
ViewerEffects,
SearchEffects,
SiteEffects,
LibraryEffects,
UploadEffects,
FavoriteEffects,
ModalsEffects

View File

@ -25,24 +25,30 @@
import { Effect, Actions, ofType } from '@ngrx/effects';
import { Injectable } from '@angular/core';
import { map, take } from 'rxjs/operators';
import { map, take, switchMap } from 'rxjs/operators';
import {
DeleteLibraryAction,
DELETE_LIBRARY,
CreateLibraryAction,
CREATE_LIBRARY
CREATE_LIBRARY,
NavigateLibraryAction,
NAVIGATE_LIBRARY
} from '../actions';
import { ContentManagementService } from '../../services/content-management.service';
import { Store } from '@ngrx/store';
import { AppStore } from '../states';
import { appSelection } from '../selectors/app.selectors';
import { ContentApiService } from '../../services/content-api.service';
import { Router } from '@angular/router';
@Injectable()
export class SiteEffects {
export class LibraryEffects {
constructor(
private store: Store<AppStore>,
private actions$: Actions,
private content: ContentManagementService
private content: ContentManagementService,
private contentApi: ContentApiService,
private router: Router
) {}
@Effect({ dispatch: false })
@ -64,11 +70,26 @@ export class SiteEffects {
})
);
@Effect({ dispatch: false })
@Effect()
createLibrary$ = this.actions$.pipe(
ofType<CreateLibraryAction>(CREATE_LIBRARY),
switchMap(() => this.content.createLibrary()),
map(node => new NavigateLibraryAction(node.entry.guid))
);
@Effect({ dispatch: false })
navigateLibrary$ = this.actions$.pipe(
ofType<NavigateLibraryAction>(NAVIGATE_LIBRARY),
map(action => {
this.content.createLibrary();
const libraryId = action.payload;
if (libraryId) {
this.contentApi
.getNode(libraryId, { relativePath: '/documentLibrary' })
.pipe(map(node => node.entry))
.subscribe(documentLibrary => {
this.router.navigate(['libraries', documentLibrary.id]);
});
}
})
);
}

View File

@ -10,12 +10,12 @@
@import '../components/permissions/permission-manager/permission-manager.component.theme';
@import '../components/context-menu/context-menu.component.theme';
@import '../dialogs/node-versions/node-versions.dialog.theme';
@import '../components/create-menu/create-menu.component.scss';
@import './overrides/adf-toolbar.theme';
@import './overrides/adf-search-filter.theme';
@import './overrides/adf-info-drawer.theme';
@import './overrides/adf-upload-button.theme';
@import './overrides/adf-sidebar-action-menu.theme';
@import './overrides/adf-upload-dialog.theme';
@import './overrides/adf-pagination.theme';
@import './overrides/adf-sidenav-layout.theme';
@ -74,7 +74,6 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
@include adf-search-filter-theme($theme);
@include adf-info-drawer-theme($theme);
@include adf-upload-button-theme($theme);
@include adf-sidebar-action-menu-theme($theme);
@include adf-pagination-theme($theme);
@include adf-sidenav-layout-theme($theme);
@include adf-document-list-theme($theme);
@ -95,4 +94,5 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
@include aca-about-component-theme($theme);
@include aca-current-user-theme($theme);
@include aca-context-menu-theme($theme);
@include app-create-menu-theme($theme);
}

View File

@ -1,74 +0,0 @@
@mixin adf-sidebar-action-menu-theme($theme) {
$foreground: map-get($theme, foreground);
$accent: map-get($theme, accent);
$primary: map-get($theme, primary);
.adf-sidebar-action-menu {
.adf-sidebar-action-menu-button {
font-size: 12.7px;
font-weight: normal;
text-transform: uppercase;
}
}
.mat-menu-panel.adf-sidebar-action-menu-panel {
max-width: 290px !important;
}
.adf-sidebar-action-menu-panel {
width: 290px;
display: flex;
align-items: center;
justify-content: center;
}
.adf-sidebar-action-menu-panel .mat-menu-content {
width: 100%;
}
.adf-sidebar-action-menu-icon {
margin: 0;
}
.adf-sidebar-action-menu-icon div[sidebar-menu-expand-icon] {
display: flex;
align-items: center;
justify-content: center;
}
.adf-sidebar-action-menu {
width: 100%;
}
.adf-sidebar-action-menu-options {
width: 100% !important;
.mat-menu-item {
display: flex;
flex-direction: row;
align-items: center;
font-size: 14px;
color: mat-color($foreground, text, 0.54);
line-height: 48px;
box-shadow: none;
transform: none;
transition: unset;
font-weight: normal;
text-transform: capitalize;
color: mat-color($primary);
&:hover {
color: mat-color($accent);
}
}
.mat-menu-item[disabled],
.mat-menu-item[disabled]:hover {
color: mat-color($foreground, text, 0.38);
.mat-icon {
color: mat-color($foreground, text, 0.38);
}
}
}
}

View File

@ -2,7 +2,12 @@
"$schema": "../../extension.schema.json",
"$name": "app",
"$version": "1.0.0",
"$references": ["plugin1.json", "dev.tools.json", "app.header.json"],
"$references": [
"plugin1.json",
"dev.tools.json",
"app.header.json",
"app.create.json"
],
"rules": [
{
@ -132,23 +137,9 @@
"features": {
"create": [
{
"id": "app.create.folder",
"order": 100,
"icon": "create_new_folder",
"title": "APP.NEW_MENU.MENU_ITEMS.CREATE_FOLDER",
"description": "APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER",
"description-disabled": "APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER_NOT_ALLOWED",
"actions": {
"click": "CREATE_FOLDER"
},
"rules": {
"enabled": "app.navigation.folder.canCreate"
}
},
{
"id": "app.create.uploadFile",
"order": 200,
"order": 100,
"icon": "file_upload",
"title": "APP.NEW_MENU.MENU_ITEMS.UPLOAD_FILE",
"description": "APP.NEW_MENU.TOOLTIPS.UPLOAD_FILES",
@ -162,7 +153,7 @@
},
{
"id": "app.create.uploadFolder",
"order": 300,
"order": 200,
"icon": "file_upload",
"title": "APP.NEW_MENU.MENU_ITEMS.UPLOAD_FOLDER",
"description": "APP.NEW_MENU.TOOLTIPS.UPLOAD_FOLDERS",
@ -173,6 +164,35 @@
"rules": {
"enabled": "app.navigation.folder.canUpload"
}
},
{
"id": "app.create.separator.1",
"type": "separator",
"order": 300
},
{
"id": "app.create.folder",
"order": 400,
"icon": "create_new_folder",
"title": "APP.NEW_MENU.MENU_ITEMS.CREATE_FOLDER",
"description": "APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER",
"description-disabled": "APP.NEW_MENU.TOOLTIPS.CREATE_FOLDER_NOT_ALLOWED",
"actions": {
"click": "CREATE_FOLDER"
},
"rules": {
"enabled": "app.navigation.folder.canCreate"
}
},
{
"id": "app.create.library",
"order": 600,
"title": "APP.NEW_MENU.MENU_ITEMS.CREATE_LIBRARY",
"description": "APP.NEW_MENU.TOOLTIPS.CREATE_LIBRARY",
"icon": "create_new_folder",
"actions": {
"click": "CREATE_LIBRARY"
}
}
],
"navbar": [
@ -296,18 +316,6 @@
"visible": "app.trashcan.hasSelection"
}
},
{
"id": "app.toolbar.createLibrary",
"order": 600,
"title": "Create Library",
"icon": "create_new_folder",
"actions": {
"click": "CREATE_LIBRARY"
},
"rules": {
"visible": "app.navigation.isLibraries"
}
},
{
"id": "app.toolbar.info",
"type": "custom",

View File

@ -22,7 +22,8 @@
"MENU_ITEMS": {
"CREATE_FOLDER": "Create folder",
"UPLOAD_FILE": "Upload file",
"UPLOAD_FOLDER": "Upload folder"
"UPLOAD_FOLDER": "Upload folder",
"CREATE_LIBRARY": "Create Library"
},
"TOOLTIPS": {
"CREATE_FOLDER": "Create new folder",
@ -30,7 +31,8 @@
"UPLOAD_FILES": "Select files to upload",
"UPLOAD_FILES_NOT_ALLOWED": "Files cannot be uploaded whilst viewing the current items",
"UPLOAD_FOLDERS": "Select folders to upload",
"UPLOAD_FOLDERS_NOT_ALLOWED": "Folders cannot be uploaded whilst viewing the current items"
"UPLOAD_FOLDERS_NOT_ALLOWED": "Folders cannot be uploaded whilst viewing the current items",
"CREATE_LIBRARY": "Create a new File Library"
}
},
"BROWSE": {

View File

@ -0,0 +1,50 @@
{
"$schema": "../../../extension.schema.json",
"$name": "app.create",
"$version": "1.0.0",
"features": {
"create": [
{
"id": "app.test.create1",
"order": 10,
"icon": "extension",
"title": "Custom Create",
"type": "menu",
"children": [
{
"id": "level1.1",
"icon": "extension",
"title": "Level 1.1"
},
{
"id": "level1.separator",
"type": "separator"
},
{
"id": "level1.2",
"icon": "extension",
"title": "Level 1.2",
"type": "menu",
"children": [
{
"id": "level2.1",
"icon": "extension",
"title": "Level 2.1"
}
],
"rules": {
"enabled": "app.navigation.folder.canCreate"
}
}
]
},
{
"id": "app.create.separator",
"order": 20,
"type": "separator"
}
]
}
}

View File

@ -3,9 +3,10 @@
@import '~@alfresco/adf-core/prebuilt-themes/adf-blue-orange.css';
@import 'app/ui/application';
body, html {
body,
html {
height: 100%;
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
font-family: 'Muli', 'Helvetica', 'Arial', sans-serif !important;
}
body {