split toolbar components (#635)

* split create menu into separate component

* toolbar menu item component

* toolbar menu component

* component updates

* unified property name

* code and style improvements

* login module (lazy)

src/app/app.module.ts

@@ -40,7 +40,6 @@ import { AppComponent } from './app.component';
 import { APP_ROUTES } from './app.routes';
 
 import { GenericErrorComponent } from './components/generic-error/generic-error.component';
-import { LoginComponent } from './components/login/login.component';
 import { FilesComponent } from './components/files/files.component';
 import { FavoritesComponent } from './components/favorites/favorites.component';
 import { LibrariesComponent } from './components/libraries/libraries.component';
@@ -52,7 +51,6 @@ import { SidenavViewsManagerDirective } from './components/layout/sidenav-views-
 import { CurrentUserComponent } from './components/current-user/current-user.component';
 import { SearchInputComponent } from './components/search/search-input/search-input.component';
 import { SearchInputControlComponent } from './components/search/search-input-control/search-input-control.component';
-import { SidenavComponent } from './components/sidenav/sidenav.component';
 import { LocationLinkComponent } from './components/location-link/location-link.component';
 import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
 import { NodeVersionsDialogComponent } from './dialogs/node-versions/node-versions.dialog';
@@ -78,6 +76,8 @@ import { DirectivesModule } from './directives/directives.module';
 import { ContextMenuModule } from './components/context-menu/context-menu.module';
 import { ExtensionsModule } from '@alfresco/adf-extensions';
 import { AppToolbarModule } from './components/toolbar/toolbar.module';
+import { AppCreateMenuModule } from './components/create-menu/create-menu.module';
+import { AppSidenavModule } from './components/sidenav/sidenav.module';
 
 @NgModule({
   imports: [
@@ -100,18 +100,18 @@ import { AppToolbarModule } from './components/toolbar/toolbar.module';
     DirectivesModule,
     ContextMenuModule.forRoot(),
     AppInfoDrawerModule,
-    AppToolbarModule
+    AppToolbarModule,
+    AppSidenavModule,
+    AppCreateMenuModule
   ],
   declarations: [
     AppComponent,
     GenericErrorComponent,
-    LoginComponent,
     LayoutComponent,
     SidenavViewsManagerDirective,
     CurrentUserComponent,
     SearchInputComponent,
     SearchInputControlComponent,
-    SidenavComponent,
     FilesComponent,
     FavoritesComponent,
     LibrariesComponent,

src/app/app.routes.ts

@@ -36,7 +36,6 @@ import { RecentFilesComponent } from './components/recent-files/recent-files.com
 import { SharedFilesComponent } from './components/shared-files/shared-files.component';
 import { TrashcanComponent } from './components/trashcan/trashcan.component';
 
-import { LoginComponent } from './components/login/login.component';
 import { GenericErrorComponent } from './components/generic-error/generic-error.component';
 import { SearchResultsComponent } from './components/search/search-results/search-results.component';
 
@@ -45,7 +44,7 @@ import { ProfileResolver } from './services/profile.resolver';
 export const APP_ROUTES: Routes = [
   {
     path: 'login',
-    component: LoginComponent,
+    loadChildren: 'src/app/components/login/login.module#AppLoginModule',
     data: {
       title: 'APP.SIGN_IN'
     }

src/app/components/context-menu/context-menu.component.ts

@@ -43,7 +43,7 @@ import { appSelection } from '../../store/selectors/app.selectors';
 import { Store } from '@ngrx/store';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { SelectionState, ContentActionRef } from '@alfresco/adf-extensions';
+import { ContentActionRef } from '@alfresco/adf-extensions';
 
 import { ContextMenuOverlayRef } from './context-menu-overlay';
 import { contextMenuAnimation } from './animations';
@@ -65,7 +65,6 @@ import { ContextMenuItemDirective } from './context-menu-item.directive';
 })
 export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit {
   private onDestroy$: Subject<boolean> = new Subject<boolean>();
-  private selection: SelectionState;
   private _keyManager: FocusKeyManager<ContextMenuItemDirective>;
   actions: Array<ContentActionRef> = [];
 
@@ -114,11 +113,7 @@ export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   runAction(actionId: string) {
-    const context = {
+    this.extensions.runActionById(actionId);
-      selection: this.selection
-    };
-
-    this.extensions.runActionById(actionId, context);
     this.contextMenuOverlayRef.close();
   }
 
@@ -133,7 +128,6 @@ export class ContextMenuComponent implements OnInit, OnDestroy, AfterViewInit {
       .pipe(takeUntil(this.onDestroy$))
       .subscribe(selection => {
         if (selection.count) {
-          this.selection = selection;
           this.actions = this.extensions.getAllowedContextMenuActions();
         }
       });

src/app/components/create-menu/create-menu.component.html

@@ -0,0 +1,14 @@
+<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>

src/app/components/create-menu/create-menu.component.scss

@@ -0,0 +1,3 @@
+.app-create-menu {
+  width: 100%;
+}

src/app/components/create-menu/create-menu.component.ts

@@ -0,0 +1,77 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  ViewEncapsulation
+} from '@angular/core';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { AppStore } from '../../store/states';
+import { AppExtensionService } from '../../extensions/extension.service';
+import { Store } from '@ngrx/store';
+import { currentFolder } from '../../store/selectors/app.selectors';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'app-create-menu',
+  templateUrl: 'create-menu.component.html',
+  styleUrls: ['./create-menu.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-create-menu' }
+})
+export class CreateMenuComponent implements OnInit, OnDestroy {
+  createActions: Array<ContentActionRef> = [];
+  onDestroy$: Subject<boolean> = new Subject<boolean>();
+
+  @Input()
+  showLabel: boolean;
+
+  constructor(
+    private store: Store<AppStore>,
+    private extensions: AppExtensionService
+  ) {}
+
+  ngOnInit() {
+    this.store
+      .select(currentFolder)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe(() => {
+        this.createActions = this.extensions.getCreateActions();
+      });
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
+
+  trackById(index: number, obj: { id: string }) {
+    return obj.id;
+  }
+}

src/app/components/create-menu/create-menu.module.ts

@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CreateMenuComponent } from './create-menu.component';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { AppToolbarModule } from '../toolbar/toolbar.module';
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), AppToolbarModule],
+  declarations: [CreateMenuComponent],
+  exports: [CreateMenuComponent]
+})
+export class AppCreateMenuModule {}

src/app/components/favorites/favorites.component.html

@@ -7,7 +7,7 @@
             <app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
 
             <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
-                <aca-toolbar-action [entry]="entry"></aca-toolbar-action>
+                <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
             </ng-container>
         </adf-toolbar>
     </div>

src/app/components/files/files.component.html

@@ -9,7 +9,7 @@
         <adf-toolbar class="inline">
             <app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
             <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
-                <aca-toolbar-action [entry]="entry"></aca-toolbar-action>
+                <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
             </ng-container>
         </adf-toolbar>
     </div>

src/app/components/libraries/libraries.component.html

@@ -8,7 +8,7 @@
 
             <ng-container *ifExperimental="'extensions'">
                 <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
-                    <aca-toolbar-action [entry]="entry"></aca-toolbar-action>
+                    <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
                 </ng-container>
             </ng-container>
         </adf-toolbar>

src/app/components/login/login.module.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { LoginComponent } from './login.component';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoginComponent
+  }
+];
+
+@NgModule({
+  imports: [CommonModule, CoreModule.forChild(), RouterModule.forChild(routes)],
+  declarations: [LoginComponent]
+})
+export class AppLoginModule {}

src/app/components/preview/preview.component.html

@@ -18,13 +18,13 @@
 
         <adf-viewer-open-with *ifExperimental="'extensions'">
             <ng-container *ngFor="let action of openWith; trackBy: trackByActionId">
-                <aca-toolbar-action type="menu-item" [entry]="action"></aca-toolbar-action>
+                <aca-toolbar-action type="menu-item" [actionRef]="action"></aca-toolbar-action>
             </ng-container>
         </adf-viewer-open-with>
 
         <adf-viewer-more-actions>
             <ng-container *ngFor="let action of viewerToolbarActions; trackBy: trackByActionId">
-                <aca-toolbar-action type="menu-item" [entry]="action"></aca-toolbar-action>
+                <aca-toolbar-action type="menu-item" [actionRef]="action"></aca-toolbar-action>
             </ng-container>
         </adf-viewer-more-actions>
 

src/app/components/recent-files/recent-files.component.html

@@ -7,7 +7,7 @@
             <app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
 
             <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
-                <aca-toolbar-action [entry]="entry"></aca-toolbar-action>
+                <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
             </ng-container>
         </adf-toolbar>
     </div>

src/app/components/search/search-results/search-results.component.html

@@ -4,7 +4,7 @@
         </adf-breadcrumb>
         <adf-toolbar class="inline">
             <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
-                <aca-toolbar-action [entry]="entry"></aca-toolbar-action>
+                <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
             </ng-container>
         </adf-toolbar>
     </div>

src/app/components/shared-files/shared-files.component.html

@@ -7,7 +7,7 @@
             <app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
 
             <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
-                <aca-toolbar-action [entry]="entry"></aca-toolbar-action>
+                <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
             </ng-container>
         </adf-toolbar>
     </div>

src/app/components/sidenav/sidenav.component.html

@@ -1,21 +1,6 @@
 <div class="sidenav">
     <div class="sidenav__section sidenav__section sidenav_action-menu">
-        <adf-sidebar-action-menu
+      <app-create-menu [showLabel]="showLabel"></app-create-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-button
-                        type="menu-item"
-                        [actionRef]="action"></app-toolbar-button>
-                </ng-container>
-            </div>
-        </adf-sidebar-action-menu>
     </div>
 
     <div *ngFor="let group of groups; trackBy: trackById"

src/app/components/sidenav/sidenav.component.ts

@@ -23,47 +23,27 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Subject } from 'rxjs';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { Component, Input, OnInit, OnDestroy } from '@angular/core';
 import { AppExtensionService } from '../../extensions/extension.service';
-import { Store } from '@ngrx/store';
+import { NavBarGroupRef } from '@alfresco/adf-extensions';
-import { AppStore } from '../../store/states';
-import { currentFolder } from '../../store/selectors/app.selectors';
-import { takeUntil } from 'rxjs/operators';
-import { ContentActionRef, NavBarGroupRef } from '@alfresco/adf-extensions';
 
 @Component({
   selector: 'app-sidenav',
   templateUrl: './sidenav.component.html',
-  styleUrls: ['./sidenav.component.scss']
+  styleUrls: ['./sidenav.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-sidenav' }
 })
-export class SidenavComponent implements OnInit, OnDestroy {
+export class SidenavComponent implements OnInit {
   @Input()
   showLabel: boolean;
 
   groups: Array<NavBarGroupRef> = [];
-  createActions: Array<ContentActionRef> = [];
-  onDestroy$: Subject<boolean> = new Subject<boolean>();
 
-  constructor(
+  constructor(private extensions: AppExtensionService) {}
-    private store: Store<AppStore>,
-    private extensions: AppExtensionService
-  ) {}
 
   ngOnInit() {
     this.groups = this.extensions.getNavigationGroups();
-
-    this.store
-      .select(currentFolder)
-      .pipe(takeUntil(this.onDestroy$))
-      .subscribe(() => {
-        this.createActions = this.extensions.getCreateActions();
-      });
-  }
-
-  ngOnDestroy() {
-    this.onDestroy$.next(true);
-    this.onDestroy$.complete();
   }
 
   trackById(index: number, obj: { id: string }) {

src/app/components/sidenav/sidenav.module.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { NgModule } from '@angular/core';
+import { AppCreateMenuModule } from '../create-menu/create-menu.module';
+import { CommonModule } from '@angular/common';
+import { SidenavComponent } from './sidenav.component';
+import { CoreModule } from '@alfresco/adf-core';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule.forChild(),
+    RouterModule,
+    AppCreateMenuModule
+  ],
+  declarations: [SidenavComponent],
+  exports: [SidenavComponent]
+})
+export class AppSidenavModule {}

src/app/components/toolbar/document-display-mode/document-display-mode.component.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../../store/states';
@@ -40,7 +40,9 @@ import { ToggleDocumentDisplayMode } from '../../../store/actions';
       <mat-icon *ngIf="(displayMode$ | async) === 'list'">view_comfy</mat-icon>
       <mat-icon *ngIf="(displayMode$ | async) === 'gallery'">list</mat-icon>
     </button>
-  `
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-document-display-mode' }
 })
 export class DocumentDisplayModeComponent {
   displayMode$: Observable<string>;

src/app/components/toolbar/toggle-favorite/toggle-favorite.component.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../../store/states';
 import { appSelection } from '../../../store/selectors/app.selectors';
@@ -43,7 +43,9 @@ import { ContentManagementService } from '../../../services/content-management.s
         <mat-icon *ngIf="!favorites.hasFavorites()">star_border</mat-icon>
         <span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
     </button>
-    `
+    `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toggle-favorite' }
 })
 export class ToggleFavoriteComponent {
   selection$: Observable<SelectionState>;

src/app/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../../store/states';
@@ -40,7 +40,9 @@ import { ToggleInfoDrawerAction } from '../../../store/actions';
             (click)="onClick()">
             <mat-icon>info_outline</mat-icon>
         </button>
-    `
+    `,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toggle-info-drawer' }
 })
 export class ToggleInfoDrawerComponent {
   infoDrawerOpened$: Observable<boolean>;

src/app/components/toolbar/toolbar-action/toolbar-action.component.html

@@ -1,43 +1,20 @@
-<ng-container [ngSwitch]="entry.type">
+<ng-container [ngSwitch]="actionRef.type">
     <ng-container *ngSwitchCase="'default'">
-        <app-toolbar-button [type]="type" [actionRef]="entry"></app-toolbar-button>
+        <app-toolbar-button [type]="type" [actionRef]="actionRef"></app-toolbar-button>
     </ng-container>
 
     <ng-container *ngSwitchCase="'button'">
-        <app-toolbar-button [type]="type" [actionRef]="entry"></app-toolbar-button>
+        <app-toolbar-button [type]="type" [actionRef]="actionRef"></app-toolbar-button>
     </ng-container>
 
-    <adf-toolbar-divider *ngSwitchCase="'separator'"
+    <adf-toolbar-divider *ngSwitchCase="'separator'" [id]="actionRef.id"></adf-toolbar-divider>
-        [id]="entry.id">
-    </adf-toolbar-divider>
 
     <ng-container *ngSwitchCase="'menu'">
-        <button
+      <app-toolbar-menu [actionRef]="actionRef"></app-toolbar-menu>
-            [id]="entry.id"
-            color="primary"
-            mat-icon-button
-            [attr.title]="(entry.description || entry.title) | translate"
-            [matMenuTriggerFor]="menu">
-            <mat-icon>{{ entry.icon }}</mat-icon>
-        </button>
-
-        <mat-menu #menu="matMenu"
-            [overlapTrigger]="false">
-            <ng-container *ngFor="let child of entry.children; trackBy: trackByActionId">
-                <ng-container [ngSwitch]="child.type">
-                    <ng-container *ngSwitchCase="'custom'">
-                        <adf-dynamic-component [id]="child.component"></adf-dynamic-component>
-                    </ng-container>
-                    <ng-container *ngSwitchDefault>
-                        <app-toolbar-button type="menu-item" [actionRef]="child"></app-toolbar-button>
-                    </ng-container>
-                </ng-container>
-            </ng-container>
-        </mat-menu>
     </ng-container>
 
     <ng-container *ngSwitchCase="'custom'">
-        <adf-dynamic-component [id]="entry.component"></adf-dynamic-component>
+        <adf-dynamic-component [id]="actionRef.component"></adf-dynamic-component>
     </ng-container>
 </ng-container>
 

src/app/components/toolbar/toolbar-action/toolbar-action.component.ts

@@ -29,10 +29,7 @@ import {
   ChangeDetectionStrategy,
   Input
 } from '@angular/core';
-import { AppStore } from '../../../store/states';
-import { Store } from '@ngrx/store';
 import { ContentActionRef } from '@alfresco/adf-extensions';
-import { AppExtensionService } from '../../../extensions/extension.service';
 
 @Component({
   selector: 'aca-toolbar-action',
@@ -44,15 +41,7 @@ import { AppExtensionService } from '../../../extensions/extension.service';
 export class ToolbarActionComponent {
   @Input()
   type = 'icon-button';
+
   @Input()
-  entry: ContentActionRef;
+  actionRef: ContentActionRef;
-
-  constructor(
-    protected store: Store<AppStore>,
-    protected extensions: AppExtensionService
-  ) {}
-
-  trackByActionId(index: number, action: ContentActionRef) {
-    return action.id;
-  }
 }

src/app/components/toolbar/toolbar-button/toolbar-button.component.html

@@ -10,19 +10,6 @@
         </button>
     </ng-container>
     <ng-container *ngSwitchCase="'menu-item'">
-        <button
+      <app-toolbar-menu-item [actionRef]="actionRef"></app-toolbar-menu-item>
-            [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>

src/app/components/toolbar/toolbar-button/toolbar-button.component.ts

@@ -23,12 +23,8 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { ContentActionRef } from '@alfresco/adf-extensions';
-import { Store } from '@ngrx/store';
-import { AppStore } from '../../../store/states';
-import { appSelection } from '../../../store/selectors/app.selectors';
-import { take } from 'rxjs/operators';
 import { AppExtensionService } from '../../../extensions/extension.service';
 
 export enum ToolbarButtonType {
@@ -38,27 +34,29 @@ export enum ToolbarButtonType {
 
 @Component({
   selector: 'app-toolbar-button',
-  templateUrl: 'toolbar-button.component.html'
+  templateUrl: 'toolbar-button.component.html',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toolbar-button' }
 })
 export class ToolbarButtonComponent {
   @Input()
   type: ToolbarButtonType = ToolbarButtonType.ICON_BUTTON;
+
   @Input()
   actionRef: ContentActionRef;
 
-  constructor(
+  constructor(private extensions: AppExtensionService) {}
-    protected store: Store<AppStore>,
-    private extensions: AppExtensionService
-  ) {}
 
   runAction() {
-    this.store
+    if (this.hasClickAction(this.actionRef)) {
-      .select(appSelection)
+      this.extensions.runActionById(this.actionRef.actions.click);
-      .pipe(take(1))
+    }
-      .subscribe(selection => {
+  }
-        this.extensions.runActionById(this.actionRef.actions.click, {
+
-          selection
+  private hasClickAction(actionRef: ContentActionRef): boolean {
-        });
+    if (actionRef && actionRef.actions && actionRef.actions.click) {
-      });
+      return true;
+    }
+    return false;
   }
 }

src/app/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.html

@@ -0,0 +1,14 @@
+<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>

src/app/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.ts

@@ -0,0 +1,54 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { AppExtensionService } from '../../../extensions/extension.service';
+
+@Component({
+  selector: 'app-toolbar-menu-item',
+  templateUrl: 'toolbar-menu-item.component.html',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toolbar-menu-item' }
+})
+export class ToolbarMenuItemComponent {
+  @Input()
+  actionRef: ContentActionRef;
+
+  constructor(private extensions: AppExtensionService) {}
+
+  runAction() {
+    if (this.hasClickAction(this.actionRef)) {
+      this.extensions.runActionById(this.actionRef.actions.click);
+    }
+  }
+
+  private hasClickAction(actionRef: ContentActionRef): boolean {
+    if (actionRef && actionRef.actions && actionRef.actions.click) {
+      return true;
+    }
+    return false;
+  }
+}

src/app/components/toolbar/toolbar-menu/toolbar-menu.component.html

@@ -0,0 +1,21 @@
+<button
+  [id]="actionRef.id"
+  color="primary"
+  mat-icon-button
+  [attr.title]="(actionRef.description || actionRef.title) | translate"
+  [matMenuTriggerFor]="menu">
+  <mat-icon>{{ actionRef.icon }}</mat-icon>
+</button>
+
+<mat-menu #menu="matMenu" [overlapTrigger]="false">
+  <ng-container *ngFor="let child of actionRef.children; trackBy: trackById">
+    <ng-container [ngSwitch]="child.type">
+      <ng-container *ngSwitchCase="'custom'">
+        <adf-dynamic-component [id]="child.component"></adf-dynamic-component>
+      </ng-container>
+      <ng-container *ngSwitchDefault>
+        <app-toolbar-menu-item [actionRef]="child"></app-toolbar-menu-item>
+      </ng-container>
+    </ng-container>
+  </ng-container>
+</mat-menu>

src/app/components/toolbar/toolbar-menu/toolbar-menu.component.ts

@@ -0,0 +1,50 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+
+@Component({
+  selector: 'app-toolbar-menu',
+  templateUrl: 'toolbar-menu.component.html',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'app-toolbar-menu' }
+})
+export class ToolbarMenuComponent {
+  @Input()
+  actionRef: ContentActionRef;
+
+  get hasChildren(): boolean {
+    return (
+      this.actionRef &&
+      this.actionRef.children &&
+      this.actionRef.children.length > 0
+    );
+  }
+
+  trackById(index: number, obj: { id: string }) {
+    return obj.id;
+  }
+}

src/app/components/toolbar/toolbar.module.ts

@@ -32,6 +32,8 @@ import { CoreModule } from '@alfresco/adf-core';
 import { ToolbarButtonComponent } from './toolbar-button/toolbar-button.component';
 import { ToolbarActionComponent } from './toolbar-action/toolbar-action.component';
 import { ExtensionsModule } from '@alfresco/adf-extensions';
+import { ToolbarMenuItemComponent } from './toolbar-menu-item/toolbar-menu-item.component';
+import { ToolbarMenuComponent } from './toolbar-menu/toolbar-menu.component';
 
 export function components() {
   return [
@@ -39,7 +41,9 @@ export function components() {
     ToggleFavoriteComponent,
     ToggleInfoDrawerComponent,
     ToolbarButtonComponent,
-    ToolbarActionComponent
+    ToolbarActionComponent,
+    ToolbarMenuItemComponent,
+    ToolbarMenuComponent
   ];
 }
 

src/app/components/trashcan/trashcan.component.html

@@ -7,7 +7,7 @@
             <app-document-display-mode *ifExperimental="'cardview'"></app-document-display-mode>
 
             <ng-container *ngFor="let entry of actions; trackBy: trackByActionId">
-                <aca-toolbar-action [entry]="entry"></aca-toolbar-action>
+                <aca-toolbar-action [actionRef]="entry"></aca-toolbar-action>
             </ng-container>
         </adf-toolbar>
     </div>

src/app/extensions/extension.service.ts

@@ -244,10 +244,13 @@ export class AppExtensionService implements RuleContext {
     return true;
   }
 
-  runActionById(id: string, context?: any) {
+  runActionById(id: string) {
     const action = this.extensions.getActionById(id);
     if (action) {
       const { type, payload } = action;
+      const context = {
+        selection: this.selection
+      };
       const expression = this.extensions.runExpression(payload, context);
 
       this.store.dispatch({ type, payload: expression });