[ADF-2352] project toolbar buttons for the Viewer (#2989)

* project toolbar buttons for the Viewer

* test fixes

demo-shell/src/app/components/file-view/file-view.component.html

@@ -18,6 +18,19 @@
     </ng-template>
 
     <adf-viewer [fileNodeId]="nodeId" [allowSidebar]="true" [sidebarTemplate]="sidebarTemplate">
+
+        <adf-viewer-toolbar-actions>
+            <button mat-icon-button>
+                <mat-icon>alarm</mat-icon>
+            </button>
+            <button mat-icon-button>
+                <mat-icon>backup</mat-icon>
+            </button>
+            <button mat-icon-button>
+                <mat-icon>bug_report</mat-icon>
+            </button>
+        </adf-viewer-toolbar-actions>
+
         <!--
         <adf-viewer-extension [supportedExtensions]="['json']">
             <ng-template let-urlFileContent="urlFileContent" let-extension="extension">

docs/viewer.component.md

@@ -254,6 +254,31 @@ You can replace standard viewer toolbar with your custom implementation.
 
 Everything you put inside the "adf-viewer-toolbar" tags is going to be rendered instead of the toolbar.
 
+### Custom toolbar buttons
+
+If you are okay with the custom toolbar behaviour but want to add some extra buttons,
+you can do that like in the following example:
+
+```html
+<adf-viewer>
+    <adf-viewer-toolbar-actions>
+        <button mat-icon-button>
+            <mat-icon>alarm</mat-icon>
+        </button>
+        <button mat-icon-button>
+            <mat-icon>backup</mat-icon>
+        </button>
+        <button mat-icon-button>
+            <mat-icon>bug_report</mat-icon>
+        </button>
+    </adf-viewer-toolbar-actions>
+</adf-viewer>
+```
+
+You should now see the following result at runtime:
+
+![Custom Toolbar Actions](docassets/images/viewer-toolbar-actions.png)
+
 ### Custom sidebar
 
 The Viewer component also supports custom sidebar components and layouts.

lib/core/viewer/components/viewer-toolbar-actions.component.ts

@@ -0,0 +1,28 @@
+/*!
+ * @license
+ * Copyright 2016 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 { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-viewer-toolbar-actions',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'adf-viewer-toolbar-actions' },
+    template: `<ng-content></ng-content>`
+})
+export class ViewerToolbarActionsComponent {
+}

lib/core/viewer/components/viewer.component.html

@@ -40,6 +40,8 @@
                     </button>
                 </div>
 
+                <ng-content select="adf-viewer-toolbar-actions"></ng-content>
+
                 <ng-container *ngIf="mnuOpenWith">
                     <button
                         mat-button

lib/core/viewer/components/viewer.component.spec.ts

@@ -38,6 +38,7 @@ import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
 import { ViewerOpenWithComponent } from './viewer-open-with.component';
 import { ViewerSidebarComponent } from './viewer-sidebar.component';
 import { ViewerToolbarComponent } from './viewer-toolbar.component';
+import { ViewerToolbarActionsComponent } from './viewer-toolbar-actions.component';
 import { ViewerComponent } from './viewer.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import 'rxjs/add/observable/throw';
@@ -54,6 +55,20 @@ import 'rxjs/add/observable/throw';
 })
 class ViewerWithCustomToolbarComponent {}
 
+@Component({
+    selector: 'adf-viewer-container-toolbar-actions',
+    template: `
+        <adf-viewer>
+            <adf-viewer-toolbar-actions>
+                <button mat-icon-button id="custom-button">
+                    <mat-icon>alarm</mat-icon>
+                </button>
+            </adf-viewer-toolbar-actions>
+        </adf-viewer>
+    `
+})
+class ViewerWithCustomToolbarActionsComponent {}
+
 @Component({
     selector: 'adf-viewer-container-sidebar',
     template: `
@@ -141,10 +156,12 @@ describe('ViewerComponent', () => {
                 ViewerToolbarComponent,
                 ViewerOpenWithComponent,
                 ViewerMoreActionsComponent,
+                ViewerToolbarActionsComponent,
                 ViewerWithCustomToolbarComponent,
                 ViewerWithCustomSidebarComponent,
                 ViewerWithCustomOpenWithComponent,
-                ViewerWithCustomMoreActionsComponent
+                ViewerWithCustomMoreActionsComponent,
+                ViewerWithCustomToolbarActionsComponent
             ],
             providers: [
                 {provide: RenditionsService, useValue: {
@@ -203,6 +220,14 @@ describe('ViewerComponent', () => {
             expect(customElement.querySelector('.custom-toolbar-element')).toBeDefined();
         });
 
+        it('should use custom toolbar actions', () => {
+            let customFixture = TestBed.createComponent(ViewerWithCustomToolbarActionsComponent);
+            let customElement: HTMLElement = customFixture.nativeElement;
+
+            customFixture.detectChanges();
+            expect(customElement.querySelector('#custom-button')).toBeDefined();
+        });
+
         it('should use custom info drawer', () => {
             let customFixture = TestBed.createComponent(ViewerWithCustomSidebarComponent);
             let customElement: HTMLElement = customFixture.nativeElement;

lib/core/viewer/public-api.ts

@@ -27,6 +27,7 @@ export * from './components/viewer-more-actions.component';
 export * from './components/viewer-open-with.component';
 export * from './components/viewer-sidebar.component';
 export * from './components/viewer-toolbar.component';
+export * from './components/viewer-toolbar-actions.component';
 export * from './components/viewer.component';
 
 export * from './directives/viewer-extension.directive';

lib/core/viewer/viewer.module.ts

@@ -18,6 +18,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { MaterialModule } from '../material.module';
 import { ToolbarModule } from '../toolbar/toolbar.module';
@@ -35,7 +36,7 @@ import { ViewerSidebarComponent } from './components/viewer-sidebar.component';
 import { ViewerToolbarComponent } from './components/viewer-toolbar.component';
 import { ViewerComponent } from './components/viewer.component';
 import { ViewerExtensionDirective } from './directives/viewer-extension.directive';
-import { FlexLayoutModule } from '@angular/flex-layout';
+import { ViewerToolbarActionsComponent } from './components/viewer-toolbar-actions.component';
 
 @NgModule({
     imports: [
@@ -59,7 +60,8 @@ import { FlexLayoutModule } from '@angular/flex-layout';
         ViewerToolbarComponent,
         ViewerSidebarComponent,
         ViewerOpenWithComponent,
-        ViewerMoreActionsComponent
+        ViewerMoreActionsComponent,
+        ViewerToolbarActionsComponent
     ],
     exports: [
         ViewerComponent,
@@ -74,7 +76,8 @@ import { FlexLayoutModule } from '@angular/flex-layout';
         ViewerToolbarComponent,
         ViewerSidebarComponent,
         ViewerOpenWithComponent,
-        ViewerMoreActionsComponent
+        ViewerMoreActionsComponent,
+        ViewerToolbarActionsComponent
     ]
 })
 export class ViewerModule {