Modify upload panel style
parent
e542be75a3
commit
ef95da707e
customize.dist/src/less2/include
www/common
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue