web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Modify upload panel style

Browse Source
This commit is contained in:
ClemDee 2019-07-29 11:22:52 +02:00
parent e542be75a3
commit ef95da707e
2 changed files with 102 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
customize.dist/src/less2/include/fileupload.less
View File

@ -1,3 +1,4 @@
@import (reference) "./browser.less";
@import (reference) './colortheme-all.less'; @import (reference) './colortheme-all.less';
@import (reference) './modal.less'; @import (reference) './modal.less';
@ -10,24 +11,35 @@
#cp-fileupload { #cp-fileupload {
.modal_base(); .modal_base();
position: absolute; position: absolute;
left: 10vw; right: 10vw; right: 10vw;
bottom: 10vh; bottom: 10vh;
opacity: 0.9;
box-sizing: border-box; box-sizing: border-box;
z-index: 1000000; //Z file upload table container z-index: 1000000; //Z file upload table container
display: none; display: none;
#cp-fileupload-table { color: darken(@colortheme_drive-bg, 10%);
width: 80vw;
tr:nth-child(1) { @media screen and (max-width: @browser_media-medium-screen) {
background-color: darken(@colortheme_modal-bg, 20%); left: 5vw; right: 5vw; bottom: 5vw;
td { }
.cp-fileupload-header {
display: flex;
background-color: darken(@colortheme_modal-bg, 10%);
font-weight: bold; font-weight: bold;
padding: 0.25em; .cp-fileupload-header-title {
&:nth-child(4), &:nth-child(5) { padding: 0.25em 0.5em;
text-align: center; 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_h: 0.25em;
@upload_pad_v: 0.5em; @upload_pad_v: 0.5em;
@ -35,27 +47,55 @@
padding: @upload_pad_h @upload_pad_v; padding: @upload_pad_h @upload_pad_v;
} }
.cp-fileupload-table-link { .cp-fileupload-table-link {
display: flex;
align-items: center;
white-space: nowrap;
max-width: 30vw;
margin: 0px @upload_pad_v;
.fa { .fa {
margin-top: 4px;
margin-right: 5px; 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 { .cp-fileupload-table-progress {
width: 25%; min-width: 8em;
max-width: 16em;
position: relative; position: relative;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
} }
.cp-fileupload-table-progress-container { .cp-fileupload-table-progress-container {
position: relative;
}
.cp-fileupload-table-progressbar {
position: absolute; position: absolute;
width: 0px; width: 0px;
left: @upload_pad_v; height: 100%;
top: @upload_pad_h; bottom: @upload_pad_h; background-color: #dddddd;
background-color: rgba(0,0,255,0.3);
z-index: -1; //Z file upload progress container z-index: -1; //Z file upload progress container
} }
.cp-fileupload-table-cancel { text-align: center; } .cp-fileupload-table-cancel {
.fa.cancel { text-align: center;
color: rgb(255, 0, 115); 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;
}
}
} }
} }
} }

69
www/common/sframe-common-file.js
View File

@ -42,16 +42,19 @@ define([
return 'cp-fileupload-element-' + String(Math.random()).substring(2); 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 $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) { 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; return File.$container;
}; };
@ -100,10 +103,9 @@ define([
var $row = $table.find('tr[id="'+id+'"]'); 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 $pv = $row.find('.cp-fileupload-table-progress-value');
var $pb = $row.find('.cp-fileupload-table-progress-container'); var $pb = $row.find('.cp-fileupload-table-progressbar');
var $pc = $row.find('.cp-fileupload-table-progress');
var $link = $row.find('.cp-fileupload-table-link'); var $link = $row.find('.cp-fileupload-table-link');
/** /**
@ -190,7 +192,7 @@ define([
else { else {
File.$container.fadeOut(); File.$container.fadeOut();
} }
}, 20000); }, 60000);
return; return;
} }
if (queue.inProgress) { return; } if (queue.inProgress) { return; }
@ -209,8 +211,9 @@ define([
window.setTimeout(function () { $table.show(); }); window.setTimeout(function () { $table.show(); });
var estimate = obj.dl ? obj.size : FileCrypto.computeEncryptedSize(obj.blob.byteLength, obj.metadata); var estimate = obj.dl ? obj.size : FileCrypto.computeEncryptedSize(obj.blob.byteLength, obj.metadata);
var $progressBar = $('<div>', {'class':'cp-fileupload-table-progress-container'}); var $progressContainer = $('<div>', {'class':'cp-fileupload-table-progress-container'});
var $progressValue = $('<span>', {'class':'cp-fileupload-table-progress-value'}).text(Messages.upload_pending); $('<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 $tr = $('<tr>', {id: id}).appendTo($table);
var $lines = $table.find('tr[id]'); 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 () { 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; }); queue.queue = queue.queue.filter(function (el) { return el.id !== id; });
$cancel.remove(); $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); $tr.find('.cp-fileupload-table-progress-value').text(Messages.upload_cancelled);
}); });
var $link = $('<a>', { var $link = $('<a>', {
'class': 'cp-fileupload-table-link', 'class': 'cp-fileupload-table-link',
'rel': 'noopener noreferrer' '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); $('<td>').append($link).appendTo($tr);
// size
$('<td>').text(prettySize(estimate)).appendTo($tr); $('<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); $('<td>', {'class': 'cp-fileupload-table-cancel'}).append($cancel).appendTo($tr);
queue.next(); queue.next();
@ -264,10 +276,9 @@ define([
input: initialDisabled input: initialDisabled
}); });
return manualStore; return manualStore;
} };
var fileUploadModal = function (defaultFileName, cb) { var fileUploadModal = function (defaultFileName, cb) {
var parsedName = /^(\.?.+?)(\.[^.]+)?$/.exec(defaultFileName) || []; var parsedName = /^(\.?.+?)(\.[^.]+)?$/.exec(defaultFileName) || [];
var name = parsedName[1] || defaultFileName;
var ext = parsedName[2] || ""; var ext = parsedName[2] || "";
var manualStore = createManualStore(); var manualStore = createManualStore();
@ -325,7 +336,7 @@ define([
}); });
}; };
var showFolderUploadModal = File.showFolderUploadModal = function (foldername, cb) { File.showFolderUploadModal = function (foldername, cb) {
var manualStore = createManualStore(); var manualStore = createManualStore();
// Ask for name, password and owner // Ask for name, password and owner
@ -374,7 +385,7 @@ define([
forceSave: forceSave forceSave: forceSave
}); });
}); });
} };
var handleFileState = { var handleFileState = {
queue: [], queue: [],
@ -537,12 +548,16 @@ define([
var $row = $table.find('tr[id="'+id+'"]'); var $row = $table.find('tr[id="'+id+'"]');
var $pv = $row.find('.cp-fileupload-table-progress-value'); var $pv = $row.find('.cp-fileupload-table-progress-value');
var $pb = $row.find('.cp-fileupload-table-progress-container'); var $pb = $row.find('.cp-fileupload-table-progressbar');
var $pc = $row.find('.cp-fileupload-table-progress');
var $link = $row.find('.cp-fileupload-table-link'); var $link = $row.find('.cp-fileupload-table-link');
var done = function () { 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.inProgress = false;
queue.next(); queue.next();
}; };
@ -594,9 +609,11 @@ define([
dl.cancel(); dl.cancel();
$cancel.remove(); $cancel.remove();
$row.find('.cp-fileupload-table-progress-value').text(Messages.upload_cancelled); $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({ queue.push({
dl: todo, dl: todo,