Viewer enhancements and Viewer Dialog prototype (#2200)

* viewer dialog scaffold

* toolbar divider component

* simple error screen

* material module and tooltips

* show file name in the title

* improved settings, simple image viewer

* flex-based image viewer, minor fixes

* ability to switch between viewers

* single viewer for images

* remove MDL from the Viewer component

* remove hardcoded demo shell layout

remove harcoded assumptions on "header" and "main" elements

* rework text viewer, remove MDL dependency

* upgrade 'unknown format' view, remove MDL

* simplify media viewer layout

* simplify image viewer

* clean pdf viewer

* migrate pdf viewer styles to scss

* rewrite pdf viewer host styles in scss

* fix unit tests and cleanup layout

* file viewer service

* viewer dialog supports downloads if url provided

demo-shell-ng2/app/components/files/files.component.html

@@ -29,6 +29,8 @@
                     </adf-dropdown-breadcrumb>
                 </adf-toolbar-title>
 
+                <adf-toolbar-divider></adf-toolbar-divider>
+
                 <button md-icon-button
                     (click)="onCreateFolderClicked($event)">
                     <md-icon>create_new_folder</md-icon>
@@ -56,6 +58,8 @@
                     <button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
                 </md-menu>
 
+                <adf-toolbar-divider></adf-toolbar-divider>
+
                 <button md-icon-button [mdMenuTriggerFor]="menu">
                     <md-icon>more_vert</md-icon>
                 </button>
@@ -210,6 +214,14 @@
 </div>
 
 <div class="container">
+    <section *ngIf="!useViewerDialog">
+        <md-slide-toggle [(ngModel)]="useInlineViewer">Use inline viewer (no overlay)</md-slide-toggle>
+    </section>
+
+    <section>
+        <md-slide-toggle [(ngModel)]="useViewerDialog">Use File Viewer dialog</md-slide-toggle>
+    </section>
+
     <section>
         <md-slide-toggle [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
     </section>
@@ -291,26 +303,28 @@
 
 <file-uploading-dialog #fileDialog></file-uploading-dialog>
 
-<div *ngIf="fileShowed">
-    <alfresco-viewer [(showViewer)]="fileShowed"
-                     [fileNodeId]="fileNodeId"
-                     [overlayMode]="true">
+<div *ngIf="showViewer">
+    <ng-container *ngIf="!useInlineViewer">
+        <alfresco-viewer
+            [(showViewer)]="showViewer"
+            [fileNodeId]="fileNodeId"
+            [overlayMode]="true">
 
-        <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
-            <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
-                <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
-            </ng-template>
-        </extension-viewer>
+            <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
+                <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
+                    <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
+                </ng-template>
+            </extension-viewer>
 
-    </alfresco-viewer>
-
-    <!-- Comment the viewer above and uncomment that one below if you want test the overlay false viewer-->
-
-    <!--<div *ngIf="fileShowed" class="adf-not-overlay-viewer">-->
-        <!--<alfresco-viewer [(showViewer)]="fileShowed"-->
-                         <!--[fileNodeId]="fileNodeId"-->
-                         <!--[overlayMode]="false">-->
-        <!--</alfresco-viewer>-->
-    <!--</div>-->
+        </alfresco-viewer>
+    </ng-container>
 
+    <ng-container *ngIf="useInlineViewer">
+        <div class="adf-not-overlay-viewer">
+            <alfresco-viewer
+                [(showViewer)]="showViewer"
+                [fileNodeId]="fileNodeId">
+            </alfresco-viewer>
+        </div>
+    </ng-container>
 </div>

demo-shell-ng2/app/components/files/files.component.ts

@@ -28,6 +28,8 @@ import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-docume
 import { CreateFolderDialogComponent } from '../../dialogs/create-folder.dialog';
 import { DownloadZipDialogComponent } from './../../dialogs/download-zip.dialog';
 
+import { ViewerDialogComponent, ViewerDialogSettings, ViewerService } from 'ng2-alfresco-viewer';
+
 @Component({
     selector: 'adf-files-component',
     templateUrl: './files.component.html',
@@ -39,11 +41,13 @@ export class FilesComponent implements OnInit {
 
     errorMessage: string = null;
     fileNodeId: any;
-    fileShowed: boolean = false;
+    showViewer: boolean = false;
 
     useCustomToolbar = true;
     toolbarColor = 'default';
     useDropdownBreadcrumb = false;
+    useViewerDialog = true;
+    useInlineViewer = false;
 
     selectionModes = [
         { value: 'none', viewValue: 'None' },
@@ -90,16 +94,27 @@ export class FilesComponent implements OnInit {
                 private contentService: AlfrescoContentService,
                 private dialog: MdDialog,
                 private translateService: AlfrescoTranslationService,
+                private viewerService: ViewerService,
                 private router: Router,
                 @Optional() private route: ActivatedRoute) {
     }
 
     showFile(event) {
-        if (event.value.entry.isFile) {
-            this.fileNodeId = event.value.entry.id;
-            this.fileShowed = true;
+        if (this.useViewerDialog) {
+            if (event.value.entry.isFile) {
+                this.viewerService
+                    .showViewerForNode(event.value.entry)
+                    .then(result => {
+                        console.log(result);
+                    });
+            }
         } else {
-            this.fileShowed = false;
+            if (event.value.entry.isFile) {
+                this.fileNodeId = event.value.entry.id;
+                this.showViewer = true;
+            } else {
+                this.showViewer = false;
+            }
         }
     }