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

Merge branch 'driveUI' into may13

Browse Source
pull/1/head
yflory 5 years ago
parent 4ee62b0372 d8ebd97731
commit a777e6f785
2 changed files with 191 additions and 169 deletions
Show Stats Download Patch File Download Diff File

151
customize.dist/src/less2/include/drive.less
Unescape Escape View File

@ -3,6 +3,7 @@
@import (reference) "./tools.less"; @import (reference) "./tools.less";
@import (reference) "./limit-bar.less"; @import (reference) "./limit-bar.less";
@import (reference) "./tokenfield.less"; @import (reference) "./tokenfield.less";
@import (reference) "./dropdown.less";
.drive_main() { .drive_main() {
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
@ -102,12 +103,13 @@
.cp-app-drive-container { .cp-app-drive-container {
flex: 1; flex: 1;
overflow-x: auto;
width: 100%; width: 100%;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
min-height: 0;
@media screen and (max-width: @browser_media-medium-screen) { @media screen and (max-width: @browser_media-medium-screen) {
display: block; display: block;
overflow-y: auto;
#cp-app-drive-toolbar { #cp-app-drive-toolbar {
.path .element { .path .element {
display: none; display: none;
@ -159,7 +161,6 @@
.cp-app-drive-element-selected { .cp-app-drive-element-selected {
background: @drive_selected-bg !important; background: @drive_selected-bg !important;
color: #eee; color: #eee;
margin: -1px;
.fa-minus-square-o, .fa-plus-square-o { .fa-minus-square-o, .fa-plus-square-o {
color: @colortheme_sidebar-left-fg; color: @colortheme_sidebar-left-fg;
} }
@ -169,7 +170,6 @@
border: 1px dotted #bbb; border: 1px dotted #bbb;
background: #AAA; background: #AAA;
color: #ddd; color: #ddd;
margin: -1px;
.fa-minus-square-o, .fa-plus-square-o { .fa-minus-square-o, .fa-plus-square-o {
color: @colortheme_sidebar-left-fg; color: @colortheme_sidebar-left-fg;
} }
@ -434,10 +434,8 @@
#cp-app-drive-content-container { #cp-app-drive-content-container {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
flex: 1; flex: 1 1 100%;
// Needed to avoid the folder's path to overflows min-width: 0;
// https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
// min-width: 0;
} }
#cp-app-drive-content { #cp-app-drive-content {
box-sizing: border-box; box-sizing: border-box;
@ -486,33 +484,9 @@
#cp-app-drive-content-folder { #cp-app-drive-content-folder {
li { li {
&.cp-app-drive-search-result { &.cp-app-drive-search-result {
border-bottom: 1px solid @drive_info-box-border;
display: block;
&:hover {
background-color: initial;
}
table {
width: 100%;
.cp-app-drive-search-label2 {
width: 150px;
font-size: 15px;
text-align: right;
padding-right: 15px;
}
.cp-app-drive-search-opendir {
display: flex; display: flex;
justify-content: space-between; height: 2 * @variables_bar-height;
a {
cursor: pointer;
color: #41b7d8;
&:hover {
color: #014c8c;
text-decoration: underline;
}
}
}
.cp-app-drive-search-path { .cp-app-drive-search-path {
font-style: italic;
.cp-app-drive-path-inner { .cp-app-drive-path-inner {
display: flex; display: flex;
flex-flow: row-reverse wrap-reverse; flex-flow: row-reverse wrap-reverse;
@ -525,22 +499,16 @@
word-wrap: break-word; word-wrap: break-word;
max-width: 100%; max-width: 100%;
} }
} .cp-app-drive-path-clickable {
}
.cp-app-drive-search-title {
font-weight: bold;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: @drive_hover; background-color: #eee;
}
} }
.cp-app-drive-search-col2 {
width: 250px;
} }
td.cp-app-drive-search-icon {
width: 50px;
font-size: 40px;
} }
font-size: 12px;
line-height: 16px;
color: @drive_table-header-fg;
} }
} }
&.cp-app-drive-tags-list { &.cp-app-drive-tags-list {
@ -637,22 +605,72 @@
display: none; display: none;
} }
// Make it act as a table! // Make it act as a table!
padding-left: 20px; padding-left: 10px;
ul { ul {
display: table;
width: 100%; width: 100%;
padding: 0px 10px;
} }
li { li {
display: table-row; display: flex;
input { input {
border: 1px solid #ddd; border: 1px solid #ddd;
margin: 0; margin: 0;
padding: 0 4px; padding: 0 4px;
flex: 1;
min-width: 0;
} }
&> span { &> span {
padding: 0 5px; padding: 0 5px;
display: table-cell; display: inline-block;
white-space: nowrap;
&:first-child, &.cp-icon {
min-width: 20px;
text-align: center;
font-size: 18px;
line-height: 32px;
padding: 0;
}
&.cp-app-drive-element-name {
flex: 1;
min-width: 0;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
}
&.cp-app-drive-element-state {
min-width: 40px;
text-align: right;
display: flex;
align-items: center;
justify-content: end;
height: @variables_bar-height;
.fa, .cptools {
&:not(:last-child) {
margin-right: 2px;
}
}
}
&.cp-app-drive-element-list {
width: 120px;
}
&.cp-app-drive-element-sort {
display: none;
.dropdown_main();
.cp-dropdown-content a {
display: block !important;
.sortdesc {
order: 2;
}
}
button {
color: inherit;
background: none;
border: none;
.fa {
margin-right: 5px;
}
}
}
} }
&:not(.cp-app-drive-element-header) { &:not(.cp-app-drive-element-header) {
height: @variables_bar-height; height: @variables_bar-height;
@ -663,6 +681,7 @@
height: 1.5 * @variables_bar-height; height: 1.5 * @variables_bar-height;
line-height: 1.5 * @variables_bar-height; line-height: 1.5 * @variables_bar-height;
span { span {
line-height: 1.5 * @variables_bar-height;
position: absolute; position: absolute;
} }
} }
@ -674,14 +693,11 @@
text-align: left; text-align: left;
} }
&.sortasc, &.sortdesc { &.sortasc, &.sortdesc {
float: right; margin-right: 3px;
} }
} }
&> span { &> span {
padding: 15px 5px; padding: 14px 5px;
&.cp-app-drive-sort-active {
font-weight: bold;
}
&.cp-app-drive-sort-clickable { &.cp-app-drive-sort-clickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -696,28 +712,29 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
&.cp-app-drive-element-state {
.fa, .cptools {
&:not(:last-child) {
margin-right: 5px;
} }
} }
@media screen and (max-width: 840px) {
.cp-app-drive-element-type, .cp-app-drive-element-filler {
display: none !important;
} }
&.cp-app-drive-content-icon, &.cp-app-drive-element-state, &.cp-icon {
width: 30px;
} }
&.cp-app-drive-element-type, &.cp-app-drive-element-atime, &.cp-app-drive-element-ctime {
width: 175px; @media screen and (max-width: 740px) {
.cp-app-drive-element-folders, .cp-app-drive-element-ctime {
display: none !important;
} }
&.cp-app-drive-element-title {
width: 250px;
@media screen and (max-width: 1200px) {
display: none;
} }
@media screen and (max-width: 670px) {
.cp-app-drive-element-files, .cp-app-drive-element-atime {
display: none !important;
} }
&.cp-app-drive-element-folders, &.cp-app-drive-element-files { .cp-app-drive-element-header .cp-app-drive-element-state {
width: 150px; display: none !important;
} }
.cp-app-drive-element-sort {
display: block !important;
} }
} }
} }

167
www/common/drive-ui.js
Unescape Escape View File

@ -698,7 +698,6 @@ define([
} }
}; };
$content.on('mousedown', function (e) { $content.on('mousedown', function (e) {
if (currentPath[0] === SEARCH) { return; }
if (e.which !== 1) { return; } if (e.which !== 1) { return; }
$content.focus(); $content.focus();
sel.down = true; sel.down = true;
@ -1931,7 +1930,6 @@ define([
if (thumbsUrls[element]) { if (thumbsUrls[element]) {
var img = new Image(); var img = new Image();
img.src = thumbsUrls[element]; img.src = thumbsUrls[element];
$element.find('.cp-icon').addClass('cp-app-drive-element-list');
$element.prepend(img); $element.prepend(img);
$(img).addClass('cp-app-drive-element-grid cp-app-drive-element-thumbnail'); $(img).addClass('cp-app-drive-element-grid cp-app-drive-element-thumbnail');
$(img).attr("draggable", false); $(img).attr("draggable", false);
@ -1940,7 +1938,7 @@ define([
common.displayThumbnail(href || data.roHref, data.channel, data.password, $element, function ($thumb) { common.displayThumbnail(href || data.roHref, data.channel, data.password, $element, function ($thumb) {
// Called only if the thumbnail exists // Called only if the thumbnail exists
// Remove the .hide() added by displayThumnail() because it hides the icon in list mode too // Remove the .hide() added by displayThumnail() because it hides the icon in list mode too
$element.find('.cp-icon').removeAttr('style').addClass('cp-app-drive-element-list'); $element.find('.cp-icon').removeAttr('style');
$thumb.addClass('cp-app-drive-element-grid cp-app-drive-element-thumbnail'); $thumb.addClass('cp-app-drive-element-grid cp-app-drive-element-thumbnail');
$thumb.attr("draggable", false); $thumb.attr("draggable", false);
thumbsUrls[element] = $thumb[0].src; thumbsUrls[element] = $thumb[0].src;
@ -1998,10 +1996,13 @@ define([
var $files = $('<span>', { var $files = $('<span>', {
'class': 'cp-app-drive-element-files cp-app-drive-element-list' 'class': 'cp-app-drive-element-files cp-app-drive-element-list'
}).text(files); }).text(files);
var $filler = $('<span>', {
'class': 'cp-app-drive-element-filler cp-app-drive-element-list'
});
if (getViewMode() === 'grid') { if (getViewMode() === 'grid') {
$span.attr('title', key); $span.attr('title', key);
} }
$span.append($name).append($state).append($subfolders).append($files); $span.append($name).append($state).append($subfolders).append($files).append($filler);
}; };
// This is duplicated in cryptpad-common, it should be unified // This is duplicated in cryptpad-common, it should be unified
@ -2271,7 +2272,8 @@ define([
if (idx < path.length - 1) { if (idx < path.length - 1) {
if (!noStyle) { if (!noStyle) {
$span.addClass('cp-app-drive-path-clickable'); $span.addClass('cp-app-drive-path-clickable');
$span.click(function () { $span.click(function (e) {
e.stopPropagation();
var sliceEnd = idx + 1; var sliceEnd = idx + 1;
if (isTrash && idx === 1) { sliceEnd = 4; } // Make sure we don't show the index or 'element' and 'path' if (isTrash && idx === 1) { sliceEnd = 4; } // Make sure we don't show the index or 'element' and 'path'
APP.displayDirectory(path.slice(0, sliceEnd)); APP.displayDirectory(path.slice(0, sliceEnd));
@ -2714,7 +2716,7 @@ define([
value = ''; value = '';
} }
} else { } else {
['cp-app-drive-element-title', 'cp-app-drive-element-type', ['cp-app-drive-element-type',
'cp-app-drive-element-atime', 'cp-app-drive-element-ctime'].some(function (c) { 'cp-app-drive-element-atime', 'cp-app-drive-element-ctime'].some(function (c) {
if ($span.hasClass(c)) { if ($span.hasClass(c)) {
var nValue = c.replace(/cp-app-drive-element-/, ''); var nValue = c.replace(/cp-app-drive-element-/, '');
@ -2744,6 +2746,34 @@ define([
$list.find('.cp-app-drive-sort-foldername').addClass('cp-app-drive-sort-active').prepend($icon); $list.find('.cp-app-drive-sort-foldername').addClass('cp-app-drive-sort-active').prepend($icon);
} }
}; };
Messages.fm_sort = "Sort"; // XXX
var getSortDropdown = function () {
var $fhSort = $(h('span.cp-dropdown-container.cp-app-drive-element-sort.cp-app-drive-sort-clickable'));
var options = [{
tag: 'a',
attributes: {'class': 'cp-app-drive-element-type'},
content: Messages.fm_type
},{
tag: 'a',
attributes: {'class': 'cp-app-drive-element-atime'},
content: Messages.fm_lastAccess
},{
tag: 'a',
attributes: {'class': 'cp-app-drive-element-ctime'},
content: Messages.fm_creation
}];
var dropdownConfig = {
text: '', // Button initial text
options: options, // Entries displayed in the menu
container: $fhSort,
left: true,
common: common
};
var $sortBlock = UIElements.createDropdown(dropdownConfig);
$sortBlock.find('button').append(h('span.fa.fa-sort-amount-desc')).append(h('span', Messages.fm_sort));
$sortBlock.on('click', 'a', onSortByClick);
return $fhSort;
};
var getFolderListHeader = function () { var getFolderListHeader = function () {
var $fohElement = $('<li>', { var $fohElement = $('<li>', {
'class': 'cp-app-drive-element-header cp-app-drive-element-list' 'class': 'cp-app-drive-element-header cp-app-drive-element-list'
@ -2754,6 +2784,7 @@ define([
'class': 'cp-app-drive-element-name cp-app-drive-sort-foldername ' + 'class': 'cp-app-drive-element-name cp-app-drive-sort-foldername ' +
'cp-app-drive-sort-clickable' 'cp-app-drive-sort-clickable'
}).text(Messages.fm_folderName).click(onSortByClick); }).text(Messages.fm_folderName).click(onSortByClick);
var $state = $('<span>', {'class': 'cp-app-drive-element-state'}); var $state = $('<span>', {'class': 'cp-app-drive-element-state'});
var $subfolders = $('<span>', { var $subfolders = $('<span>', {
'class': 'cp-app-drive-element-folders cp-app-drive-element-list' 'class': 'cp-app-drive-element-folders cp-app-drive-element-list'
@ -2761,8 +2792,11 @@ define([
var $files = $('<span>', { var $files = $('<span>', {
'class': 'cp-app-drive-element-files cp-app-drive-element-list' 'class': 'cp-app-drive-element-files cp-app-drive-element-list'
}).text(Messages.fm_numberOfFiles); }).text(Messages.fm_numberOfFiles);
var $filler = $('<span>', {
'class': 'cp-app-drive-element-filler cp-app-drive-element-list'
});
$fohElement.append($fhIcon).append($name).append($state) $fohElement.append($fhIcon).append($name).append($state)
.append($subfolders).append($files); .append($subfolders).append($files).append($filler);
addFolderSortIcon($fohElement); addFolderSortIcon($fohElement);
return $fohElement; return $fohElement;
}; };
@ -2778,30 +2812,33 @@ define([
$list.find('.' + classSorted).addClass('cp-app-drive-sort-active').prepend($icon); $list.find('.' + classSorted).addClass('cp-app-drive-sort-active').prepend($icon);
} }
}; };
var getFileListHeader = function () { var getFileListHeader = function (clickable) {
var $fihElement = $('<li>', { var $fihElement = $('<li>', {
'class': 'cp-app-drive-element-header cp-app-drive-element-list' 'class': 'cp-app-drive-element-header cp-app-drive-element-list'
}); });
var clickCls = clickable ? 'cp-app-drive-sort-clickable ' : '';
var onClick = clickable ? onSortByClick : function () {};
//var $fihElement = $('<span>', {'class': 'element'}).appendTo($fileHeader); //var $fihElement = $('<span>', {'class': 'element'}).appendTo($fileHeader);
var $fhIcon = $('<span>', {'class': 'cp-app-drive-content-icon'}); var $fhIcon = $('<span>', {'class': 'cp-app-drive-content-icon'});
var $fhName = $('<span>', { var $fhName = $('<span>', {
'class': 'cp-app-drive-element-name cp-app-drive-sort-filename ' + 'class': 'cp-app-drive-element-name cp-app-drive-sort-filename ' + clickCls
'cp-app-drive-sort-clickable' }).text(Messages.fm_fileName).click(onClick);
}).text(Messages.fm_fileName).click(onSortByClick); var $fhSort = clickable ? getSortDropdown() : undefined;
var $fhState = $('<span>', {'class': 'cp-app-drive-element-state'}); var $fhState = $('<span>', {'class': 'cp-app-drive-element-state'});
var $fhType = $('<span>', { var $fhType = $('<span>', {
'class': 'cp-app-drive-element-type cp-app-drive-sort-clickable' 'class': 'cp-app-drive-element-type cp-app-drive-element-list ' + clickCls
}).text(Messages.fm_type).click(onSortByClick); }).text(Messages.fm_type).click(onClick);
var $fhAdate = $('<span>', { var $fhAdate = $('<span>', {
'class': 'cp-app-drive-element-atime cp-app-drive-sort-clickable' 'class': 'cp-app-drive-element-atime cp-app-drive-element-list ' + clickCls
}).text(Messages.fm_lastAccess).click(onSortByClick); }).text(Messages.fm_lastAccess).click(onClick);
var $fhCdate = $('<span>', { var $fhCdate = $('<span>', {
'class': 'cp-app-drive-element-ctime cp-app-drive-sort-clickable' 'class': 'cp-app-drive-element-ctime cp-app-drive-element-list ' + clickCls
}).text(Messages.fm_creation).click(onSortByClick); }).text(Messages.fm_creation).click(onClick);
// If displayTitle is false, it means the "name" is the title, so do not display the "name" header // If displayTitle is false, it means the "name" is the title, so do not display the "name" header
$fihElement.append($fhIcon).append($fhName).append($fhState).append($fhType); $fihElement.append($fhIcon).append($fhName).append($fhSort).append($fhState).append($fhType);
$fihElement.append($fhAdate).append($fhCdate); $fihElement.append($fhAdate).append($fhCdate);
addFileSortIcon($fihElement); if (clickable) { addFileSortIcon($fihElement); }
return $fihElement; return $fihElement;
}; };
@ -2989,7 +3026,7 @@ define([
var displayHrefArray = function ($container, rootName, draggable) { var displayHrefArray = function ($container, rootName, draggable) {
var unsorted = files[rootName]; var unsorted = files[rootName];
if (unsorted.length) { if (unsorted.length) {
var $fileHeader = getFileListHeader(false); var $fileHeader = getFileListHeader(true);
$container.append($fileHeader); $container.append($fileHeader);
} }
var keys = unsorted; var keys = unsorted;
@ -3044,7 +3081,7 @@ define([
} }
var allfiles = files[FILES_DATA]; var allfiles = files[FILES_DATA];
if (allfiles.length === 0) { return; } if (allfiles.length === 0) { return; }
var $fileHeader = getFileListHeader(false); var $fileHeader = getFileListHeader(true);
$container.append($fileHeader); $container.append($fileHeader);
var keys = manager.getFiles([FILES_DATA]); var keys = manager.getFiles([FILES_DATA]);
var sortedFiles = sortElements(false, [FILES_DATA], keys, APP.store[SORT_FILE_BY], !getSortFileDesc(), true); var sortedFiles = sortElements(false, [FILES_DATA], keys, APP.store[SORT_FILE_BY], !getSortFileDesc(), true);
@ -3108,74 +3145,42 @@ define([
}; };
var displaySearch = function ($list, value) { var displaySearch = function ($list, value) {
getFileListHeader(false).appendTo($list);
$list.closest('#cp-app-drive-content-folder').addClass('cp-app-drive-content-list');
var filesList = manager.search(value); var filesList = manager.search(value);
filesList.forEach(function (r) { filesList.forEach(function (r) {
// if r.id === null, then it's a folder, not a file // if r.id === null, then it's a folder, not a file
r.paths.forEach(function (path) { r.paths.forEach(function (path) {
if (!r.inSharedFolder && if (!r.inSharedFolder &&
APP.hideDuplicateOwned && manager.isDuplicateOwned(path)) { return; } APP.hideDuplicateOwned && manager.isDuplicateOwned(path)) { return; }
var href = r.data.href || r.data.roHref; var _path = path.slice();
var parsed = Hash.parsePadUrl(href); var key = path.pop();
var $table = $('<table>'); var root = manager.find(path);
var $icon = $('<td>', {'rowspan': '3', 'class': 'cp-app-drive-search-icon'}); var isFolder = manager.isFolder(root[key]);
var $title = $('<td>', { var $element = createElement(path, key, root, isFolder);
'class': 'cp-app-drive-search-col1 cp-app-drive-search-title' $element.addClass('cp-app-drive-element-notrash cp-app-drive-search-result');
}).text(r.data.title); $element.off('contextmenu');
if (manager.isPathIn(path, ['hrefArray'])) { $element.contextmenu(openContextMenu('default'));
path.pop(); $element.data('context', 'default');
path.push(r.data.title); if (isFolder) {
} $element.find('.cp-app-drive-element-list').css({
var $path = $('<td>', { visibility: 'hidden'
'class': 'cp-app-drive-search-col1 cp-app-drive-search-path' }).text('');
}); $element.find('.cp-app-drive-element-folders').css({
createTitle($path, path, true); visibility: ''
var $typeName = $('<td>', {'class': 'cp-app-drive-search-label2'}).text(Messages.fm_type); }).text(Messages.fm_folder);
var $type = $('<td>', {'class': 'cp-app-drive-search-col2'});
var $atimeName = $('<td>', {'class': 'cp-app-drive-search-label2'});
var $atime = $('<td>', {'class': 'cp-app-drive-search-col2'});
var $ctimeName = $('<td>', {'class': 'cp-app-drive-search-label2'});
var $ctime = $('<td>', {'class': 'cp-app-drive-search-col2'});
var $openDir = $('<td>', {'class': 'cp-app-drive-search-opendir'});
if (r.id) {
$icon.append(getFileIcon(r.id));
$type.text(Messages.type[parsed.type] || parsed.type);
$title.click(function () {
openFile(r.id);
});
$atimeName.text(Messages.fm_lastAccess);
$atime.text(new Date(r.data.atime).toLocaleString());
$ctimeName.text(Messages.fm_creation);
$ctime.text(new Date(r.data.ctime).toLocaleString());
var parentPath = path.slice();
if (parentPath) {
$('<a>').text(Messages.fm_openParent).click(function (e) {
e.preventDefault();
if (manager.isInTrashRoot(parentPath)) { parentPath = [TRASH]; }
else { parentPath.pop(); }
APP.displayDirectory(parentPath);
APP.selectedFiles = path.slice(-1);
}).appendTo($openDir);
}
$('<a>').text(Messages.fc_prop).click(function () {
APP.getProperties(r.id, function (e) {
if (e) { return void logError(e); }
});
}).appendTo($openDir);
} }
else {
$icon.append($folderIcon.clone()); if (manager.isPathIn(_path, ['hrefArray'])) {
$type.text(Messages.fm_folder); _path.pop();
$('<a>').text(Messages.fc_open).click(function (e) { _path.push(r.data.title);
e.preventDefault();
APP.displayDirectory(path);
}).appendTo($openDir);
} }
var $path = $('<span>', {
'class': 'cp-app-drive-search-path'
}).appendTo($element.find('.cp-app-drive-element-name'));
createTitle($path, _path);
// rows 1-3 $list.append($element);
$('<tr>').append($icon).append($title).append($typeName).append($type).appendTo($table);
$('<tr>').append($path).append($atimeName).append($atime).appendTo($table);
$('<tr>').append($openDir).append($ctimeName).append($ctime).appendTo($table);
$('<li>', {'class':'cp-app-drive-search-result'}).append($table).appendTo($list);
}); });
}); });
}; };
@ -3259,7 +3264,7 @@ define([
var displayOwned = function ($container) { var displayOwned = function ($container) {
var list = manager.getOwnedPads(); var list = manager.getOwnedPads();
if (list.length === 0) { return; } if (list.length === 0) { return; }
var $fileHeader = getFileListHeader(false); var $fileHeader = getFileListHeader(true);
$container.append($fileHeader); $container.append($fileHeader);
var sortedFiles = sortElements(false, false, list, APP.store[SORT_FILE_BY], !getSortFileDesc(), true); var sortedFiles = sortElements(false, false, list, APP.store[SORT_FILE_BY], !getSortFileDesc(), true);
sortedFiles.forEach(function (id) { sortedFiles.forEach(function (id) {

Write Preview
Loading…
Cancel
Save