[ACA-2180] Viewer toolbar - rearrange actions layout (#962)

* merge action in toolbar submenu

* viewer add info drawer action

* toggle infoDrawer extension action

* hide viewer toolbar info drawer action

* fix typo

* allow to  unsubscribe from infoDrawerOpened event

projects/adf-office-services-ext/assets/aos.plugin.json

@@ -51,10 +51,13 @@
       }
     ],
     "viewer": {
-      "openWith": [
+      "toolbarActions": [
+        {
+            "id": "app.viewer.toolbar.more",
+            "children": [
               {
                 "id": "aos.viewer.openWith.office",
-          "type": "button",
+                "order": 1,
                 "icon": "adf:application/msword",
                 "title": "Microsoft Office™",
                 "actions": {
@@ -66,5 +69,7 @@
             }
           ]
         }
+      ]
+    }
   }
 }

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

@@ -2,8 +2,9 @@
   <adf-viewer
     [nodeId]="nodeId"
     [allowNavigate]="navigateMultiple"
-    [allowRightSidebar]="hasRightSidebar"
+    [allowRightSidebar]="showRightSide"
     [allowPrint]="false"
+    [showRightSidebar]="showRightSide"
     [allowDownload]="false"
     [allowFullScreen]="false"
     [canNavigateBefore]="previousNodeId"
@@ -12,9 +13,9 @@
     (showViewerChange)="onVisibilityChanged($event)"
     (navigateBefore)="onNavigateBefore()"
     (navigateNext)="onNavigateNext()"
-    [ngClass]="hasRightSidebar ? 'hide-last-divider' : ''"
+    [ngClass]="showRightSide ? 'hide-last-divider' : ''"
   >
-    <adf-viewer-sidebar>
+    <adf-viewer-sidebar *ngIf="(infoDrawerOpened$ | async)">
       <aca-info-drawer [node]="selection.file"></aca-info-drawer>
     </adf-viewer-sidebar>
 

src/app/components/preview/preview.component.scss

@@ -16,3 +16,8 @@
     display: inline;
   }
 }
+
+// todo: remove this when viewer supports extensions
+.adf-viewer-toolbar .mat-toolbar > button:last-child {
+  display: none;
+}

src/app/components/preview/preview.component.ts

@@ -38,7 +38,7 @@ import {
   UrlSegment,
   PRIMARY_OUTLET
 } from '@angular/router';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 import {
   UserPreferencesService,
   ObjectUtils,
@@ -55,6 +55,7 @@ import { ContentManagementService } from '../../services/content-management.serv
 import { ContentActionRef, ViewerExtensionRef } from '@alfresco/adf-extensions';
 import { SearchRequest } from '@alfresco/js-api';
 import { AppDataService } from '../../services/data.service';
+import { from } from 'rxjs';
 
 @Component({
   selector: 'app-preview',
@@ -82,7 +83,7 @@ export class PreviewComponent extends PageComponent
   navigateMultiple = false;
   openWith: Array<ContentActionRef> = [];
   contentExtensions: Array<ViewerExtensionRef> = [];
-  hasRightSidebar = true;
+  showRightSide = false;
 
   constructor(
     private contentApi: ContentApiService,
@@ -102,6 +103,12 @@ export class PreviewComponent extends PageComponent
   ngOnInit() {
     super.ngOnInit();
 
+    from(this.infoDrawerOpened$)
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe(val => {
+        this.showRightSide = val;
+      });
+
     this.previewLocation = this.router.url
       .substr(0, this.router.url.indexOf('/', 1))
       .replace(/\//g, '');

src/assets/app.extensions.json

@@ -1016,6 +1016,15 @@
             "visible": "app.toolbar.canViewFile"
           }
         },
+        {
+          "id": "app.viewer.infoDrawer",
+          "type": "custom",
+          "order": 500,
+          "component": "app.toolbar.toggleInfoDrawer",
+          "rules": {
+            "visible": "app.toolbar.info"
+          }
+        },
         {
           "id": "app.viewer.toolbar.more",
           "type": "menu",