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 = $('', { id: 'cp-fileupload-table' }); - var $thead = $('').appendTo($table); - $('', {id: id}).appendTo($table); var $lines = $table.find('tr[id]'); @@ -221,19 +224,28 @@ define([ var $cancel = $('', {'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 = $('', { '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)); - $('
').text(Messages.upload_type).appendTo($thead); - $('').text(Messages.upload_name).appendTo($thead); - $('').text(Messages.upload_size).appendTo($thead); - $('').text(Messages.upload_progress).appendTo($thead); - $('').text(Messages.cancel).appendTo($thead); var createTableContainer = function ($body) { - File.$container = $('
', { id: 'cp-fileupload' }).append($table).appendTo($body); + File.$container = $('
', { 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 = $('
', {'class':'cp-fileupload-table-progress-container'}); - var $progressValue = $('', {'class':'cp-fileupload-table-progress-value'}).text(Messages.upload_pending); + var $progressContainer = $('
', {'class':'cp-fileupload-table-progress-container'}); + $('
', {'class':'cp-fileupload-table-progressbar'}).appendTo($progressContainer); + $('', {'class':'cp-fileupload-table-progress-value'}).text(Messages.upload_pending).appendTo($progressContainer); var $tr = $('
').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) + $('', {'class': 'cp-fileupload-table-type'}).append(typeIcon).appendTo($tr); + // name $('').append($link).appendTo($tr); + // size $('').text(prettySize(estimate)).appendTo($tr); - $('', {'class': 'cp-fileupload-table-progress'}).append($progressBar).append($progressValue).appendTo($tr); + // progress + $('', {'class': 'cp-fileupload-table-progress'}).append($progressContainer).appendTo($tr); + // cancel $('', {'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,