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

make file picker ui even prettier

Browse Source
This commit is contained in:
Pierre Bondoerffer 2017-08-07 17:22:54 +02:00
parent c53e738054
commit 8f285eba9f
No known key found for this signature in database
GPG Key ID: C0C7C0C5063F2236
3 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
www/common/cryptpad-common.js
View File

@ -1397,6 +1397,24 @@ define([
} }
}; };
// This is duplicated in drive/main.js, it should be unified
var getFileIcon = function (data) {
var $icon = common.getIcon();
if (!data) { return $icon; }
var href = data.href;
if (!href) { return $icon; }
if (href.indexOf('/pad/') !== -1) { $icon = common.getIcon('pad'); }
else if (href.indexOf('/code/') !== -1) { $icon = common.getIcon('code'); }
else if (href.indexOf('/slide/') !== -1) { $icon = common.getIcon('slide'); }
else if (href.indexOf('/poll/') !== -1) { $icon = common.getIcon('poll'); }
else if (href.indexOf('/whiteboard/') !== -1) { $icon = common.getIcon('whiteboard'); }
else if (href.indexOf('/file/') !== -1) { $icon = common.getIcon('file'); }
return $icon;
};
common.createFileDialog = function (cfg) { common.createFileDialog = function (cfg) {
var $body = cfg.$body || $('body'); var $body = cfg.$body || $('body');
@ -1405,7 +1423,7 @@ define([
$blockContainer = $('<div>', {id: "fileDialog"}).appendTo($body); $blockContainer = $('<div>', {id: "fileDialog"}).appendTo($body);
} }
$blockContainer.html(''); $blockContainer.html('');
var $block = $('<div>', {id: "modal"}).appendTo($blockContainer); var $block = $('<div>', {'class': 'cp-modal'}).appendTo($blockContainer);
$('<span>', { $('<span>', {
'class': 'close fa fa-times', 'class': 'close fa fa-times',
'title': Messages.filePicker_close 'title': Messages.filePicker_close
@ -1414,7 +1432,7 @@ define([
}).appendTo($block); }).appendTo($block);
var $description = $('<p>').text(Messages.filePicker_description); var $description = $('<p>').text(Messages.filePicker_description);
$block.append($description); $block.append($description);
var $filter = $('<p>', {'class': 'form'}).appendTo($block); var $filter = $('<p>', {'class': 'cp-form'}).appendTo($block);
var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block); var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block);
var updateContainer = function () { var updateContainer = function () {
$container.html(''); $container.html('');
@ -1431,7 +1449,7 @@ define([
'class': 'element', 'class': 'element',
'title': name, 'title': name,
}).appendTo($container); }).appendTo($container);
$span.append($('<i>', {'class': 'fa fa-file-text-o'})); $span.append(getFileIcon(data));
$span.append(name); $span.append(name);
$span.click(function () { $span.click(function () {
if (typeof cfg.onSelect === "function") { cfg.onSelect(data.href); } if (typeof cfg.onSelect === "function") { cfg.onSelect(data.href); }

6
www/common/file-dialog.less
View File

@ -11,7 +11,7 @@
right: 0; right: 0;
background-color: @colortheme_modal-dim; background-color: @colortheme_modal-dim;
#modal { .cp-modal {
background-color: @colortheme_modal-bg; background-color: @colortheme_modal-bg;
color: @colortheme_modal-fg; color: @colortheme_modal-fg;
box-shadow: @colortheme_modal-shadow; box-shadow: @colortheme_modal-shadow;
@ -31,7 +31,7 @@
margin-bottom: 1em; margin-bottom: 1em;
} }
.form { .cp-form {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
@ -74,7 +74,7 @@
box-sizing: content-box; box-sizing: content-box;
text-align: left; text-align: left;
line-height: 1.25em; line-height: 1em;
cursor: pointer; cursor: pointer;
background-color: #111; background-color: #111;

1
www/drive/main.js
View File

@ -1146,6 +1146,7 @@ define([
$span.append($name).append($subfolders).append($files); $span.append($name).append($subfolders).append($files);
}; };
// This is duplicated in cryptpad-common, it should be unified
var getFileIcon = function (id) { var getFileIcon = function (id) {
var $icon = Cryptpad.getIcon(); var $icon = Cryptpad.getIcon();