From 34ba673cd3955e2f40e5436eac0ae41fc5316be7 Mon Sep 17 00:00:00 2001
From: Pierre Bondoerffer <pierre@bondoer.fr>
Date: Wed, 9 Aug 2017 10:54:20 +0200
Subject: [PATCH] improve file upload UI

---
 customize.dist/src/less/cryptpad.less         | 35 ++++++++++---------
 .../src/less2/include/colortheme.less         |  2 ++
 customize.dist/src/less2/include/modal.less   | 17 +++++++++
 www/common/common-file.js                     |  3 +-
 www/file/file.less                            |  6 ----
 5 files changed, 40 insertions(+), 23 deletions(-)
 create mode 100644 customize.dist/src/less2/include/modal.less

diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less
index e607ef7ff..67adce78a 100644
--- a/customize.dist/src/less/cryptpad.less
+++ b/customize.dist/src/less/cryptpad.less
@@ -3,6 +3,7 @@
 
 @import "../less2/include/alertify.less";
 @import "../less2/include/colortheme.less";
+@import "../less2/include/modal.less";
 @import "./bar.less";
 @import "./loading.less";
 @import "./dropdown.less";
@@ -633,29 +634,30 @@ noscript {
 
 /* Upload status table */
 #uploadStatusContainer {
+    .modal_base();
     position: absolute;
     left: 10vw; right: 10vw;
-    bottom: 100px;
-    background-color: rgba(0,0,0,0.5);
-    color: white;
-    opacity: 0.7;
+    bottom: 10vh;
+    opacity: 1;
     box-sizing: border-box;
-    z-index:10000;
+    z-index: 10000;
     display: none;
-    font-family: @colortheme_font;
+    opacity: 0.9;
     #uploadStatus {
         width: 80vw;
-        border: 1px solid black;
-        border-collapse: collapse;
         tr:nth-child(1) {
-            background-color: #888;
-            border: 1px solid #999;
-            td { text-align: center; }
+            background-color: darken(@colortheme_modal-bg, 20%);
+            td {
+                text-align: center;
+                font-weight: bold;
+                padding: 0.25em;
+            }
         }
+        @upload_pad_h: 0.25em;
+        @upload_pad_v: 0.5em;
+
         td {
-            border-left: 1px solid #BBB;
-            border-right: 1px solid #BBB;
-            padding: 0 10px;
+            padding: @upload_pad_h @upload_pad_v;
         }
         .upProgress {
             width: 200px;
@@ -666,9 +668,10 @@ noscript {
         .progressContainer {
             position: absolute;
             width: 0px;
-            left: 5px;
-            top: 1px; bottom: 1px;
+            left: @upload_pad_v;
+            top: @upload_pad_h; bottom: @upload_pad_h;
             background-color: rgba(0,0,255,0.3);
+            z-index: -1;
         }
         .upCancel { text-align: center; }
         .fa.cancel {
diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 51b9af335..a62800442 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -15,6 +15,8 @@
 
 @colortheme_modal-bg: #222;
 @colortheme_modal-fg: #fff;
+@colortheme_modal-link: #eee;
+@colortheme_modal-link-visited: lighten(@colortheme_modal-link, 10%);
 @colortheme_modal-dim: rgba(0, 0, 0, 0.4);
 @colortheme_modal-padding: 12px;
 @colortheme_modal-shadow: 0 8px 32px 0 rgba(0,0,0,.4);
diff --git a/customize.dist/src/less2/include/modal.less b/customize.dist/src/less2/include/modal.less
new file mode 100644
index 000000000..21cc69e97
--- /dev/null
+++ b/customize.dist/src/less2/include/modal.less
@@ -0,0 +1,17 @@
+@import (once) "./colortheme.less";
+
+.modal_base() {
+    font-family: @colortheme_font;
+
+    background-color: @colortheme_modal-bg;
+    color: @colortheme_modal-fg;
+    box-shadow: @colortheme_modal-shadow;
+
+    a {
+        color: @colortheme_modal-link;
+
+        &:visited {
+            color: @colortheme_modal-link-visited;
+        }
+    }
+}
diff --git a/www/common/common-file.js b/www/common/common-file.js
index 0093b9ef6..66e5eaefc 100644
--- a/www/common/common-file.js
+++ b/www/common/common-file.js
@@ -56,12 +56,13 @@ define([
             $row.find('.upCancel').html('-');
             var $pv = $row.find('.progressValue');
             var $pb = $row.find('.progressContainer');
+            var $pc = $row.find('.upProgress');
             var $link = $row.find('.upLink');
 
             var updateProgress = function (progressValue) {
                 $pv.text(Math.round(progressValue*100)/100 + '%');
                 $pb.css({
-                    width: (progressValue/100)*188+'px'
+                    width: (progressValue/100)*$pc.width()+'px'
                 });
             };
 
diff --git a/www/file/file.less b/www/file/file.less
index 1e4db2cd1..fa6485806 100644
--- a/www/file/file.less
+++ b/www/file/file.less
@@ -128,9 +128,3 @@ media-tag {
     z-index: 10000;
     display: block;
 }
-
-body #uploadStatusContainer {
-    background-color: rgba(255, 255, 255, 0.9);
-    color: black;
-    opacity: 0.9;
-}