fix center loading and add name

ng2-components/ng2-alfresco-viewer/src/pdfViewer.component.css

@@ -2,9 +2,29 @@
     background: #3E3E3E;
 }
 
-.viewer-loader-text {
+.loader-container {
+    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+    display: -webkit-flex;     /* NEW - Chrome */
+    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
+    -webkit-box-flex-direction: row;
+    -moz-box-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+    height:100%;
+}
+
+.loader-item {
+    margin: auto;
+    max-height:100px;
+    max-width:300px;
+}
+
+.loader-text{
+    white-space: nowrap;
     text-align: center;
-    color: #000;
+    position: relative;
+    color : #fff;
 }
 
 :host .page {

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

@@ -1,11 +1,11 @@
 <!-- Start Pdf Canvas -->
 <div id="viewer-pdf-container" class="center-element viewer-pdf-container" (keypress)=eventHandler()>
     <div id="viewer-viewerPdf" class="center-element" >
-        <div id="viewer-loader" class="center-element" >
-            <div>
+        <div id="loader-container" class="loader-container">
+            <div class="loader-item">
                 <div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
-            </div>
-            <div id="viewer-loader-text" class="viewer-loader-text">Loading...</div>
+                <div id="loader-text" class="loader-text">Loading <span>{{nameFile}}</span> ...</div>
+            </div >
         </div>
     </div>
 </div>

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

@@ -31,6 +31,9 @@ export class PdfViewerComponent {
     @Input()
     urlFile: string;
 
+    @Input()
+    nameFile: string;
+
     currentPdfDocument: any;
     page: number;
     displayPage: number;

ng2-components/ng2-alfresco-viewer/src/viewer.component.css

@@ -19,7 +19,7 @@
 }
 
 .viewer-name-file {
-    width: 20%;
+    width: 50%;
     height: 21px;
     overflow: hidden !important;
     text-overflow: ellipsis;

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

@@ -20,20 +20,18 @@
                     <!-- Start Navigation -->
                     <nav class="mdl-navigation">
                         <div id="viewer-toolbar-view-options">
-                            <div class="button-container">
                             <button
                                 class="mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" (click)="close()">
                                 <i id="viewer-close-button" class="icon material-icons">close</i>
                             </button>
                         </div>
-                        </div>
                     </nav>
                     <!-- End Navigation -->
                 </div>
             </header>
-            <div class="mdl-layout__drawer">
-                <span class="mdl-layout-title">Thumbnail</span>
-            </div>
+            <!--<div class="mdl-layout__drawer">-->
+                <!--<span class="mdl-layout-title">Thumbnail</span>-->
+            <!--</div>-->
             <main id="page-content" class="mdl-layout__content">
 
                 <div class="mdl-grid">
@@ -50,7 +48,7 @@
                         <div id="viewer-content-container" class="viewer-content-container mdl-cell" >
                         <!-- Start View Switch-->
                             <div *ngIf="isPdf()">
-                                <pdf-viewer [urlFile]="urlFile" ></pdf-viewer>
+                                <pdf-viewer [urlFile]="urlFile" [nameFile]="displayName" ></pdf-viewer>
                             </div>
                             <div *ngIf="isImage()" ><img src="{{urlFile}}"  id="viewer-image" class="center-element viewer-image"/></div>
                             <div *ngIf="!supportedExtension()">