From f7cfccc7d98bf958a25ba4aa7a5b5615a7b2cfab Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 23 Feb 2018 15:48:17 +0000
Subject: [PATCH] [ADF-2352] project toolbar buttons for the Viewer (#2989)

* project toolbar buttons for the Viewer

* test fixes
---
 .../file-view/file-view.component.html        |  13 ++++++++
 .../images/viewer-toolbar-actions.png         | Bin 0 -> 13436 bytes
 docs/viewer.component.md                      |  25 ++++++++++++++++
 .../viewer-toolbar-actions.component.ts       |  28 ++++++++++++++++++
 .../viewer/components/viewer.component.html   |   2 ++
 .../components/viewer.component.spec.ts       |  27 ++++++++++++++++-
 lib/core/viewer/public-api.ts                 |   1 +
 lib/core/viewer/viewer.module.ts              |   9 ++++--
 8 files changed, 101 insertions(+), 4 deletions(-)
 create mode 100644 docs/docassets/images/viewer-toolbar-actions.png
 create mode 100644 lib/core/viewer/components/viewer-toolbar-actions.component.ts

diff --git a/demo-shell/src/app/components/file-view/file-view.component.html b/demo-shell/src/app/components/file-view/file-view.component.html
index f7afcaf3b2..398f8fe312 100644
--- a/demo-shell/src/app/components/file-view/file-view.component.html
+++ b/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">
diff --git a/docs/docassets/images/viewer-toolbar-actions.png b/docs/docassets/images/viewer-toolbar-actions.png
new file mode 100644
index 0000000000000000000000000000000000000000..d569f1f95f0d47d0aa55b75afefdf15c8bebfd40
GIT binary patch
literal 13436
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

literal 0
HcmV?d00001

diff --git a/docs/viewer.component.md b/docs/viewer.component.md
index 078bef9b41..3c0126e1cf 100644
--- a/docs/viewer.component.md
+++ b/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.
diff --git a/lib/core/viewer/components/viewer-toolbar-actions.component.ts b/lib/core/viewer/components/viewer-toolbar-actions.component.ts
new file mode 100644
index 0000000000..1a44788e5a
--- /dev/null
+++ b/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 {
+}
diff --git a/lib/core/viewer/components/viewer.component.html b/lib/core/viewer/components/viewer.component.html
index 133554f1da..ac82762b10 100644
--- a/lib/core/viewer/components/viewer.component.html
+++ b/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
diff --git a/lib/core/viewer/components/viewer.component.spec.ts b/lib/core/viewer/components/viewer.component.spec.ts
index 2eee5dfe2f..b9554fb27d 100644
--- a/lib/core/viewer/components/viewer.component.spec.ts
+++ b/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;
diff --git a/lib/core/viewer/public-api.ts b/lib/core/viewer/public-api.ts
index ab87387f01..42bf483599 100644
--- a/lib/core/viewer/public-api.ts
+++ b/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';
diff --git a/lib/core/viewer/viewer.module.ts b/lib/core/viewer/viewer.module.ts
index 342cbbef74..6a14d9cdc0 100644
--- a/lib/core/viewer/viewer.module.ts
+++ b/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 {