infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Modify upload panel style

pull/1/head
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

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

@ -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;
}
}
}
}
}

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

@ -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,