From ef95da707ed8988c04425fd31f5a2335a19cf21c Mon Sep 17 00:00:00 2001
From: ClemDee <clement.desableau@xwiki.com>
Date: Mon, 29 Jul 2019 11:22:52 +0200
Subject: [PATCH] Modify upload panel style

---
 .../src/less2/include/fileupload.less         | 78 ++++++++++++++-----
 www/common/sframe-common-file.js              | 69 +++++++++-------
 2 files changed, 102 insertions(+), 45 deletions(-)

diff --git a/customize.dist/src/less2/include/fileupload.less b/customize.dist/src/less2/include/fileupload.less
index e993d3030..8871eb6af 100644
--- a/customize.dist/src/less2/include/fileupload.less
+++ b/customize.dist/src/less2/include/fileupload.less
@@ -1,3 +1,4 @@
+@import (reference) "./browser.less";
 @import (reference) './colortheme-all.less';
 @import (reference) './modal.less';
 
@@ -10,24 +11,35 @@
     #cp-fileupload {
         .modal_base();
         position: absolute;
-        left: 10vw; right: 10vw;
+        right: 10vw;
         bottom: 10vh;
-        opacity: 0.9;
         box-sizing: border-box;
         z-index: 1000000; //Z file upload table container
         display: none;
-        #cp-fileupload-table {
-            width: 80vw;
-            tr:nth-child(1) {
-                background-color: darken(@colortheme_modal-bg, 20%);
-                td {
-                    font-weight: bold;
-                    padding: 0.25em;
-                    &:nth-child(4), &:nth-child(5) {
-                        text-align: center;
-                    }
+        color: darken(@colortheme_drive-bg, 10%);
+
+        @media screen and (max-width: @browser_media-medium-screen) {
+            left: 5vw; right: 5vw; bottom: 5vw;
+        }
+
+        .cp-fileupload-header {
+            display: flex;
+            background-color: darken(@colortheme_modal-bg, 10%);
+            font-weight: bold;
+            .cp-fileupload-header-title {
+                padding: 0.25em 0.5em;
+                flex-grow: 1;
+            }
+            .cp-fileupload-header-close {
+                padding: 0.25em 0.5em;
+                cursor: pointer;
+                &:hover {
+                    background-color: rgba(0,0,0,0.1);
                 }
             }
+        }
+        #cp-fileupload-table {
+            width: 100%;
             @upload_pad_h: 0.25em;
             @upload_pad_v: 0.5em;
 
@@ -35,27 +47,55 @@
                 padding: @upload_pad_h @upload_pad_v;
             }
             .cp-fileupload-table-link {
+                display: flex;
+                align-items: center;
+                white-space: nowrap;
+                max-width: 30vw;
+                margin: 0px @upload_pad_v;
                 .fa {
+                    margin-top: 4px;
                     margin-right: 5px;
                 }
+                .cp-fileupload-table-name {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                &[href]:hover {
+                    text-decoration: none;
+                    .cp-fileupload-table-name {
+                        text-decoration: underline;
+                    }
+                }
             }
             .cp-fileupload-table-progress {
-                width: 25%;
+                min-width: 8em;
+                max-width: 16em;
                 position: relative;
                 text-align: center;
                 box-sizing: border-box;
             }
             .cp-fileupload-table-progress-container {
+                position: relative;
+            }
+            .cp-fileupload-table-progressbar {
                 position: absolute;
                 width: 0px;
-                left: @upload_pad_v;
-                top: @upload_pad_h; bottom: @upload_pad_h;
-                background-color: rgba(0,0,255,0.3);
+                height: 100%;
+                background-color: #dddddd;
                 z-index: -1; //Z file upload progress container
             }
-            .cp-fileupload-table-cancel { text-align: center; }
-            .fa.cancel {
-                color: rgb(255, 0, 115);
+            .cp-fileupload-table-cancel {
+                text-align: center;
+                padding: 0px;
+                &:not(.success):not(.cancelled):hover {
+                    background-color: rgba(0,0,0,0.1);
+                }
+                .fa {
+                    padding: @upload_pad_h @upload_pad_v;
+                    &.fa-times {
+                        cursor: pointer;
+                    }
+                }
             }
         }
     }
diff --git a/www/common/sframe-common-file.js b/www/common/sframe-common-file.js
index ef537811b..8f71d281b 100644
--- a/www/common/sframe-common-file.js
+++ b/www/common/sframe-common-file.js
@@ -42,16 +42,19 @@ define([
             return 'cp-fileupload-element-' + String(Math.random()).substring(2);
         };
 
+        var tableHeader = h('div.cp-fileupload-header', [
+            h('div.cp-fileupload-header-title', h('span', Messages.fileuploadHeader || 'Uploaded files')),
+            h('div.cp-fileupload-header-close', h('span.fa.fa-times')),
+        ]);
+
+
         var $table = File.$table = $('<table>', { id: 'cp-fileupload-table' });
-        var $thead = $('<tr>').appendTo($table);
-        $('<td>').text(Messages.upload_type).appendTo($thead);
-        $('<td>').text(Messages.upload_name).appendTo($thead);
-        $('<td>').text(Messages.upload_size).appendTo($thead);
-        $('<td>').text(Messages.upload_progress).appendTo($thead);
-        $('<td>').text(Messages.cancel).appendTo($thead);
 
         var createTableContainer = function ($body) {
-            File.$container = $('<div>', { id: 'cp-fileupload' }).append($table).appendTo($body);
+            File.$container = $('<div>', { id: 'cp-fileupload' }).append(tableHeader).append($table).appendTo($body);
+            $('.cp-fileupload-header-close').click(function () {
+                File.$container.fadeOut();
+            });
             return File.$container;
         };
 
@@ -100,10 +103,9 @@ define([
 
             var $row = $table.find('tr[id="'+id+'"]');
 
-            $row.find('.cp-fileupload-table-cancel').html('-');
+            $row.find('.cp-fileupload-table-cancel').addClass('success').html('').append(h('span.fa.fa-check'));
             var $pv = $row.find('.cp-fileupload-table-progress-value');
-            var $pb = $row.find('.cp-fileupload-table-progress-container');
-            var $pc = $row.find('.cp-fileupload-table-progress');
+            var $pb = $row.find('.cp-fileupload-table-progressbar');
             var $link = $row.find('.cp-fileupload-table-link');
 
             /**
@@ -190,7 +192,7 @@ define([
                     else {
                         File.$container.fadeOut();
                     }
-                }, 20000);
+                }, 60000);
                 return;
             }
             if (queue.inProgress) { return; }
@@ -209,8 +211,9 @@ define([
             window.setTimeout(function () { $table.show(); });
             var estimate = obj.dl ? obj.size : FileCrypto.computeEncryptedSize(obj.blob.byteLength, obj.metadata);
 
-            var $progressBar = $('<div>', {'class':'cp-fileupload-table-progress-container'});
-            var $progressValue = $('<span>', {'class':'cp-fileupload-table-progress-value'}).text(Messages.upload_pending);
+            var $progressContainer = $('<div>', {'class':'cp-fileupload-table-progress-container'});
+            $('<div>', {'class':'cp-fileupload-table-progressbar'}).appendTo($progressContainer);
+            $('<span>', {'class':'cp-fileupload-table-progress-value'}).text(Messages.upload_pending).appendTo($progressContainer);
 
             var $tr = $('<tr>', {id: id}).appendTo($table);
             var $lines = $table.find('tr[id]');
@@ -221,19 +224,28 @@ define([
             var $cancel = $('<span>', {'class': 'cp-fileupload-table-cancel-button fa fa-times'}).click(function () {
                 queue.queue = queue.queue.filter(function (el) { return el.id !== id; });
                 $cancel.remove();
-                $tr.find('.cp-fileupload-table-cancel').text('-');
+                $tr.find('.cp-fileupload-table-cancel').addClass('cancelled').html('').append(h('span.fa.fa-minus'));
                 $tr.find('.cp-fileupload-table-progress-value').text(Messages.upload_cancelled);
             });
 
             var $link = $('<a>', {
                 'class': 'cp-fileupload-table-link',
                 'rel': 'noopener noreferrer'
-            }).text(obj.dl ? obj.name : obj.metadata.name);
+            }).append(h('span.cp-fileupload-table-name', obj.dl ? obj.name : obj.metadata.name));
 
-            $('<td>').text(obj.dl ? Messages.download_dl : Messages.upload_up).appendTo($tr);
+            var typeIcon;
+            if (obj.dl) { typeIcon = h('span.fa.fa-arrow-down', { title: Messages.download_dl }); }
+            else { typeIcon = h('span.fa.fa-arrow-up', { title: Messages.upload_up }); }
+
+            // type (download / upload)
+            $('<td>', {'class': 'cp-fileupload-table-type'}).append(typeIcon).appendTo($tr);
+            // name
             $('<td>').append($link).appendTo($tr);
+            // size
             $('<td>').text(prettySize(estimate)).appendTo($tr);
-            $('<td>', {'class': 'cp-fileupload-table-progress'}).append($progressBar).append($progressValue).appendTo($tr);
+            // progress
+            $('<td>', {'class': 'cp-fileupload-table-progress'}).append($progressContainer).appendTo($tr);
+            // cancel
             $('<td>', {'class': 'cp-fileupload-table-cancel'}).append($cancel).appendTo($tr);
 
             queue.next();
@@ -264,10 +276,9 @@ define([
                 input: initialDisabled
             });
             return manualStore;
-        }
+        };
         var fileUploadModal = function (defaultFileName, cb) {
             var parsedName = /^(\.?.+?)(\.[^.]+)?$/.exec(defaultFileName) || [];
-            var name = parsedName[1] || defaultFileName;
             var ext = parsedName[2] || "";
 
             var manualStore = createManualStore();
@@ -325,7 +336,7 @@ define([
             });
         };
 
-        var showFolderUploadModal = File.showFolderUploadModal = function (foldername, cb) {
+        File.showFolderUploadModal = function (foldername, cb) {
             var manualStore = createManualStore();
 
             // Ask for name, password and owner
@@ -374,7 +385,7 @@ define([
                     forceSave: forceSave
                 });
             });
-        }
+        };
 
         var handleFileState = {
             queue: [],
@@ -537,12 +548,16 @@ define([
 
                     var $row = $table.find('tr[id="'+id+'"]');
                     var $pv = $row.find('.cp-fileupload-table-progress-value');
-                    var $pb = $row.find('.cp-fileupload-table-progress-container');
-                    var $pc = $row.find('.cp-fileupload-table-progress');
+                    var $pb = $row.find('.cp-fileupload-table-progressbar');
                     var $link = $row.find('.cp-fileupload-table-link');
 
                     var done = function () {
-                        $row.find('.cp-fileupload-table-cancel').text('-');
+                        $row.find('.cp-fileupload-table-cancel').addClass('success').html('').append(h('span.fa.fa-check'));
+                        queue.inProgress = false;
+                        queue.next();
+                    };
+                    var cancelled = function () {
+                        $row.find('.cp-fileupload-table-cancel').addClass('cancelled').html('').append(h('span.fa.fa-minus'));
                         queue.inProgress = false;
                         queue.next();
                     };
@@ -594,9 +609,11 @@ define([
                         dl.cancel();
                         $cancel.remove();
                         $row.find('.cp-fileupload-table-progress-value').text(Messages.upload_cancelled);
-                        done();
+                        cancelled();
                     });
-                    $row.find('.cp-fileupload-table-cancel').html('').append($cancel);
+                    $row.find('.cp-fileupload-table-cancel')
+                        .html('')
+                        .append($cancel);
                 };
                 queue.push({
                     dl: todo,