From cbe21959b481bcd0e6eab30ac86969d19edef1de Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 15 Jun 2017 15:35:52 +0200
Subject: [PATCH] Update UI for the file/media app

---
 www/common/common-file.js |  1 +
 www/file/file.css         | 31 ++++++++++++++++++++++++-------
 www/file/file.less        | 34 ++++++++++++++++++++++++++++++----
 www/file/inner.html       | 32 +++++++++++++++++---------------
 www/file/main.js          | 16 ++++++++++------
 5 files changed, 82 insertions(+), 32 deletions(-)

diff --git a/www/common/common-file.js b/www/common/common-file.js
index 43d7cff2a..017516341 100644
--- a/www/common/common-file.js
+++ b/www/common/common-file.js
@@ -180,6 +180,7 @@ define([
         queue.next = function () {
             if (queue.queue.length === 0) {
                 queue.to = window.setTimeout(function () {
+                    if (config.keepTable) { return; }
                     File.$container.fadeOut();
                 }, 3000);
                 return;
diff --git a/www/file/file.css b/www/file/file.css
index 27cd125e1..0207620a9 100644
--- a/www/file/file.css
+++ b/www/file/file.css
@@ -3,6 +3,19 @@ body {
   margin: 0px;
   height: 100%;
 }
+body {
+  display: flex;
+  flex-flow: column;
+}
+#app {
+  flex: 1;
+  background: url('/customize/bg3.jpg') no-repeat center center;
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .cryptpad-toolbar {
   margin-bottom: 1px;
   padding: 0px;
@@ -23,6 +36,10 @@ body {
   position: absolute;
   z-index: -1;
 }
+media-tag img {
+  max-width: 100%;
+  max-height: calc(100vh - 64px);
+}
 #upload-form,
 #download-form {
   padding: 0px;
@@ -56,20 +73,14 @@ body {
   display: none;
 }
 .inputfile + label {
-  border: 2px solid black;
-  background-color: rgba(50, 50, 50, 0.1);
   display: block;
 }
-.inputfile:focus + label,
-.inputfile + label:hover {
-  background-color: rgba(50, 50, 50, 0.3);
-}
 #progress {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
-  transition: width 500ms;
+  transition: width 200ms;
   width: 0%;
   max-width: 100%;
   max-height: 100%;
@@ -77,3 +88,9 @@ body {
   z-index: 10000;
   display: block;
 }
+body #uploadStatusContainer {
+  background-color: rgba(255, 255, 255, 0.9);
+  color: black;
+  opacity: 0.9;
+  display: block !important;
+}
diff --git a/www/file/file.less b/www/file/file.less
index fe7a37ebb..a5fc8d65c 100644
--- a/www/file/file.less
+++ b/www/file/file.less
@@ -7,6 +7,19 @@ html, body {
     margin: 0px;
     height: 100%;
 }
+body {
+    display: flex;
+    flex-flow: column;
+}
+#app {
+    flex: 1;
+    background: url('/customize/bg3.jpg') no-repeat center center;
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 .cryptpad-toolbar {
     margin-bottom: 1px;
     padding: 0px;
@@ -28,6 +41,13 @@ html, body {
     z-index: -1;
 }
 
+media-tag {
+    img {
+        max-width: 100%;
+        max-height: ~"calc(100vh - 64px)";
+    }
+}
+
 #upload-form, #download-form {
     padding: 0px;
     margin: 0px;
@@ -61,14 +81,14 @@ html, body {
     display: none;
 }
 .inputfile + label {
-    border: 2px solid black;
-    background-color: rgba(50, 50, 50, .10);
+    //border: 2px solid black;
+    //background-color: rgba(50, 50, 50, .10);
     display: block;
 }
 
 .inputfile:focus + label,
 .inputfile + label:hover {
-    background-color: rgba(50, 50, 50, 0.30);
+    //background-color: rgba(50, 50, 50, 0.30);
 }
 
 #progress {
@@ -78,7 +98,7 @@ html, body {
     height: 100%;
 
 
-    transition: width 500ms;
+    transition: width 200ms;
     width: 0%;
     max-width: 100%;
     max-height: 100%;
@@ -87,3 +107,9 @@ html, body {
     display: block;
 }
 
+body #uploadStatusContainer {
+    background-color: rgba(255, 255, 255, 0.9);
+    color: black;
+    opacity: 0.9;
+    display: block !important;
+}
diff --git a/www/file/inner.html b/www/file/inner.html
index c4ccbbd7b..4ad590bd8 100644
--- a/www/file/inner.html
+++ b/www/file/inner.html
@@ -10,21 +10,23 @@
 </head>
 <body>
     <div id="toolbar" class="toolbar-container"></div>
-    <div id="upload-form" style="display: none;">
-        <input type="file" name="file" id="file" class="inputfile" />
-        <label for="file" class="block unselectable" data-localization-title="upload_choose"
-            data-localization="upload_choose"></label>
-    </div>
-    <div id="download-form" style="display: none;">
-        <input type="button" name="dl" id="dl" class="inputfile" />
-        <label for="dl" class="block unselectable" data-localization-title="download_button"
-            data-localization="download_button"></label>
-        <span class="block" id="progress"></span>
-    </div>
-    <div id="download-view" style="display: none;">
-        <media-tag id="encryptedFile"></media-tag>
-    </div>
-    <div id="feedback" class="block hidden">
+    <div id="app">
+        <div id="upload-form" style="display: none;">
+            <input type="file" name="file" id="file" class="inputfile" />
+            <label for="file" class="btn btn-primary block unselectable" data-localization-title="upload_choose"
+                data-localization="upload_choose"></label>
+        </div>
+        <div id="download-form" style="display: none;">
+            <input type="button" name="dl" id="dl" class="inputfile" />
+            <label for="dl" class="btn btn-success block unselectable" data-localization-title="download_button"
+                data-localization="download_button"></label>
+            <span class="block" id="progress"></span>
+        </div>
+        <div id="download-view" style="display: none;">
+            <media-tag id="encryptedFile"></media-tag>
+        </div>
+        <div id="feedback" class="block hidden">
+        </div>
     </div>
 </body>
 </html>
diff --git a/www/file/main.js b/www/file/main.js
index 20d166c5f..2163b51fa 100644
--- a/www/file/main.js
+++ b/www/file/main.js
@@ -21,6 +21,7 @@ define([
     var andThen = function () {
         var ifrw = $('#pad-iframe')[0].contentWindow;
         var $iframe = $('#pad-iframe').contents();
+        var $appContainer = $iframe.find('#app');
         var $form = $iframe.find('#upload-form');
         var $dlform = $iframe.find('#download-form');
         var $dlview = $iframe.find('#download-view');
@@ -116,10 +117,12 @@ define([
                         if (decrypted.callback) { decrypted.callback(); }
                         $dlview.show();
                         $dlform.hide();
-                        if (ev) {
-                            var $dlButton = $dlview.find('media-tag button');
-                            $dlButton.click();
+                        var $dlButton = $dlview.find('media-tag button');
+                        if (ev) { $dlButton.click(); }
+                        if (!$dlButton.length) {
+                            $appContainer.css('background', 'white');
                         }
+                        $dlButton.addClass('btn btn-success');
                         Cryptpad.removeLoadingScreen();
                     })
                     .on('decryptionError', function (e) {
@@ -165,11 +168,11 @@ define([
                     $dlform.show();
                     Cryptpad.removeLoadingScreen();
                     var decrypting = false;
-                    var onClick = function () {
+                    var onClick = function (ev) {
                         if (decrypting) { return; }
                         if (myFile) { return void exportFile(); }
                         decrypting = true;
-                        displayFile();
+                        displayFile(ev);
                     };
                     if (sizeMb < 5) { return void onClick(); }
                     Cryptpad.removeLoadingScreen();
@@ -200,7 +203,8 @@ define([
         var fmConfig = {
             dropArea: $form,
             hoverArea: $label,
-            body: $body
+            body: $body,
+            keepTable: true // Don't fadeOut the tbale with the uploaded files
         };
 
         var FM = Cryptpad.createFileManager(fmConfig);