info drawer integration support (#2259)

provides and toggles placeholder for the info drawer within the dialog

ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.html

@@ -61,11 +61,15 @@
         </button>
     </md-menu>
 
-    <adf-toolbar-divider></adf-toolbar-divider>
+    <ng-container *ngIf="allowInfoDrawer">
+        <adf-toolbar-divider></adf-toolbar-divider>
 
-    <button md-icon-button mdTooltip="Info">
-        <md-icon>info_outline</md-icon>
-    </button>
+        <button md-icon-button mdTooltip="Info"
+            [color]="showInfoDrawer ? 'accent' : 'default'"
+            (click)="showInfoDrawer = !showInfoDrawer">
+            <md-icon>info_outline</md-icon>
+        </button>
+    </ng-container>
 
 </adf-toolbar>
 
@@ -117,4 +121,22 @@
         </ng-container>
 
     </ng-container>
+
+    <ng-container *ngIf="showInfoDrawer">
+        <div class="adf-viewer-dialog__info-drawer">
+            <md-tab-group md-stretch-tabs>
+                <md-tab label="Details">
+                    <md-card>
+                        DETAILS
+                    </md-card>
+                </md-tab>
+                <md-tab label="Activity">
+                    <md-card>
+                        Activity
+                    </md-card>
+                </md-tab>
+            </md-tab-group>
+        </div>
+    </ng-container>
+
  </md-dialog-content>

ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.scss

@@ -8,12 +8,29 @@
 }
 
 .adf-viewer-dialog {
+
     .mat-dialog-content {
         display: flex;
         max-height: 90vh;
         justify-content: center;
     }
 
+    &__info-drawer {
+        width: 350px;
+        display: block;
+        padding: 8px 0;
+        background-color: #FAFAFA;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
+
+        .mat-tab-label {
+            text-transform: uppercase;
+        }
+
+        .mat-card {
+            margin: 6px;
+        }
+    }
+
     &-unknown-view {
         height: 90vh;
         text-align: center;
@@ -31,6 +48,7 @@
         justify-content: center;
         height: 90vh;
         img {
+            max-width: 100%;
             object-fit: contain;
         }
     }

ng2-components/ng2-alfresco-viewer/src/components/viewer-dialog.component.ts

@@ -36,6 +36,9 @@ export class ViewerDialogComponent implements OnInit {
     fileMimeType: string = null;
     downloadUrl: string = null;
 
+    allowInfoDrawer = false;
+    showInfoDrawer = false;
+
     unknownFormatIcon = 'wifi_tethering';
     unknownFormatText = 'Document preview could not be loaded.';
 
@@ -54,12 +57,15 @@ export class ViewerDialogComponent implements OnInit {
         this.fileName = settings.fileName;
         this.fileMimeType = settings.fileMimeType;
         this.downloadUrl = settings.downloadUrl;
-        // console.log(settings);
     }
 
     ngOnInit() {
         this.viewerType = this.detectViewerType(this.fileMimeType);
         this.asText = this.getAsText();
+
+        if (this.viewerType !== 'unknown') {
+            this.allowInfoDrawer = true;
+        }
     }
 
     private detectViewerType(mimeType: string) {

ng2-components/ng2-alfresco-viewer/src/material.module.ts

@@ -24,6 +24,7 @@ import {
     MdMenuModule,
     MdProgressBarModule,
     MdProgressSpinnerModule,
+    MdTabsModule,
     MdTooltipModule
 } from '@angular/material';
 
@@ -36,6 +37,7 @@ export function modules() {
         MdMenuModule,
         MdProgressBarModule,
         MdProgressSpinnerModule,
+        MdTabsModule,
         MdTooltipModule
     ];
 }