improve file picker ui
This commit is contained in:
Pierre Bondoerffer
parent
798a3dc520
commit
c53e738054
4 changed files with 132 additions and 55 deletions
|
|
@ -2,10 +2,10 @@
|
|||
@import (once) "./browser.less";
|
||||
|
||||
.alertify_main () {
|
||||
@alertify-fore: @colortheme_old-fore;
|
||||
@alertify-base: @colortheme_old-base;
|
||||
@alertify-fore: @colortheme_modal-fg;
|
||||
@alertify-base: @colortheme_modal-bg;
|
||||
|
||||
@alertify-dialog-bg: #222;
|
||||
@alertify-dialog-bg: @alertify-base;
|
||||
@alertify-dialog-fg: @alertify-fore;
|
||||
|
||||
@alertify-btn-fg: @alertify-fore;
|
||||
|
|
@ -13,14 +13,14 @@
|
|||
@alertify-btn-bg: rgba(200, 200, 200, 0.1);
|
||||
@alertify-btn-bg-hover: rgba(200, 200, 200, .3);
|
||||
|
||||
@alertify-bg: rgba(0, 0, 0, .4);
|
||||
@alertify-bg: @colortheme_modal-dim;
|
||||
@alertify-fg: @alertify-fore;
|
||||
|
||||
@alertify-input-bg: #111;
|
||||
@alertify-input-fg: @alertify-fore;
|
||||
@alertify-input-bg: @colortheme_modal-input;
|
||||
@alertify-input-fg: @colortheme_modal-fg;
|
||||
|
||||
@alertify_padding-base: 12px;
|
||||
@alertify_box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
|
||||
@alertify_padding-base: @colortheme_modal-padding;
|
||||
@alertify_box-shadow: @colortheme_modal-shadow;
|
||||
|
||||
// Logs to show that something has happened
|
||||
// These show only once
|
||||
|
|
|
|||
|
|
@ -13,9 +13,19 @@
|
|||
@colortheme_cp-red: #FA5858; // remove red
|
||||
@colortheme_cp-green: #46E981;
|
||||
|
||||
@colortheme_modal-bg: #222;
|
||||
@colortheme_modal-fg: #fff;
|
||||
@colortheme_modal-dim: rgba(0, 0, 0, 0.4);
|
||||
@colortheme_modal-padding: 12px;
|
||||
@colortheme_modal-shadow: 0 8px 32px 0 rgba(0,0,0,.4);
|
||||
|
||||
@colortheme_modal-input: #111;
|
||||
|
||||
@colortheme_alertify-red: #E55236;
|
||||
@colortheme_alertify-green: #77C825;
|
||||
|
||||
// Apps
|
||||
|
||||
@colortheme_pad-bg: #1c4fa0;
|
||||
@colortheme_pad-color: #fff;
|
||||
|
||||
|
|
@ -50,4 +60,4 @@
|
|||
@colortheme_profile-color: #fff;
|
||||
|
||||
@cryptpad_color_blue: #4591C4;
|
||||
@cryptpad_color_grey: #999999;
|
||||
@cryptpad_color_grey: #999999;
|
||||
|
|
|
|||
|
|
@ -1400,20 +1400,21 @@ define([
|
|||
|
||||
common.createFileDialog = function (cfg) {
|
||||
var $body = cfg.$body || $('body');
|
||||
var $block = $body.find('#fileDialog');
|
||||
if (!$block.length) {
|
||||
$block = $('<div>', {id: "fileDialog"}).appendTo($body);
|
||||
var $blockContainer = $body.find('#fileDialog');
|
||||
if (!$blockContainer.length) {
|
||||
$blockContainer = $('<div>', {id: "fileDialog"}).appendTo($body);
|
||||
}
|
||||
$block.html('');
|
||||
$blockContainer.html('');
|
||||
var $block = $('<div>', {id: "modal"}).appendTo($blockContainer);
|
||||
$('<span>', {
|
||||
'class': 'close fa fa-times',
|
||||
'title': Messages.filePicker_close
|
||||
}).click(function () {
|
||||
$block.hide();
|
||||
$blockContainer.hide();
|
||||
}).appendTo($block);
|
||||
var $description = $('<p>').text(Messages.filePicker_description);
|
||||
$block.append($description);
|
||||
var $filter = $('<p>').appendTo($block);
|
||||
var $filter = $('<p>', {'class': 'form'}).appendTo($block);
|
||||
var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block);
|
||||
var updateContainer = function () {
|
||||
$container.html('');
|
||||
|
|
@ -1426,11 +1427,15 @@ define([
|
|||
if (filter && name.toLowerCase().indexOf(filter.toLowerCase()) === -1) {
|
||||
return;
|
||||
}
|
||||
var $span = $('<span>', {'class': 'element'}).appendTo($container);
|
||||
var $inner = $('<span>').text(name);
|
||||
$span.append($inner).click(function () {
|
||||
var $span = $('<span>', {
|
||||
'class': 'element',
|
||||
'title': name,
|
||||
}).appendTo($container);
|
||||
$span.append($('<i>', {'class': 'fa fa-file-text-o'}));
|
||||
$span.append(name);
|
||||
$span.click(function () {
|
||||
if (typeof cfg.onSelect === "function") { cfg.onSelect(data.href); }
|
||||
$block.hide();
|
||||
$blockContainer.hide();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
@ -1446,13 +1451,13 @@ define([
|
|||
//$filter.append(' '+Messages.or+' ');
|
||||
var data = {FM: cfg.data.FM};
|
||||
$filter.append(common.createButton('upload', false, data, function () {
|
||||
$block.hide();
|
||||
$blockContainer.hide();
|
||||
}));
|
||||
updateContainer();
|
||||
$body.keydown(function (e) {
|
||||
if (e.which === 27) { $block.hide(); }
|
||||
if (e.which === 27) { $blockContainer.hide(); }
|
||||
});
|
||||
$block.show();
|
||||
$blockContainer.show();
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,39 +1,101 @@
|
|||
@import (once) '../customize/src/less2/include/colortheme.less';
|
||||
|
||||
#fileDialog {
|
||||
position: absolute;
|
||||
background-color: rgba(200, 200, 200, 0.8);
|
||||
top: 15vh; bottom: 15vh;
|
||||
left: 10vw; right: 10vw;
|
||||
border: 1px solid black;
|
||||
z-index: 100000;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
.close {
|
||||
|
||||
z-index: 100000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: @colortheme_modal-dim;
|
||||
|
||||
#modal {
|
||||
background-color: @colortheme_modal-bg;
|
||||
color: @colortheme_modal-fg;
|
||||
box-shadow: @colortheme_modal-shadow;
|
||||
|
||||
padding: @colortheme_modal-padding;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.element {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 5px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
align-items: center;
|
||||
span {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
top: 15vh; bottom: 15vh;
|
||||
left: 10vw; right: 10vw;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
font-family: @colortheme_font;
|
||||
text-align: center;
|
||||
|
||||
& > p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: @colortheme_modal-input;
|
||||
color: @colortheme_modal-fg;
|
||||
border: 0;
|
||||
padding: 8px 12px;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.close {
|
||||
text-shadow: none;
|
||||
color: inherit;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: @colortheme_modal-padding;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fileContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.element {
|
||||
@darker: darken(@colortheme_modal-fg, 30%);
|
||||
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
height: 1em;
|
||||
padding: 0.5em;
|
||||
margin: 5px;
|
||||
box-sizing: content-box;
|
||||
|
||||
text-align: left;
|
||||
line-height: 1.25em;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #111;
|
||||
color: @darker;
|
||||
|
||||
transition: all 0.1s;
|
||||
|
||||
&:hover {
|
||||
color: @colortheme_modal-fg;
|
||||
}
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
align-items: center;
|
||||
|
||||
.fa {
|
||||
cursor: pointer;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue