From 65d55354078fb96d6ccdc0e686c066a6ece541ef Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Wed, 8 Jun 2016 02:11:23 +0100
Subject: [PATCH] #68 prettify download unsupported files

---
 demo-shell-ng2/package.json                   |  2 +-
 .../ng2-alfresco-viewer/package.json          |  2 +-
 .../src/viewer.component.css                  | 12 ++++++++++++
 .../src/viewer.component.html                 | 19 ++++++++++++++++---
 .../src/viewer.component.ts                   | 18 +++++++++++++++---
 5 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index c1e48d0b9a..c3c1c61003 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -62,7 +62,7 @@
     "ng2-alfresco-login": "^0.1.0",
     "ng2-alfresco-search": "^0.1.9",
     "ng2-alfresco-upload": "^0.1.0",
-    "ng2-alfresco-viewer": "^0.1.12",
+    "ng2-alfresco-viewer": "^0.1.13",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
     "systemjs": "0.19.26",
diff --git a/ng2-components/ng2-alfresco-viewer/package.json b/ng2-components/ng2-alfresco-viewer/package.json
index 9da5a85f5c..12faa23949 100644
--- a/ng2-components/ng2-alfresco-viewer/package.json
+++ b/ng2-components/ng2-alfresco-viewer/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ng2-alfresco-viewer",
   "description": "Alfresco documents viewer",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "author": "Eugenio Romano",
   "scripts": {
     "typings": "typings install",
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css
index 0cf1352668..9af5b300c4 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css
@@ -62,3 +62,15 @@
     align-items: center;
     justify-content: center;
 }
+
+.viewer-margin {
+    margin: auto !important;
+}
+
+.viewer-download-text  {
+    text-align: center;
+}
+
+.viewer-margin-cloud-download{
+    margin-right: 20px;
+}
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html
index 004a0ca557..4e048c0b1b 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.html
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html
@@ -54,7 +54,7 @@
 
                 <div class="mdl-grid">
                     <div id="viewer-previous-file-button" class="center-element mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone">
-                        <button
+                        <button  *ngIf="false"
                             class="center-element mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
                             (click)="previousFile()">
                             <i class="icon material-icons ">keyboard_arrow_left</i>
@@ -67,14 +67,27 @@
                         <!-- Start View Switch-->
                             <div *ngIf="isPdf()"><pdf-viewer [urlFile]="urlFile" ></pdf-viewer></div>
                             <div *ngIf="isImage()" ><img src="{{urlFile}}"  id="viewer-image" class="center-element viewer-image"/></div>
-                            <div *ngIf="notSupportedExtension()"><div id="viewer-unsupported">Not Supported Download</div></div>
+                            <div *ngIf="notSupportedExtension()">
+                                <section class="section--center mdl-grid mdl-grid--no-spacing">
+                                    <div class="viewer-margin mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone mdl-shadow--2dp">
+                                        <div class="viewer-download-text mdl-card__supporting-text">
+                                            <h4>File {{nameFile}} is an unsupported format</h4>
+                                        </div>
+                                        <div class="mdl-card__actions">
+                                            <button class="viewer-margin center-element mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" (click)="download()">
+                                                <i class="viewer-margin-cloud-download material-icons">cloud_download</i>   Download
+                                            </button>
+                                        </div>
+                                    </div>
+                                </section>
+                            </div>
                         <!-- End View Switch -->
                         </div>
 
                     </div>
 
                     <div id="viewer-next-file-button" class="center-element mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone">
-                        <button
+                        <button *ngIf="false"
                             class="center-element mdl-color--black mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
                             (click)="nextFile()">
                             <i class="icon material-icons">keyboard_arrow_right</i>
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
index 22c2cdc91d..b8e0393401 100644
--- a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
@@ -157,10 +157,22 @@ export class ViewerComponent {
         return localStorage.getItem('token');
     }
 
+    /**
+     * Hide the othe possible menu in th eapplication
+     */
     private hideOtherMenu() {
-        this.otherMenu = document.querySelector("header");
-        if (this.otherMenu) {
-            this.otherMenu.hidden = true;
+        if (this.overlayMode) {
+            this.otherMenu = document.querySelector('header');
+            if (this.otherMenu) {
+                this.otherMenu.hidden = true;
+            }
         }
     }
+
+    /**
+     * Download file
+     */
+    private download(){
+        window.open(this.urlFile);
+    }
 }