dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix drive UI issues and add path

This commit is contained in:
yflory 2020-05-15 11:16:57 +02:00
parent 1433eed246
commit e68ad7cf5f
2 changed files with 124 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
customize.dist/src/less2/include/drive.less
View File

@ -273,6 +273,22 @@
display: flex;
flex-flow: column;
max-height: 100%;
position: relative;
.cp-close-button {
position: absolute;
cursor: pointer;
right: 5px;
top: 5px;
font-size: 18px;
padding: 3px;
margin: 0;
border: 0;
background-color: transparent;
outline: none;
&:hover {
color: #000;
}
}
.cp-app-drive-tree-categories-container {
flex: 1;
overflow: auto;
@ -733,6 +749,75 @@
}
}
}
.cp-app-drive-path {
width: 100%;
height: @variables_bar-height;
line-height: @variables_bar-height;
cursor: default;
width: auto;
overflow: hidden;
white-space: nowrap;
flex-shrink: 0;
min-width: 50px;
max-width: 100%;
text-align: left;
display: flex;
flex-direction: row;
.cp-app-drive-path-inner {
display: flex;
flex-flow: row-reverse;
flex-grow: 1;
justify-content: flex-end;
.cp-app-drive-path-element {
display: inline-block;
flex-shrink: 0;
max-width: 100%;
height: @variables_bar-height;
line-height: @variables_bar-height;
font-size: @colortheme_app-font-size;
padding: 0 5px;
border: 0;
//background: @colortheme_drive-bg-active;
color: @colortheme_drive-color;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.15s;
cursor: pointer;
&:first-child {
flex-shrink: 1;
}
&.cp-app-drive-path-separator {
color: #ccc;
cursor: default;
}
&.cp-app-drive-path-collapse {
position: relative;
}
&.cp-app-drive-element-droppable {
background-color: @drive_droppable-bg;
}
&:not(.cp-app-drive-element-droppable):hover {
&:not(.cp-app-drive-path-separator) {
//background-color: @colortheme_drive-bg-active;
text-decoration: underline;
}
& ~ .cp-app-drive-path-element {
//background-color: @colortheme_drive-bg-active;
}
& ~ .cp-app-drive-path-element:not(.cp-app-drive-path-separator) {
text-decoration: underline;
}
}
}
}
}
}
#cp-app-drive-content-folder {
@ -820,6 +905,7 @@
/* Toolbar */
// XXX remove, preserve drive path?
#cp-app-drive-toolbar {
background: @colortheme_drive-bg-light;
color: @colortheme_drive-color;
@ -931,74 +1017,6 @@
}
}
.cp-app-drive-path {
width: 100%;
height: @variables_bar-height;
line-height: @variables_bar-height;
cursor: default;
width: auto;
overflow: hidden;
white-space: nowrap;
flex-shrink: 1;
min-width: 50px;
max-width: 100%;
text-align: left;
display: flex;
flex-direction: row;
.cp-app-drive-path-inner {
display: flex;
flex-flow: row-reverse;
flex-grow: 1;
.cp-app-drive-path-element {
display: inline-block;
flex-shrink: 0;
max-width: 100%;
height: @variables_bar-height;
line-height: @variables_bar-height;
font-size: @colortheme_app-font-size;
padding: 0 5px;
border: 0;
background: @colortheme_drive-bg-active;
color: @colortheme_drive-color;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.15s;
cursor: pointer;
&:first-child {
flex-shrink: 1;
}
&.cp-app-drive-path-separator {
color: #ccc;
cursor: default;
}
&.cp-app-drive-path-collapse {
position: relative;
}
&.cp-app-drive-element-droppable {
background-color: @drive_droppable-bg;
}
&:not(.cp-app-drive-element-droppable):hover {
&:not(.cp-app-drive-path-separator) {
background-color: @colortheme_drive-bg-active;
text-decoration: underline;
}
& ~ .cp-app-drive-path-element {
background-color: @colortheme_drive-bg-active;
}
& ~ .cp-app-drive-path-element:not(.cp-app-drive-path-separator) {
text-decoration: underline;
}
}
}
}
}
.cp-app-drive-toolbar-filler {
flex: 1;

50
www/common/drive-ui.js
View File

@ -2229,13 +2229,6 @@ define([
var treeResizeObserver = new MutationObserver(collapseDrivePath);
treeResizeObserver.observe($("#cp-app-drive-tree")[0], {"attributes": true});
// XXX
/*
var toolbarButtonAdditionObserver = new MutationObserver(collapseDrivePath);
$(function () { toolbarButtonAdditionObserver.observe($("#cp-app-drive-toolbar")[0], {"childList": true, "subtree": true}); });
*/
// Create the title block with the "parent folder" button
var createTitle = function ($container, path, noStyle) {
if (!path || path.length === 0) { return; }
@ -2247,8 +2240,10 @@ define([
var el = isVirtual ? undefined : manager.find(path);
path = path[0] === SEARCH ? path.slice(0,1) : path;
var $outer = $('<div>', {'class': 'cp-app-drive-path'});
var $inner = $('<div>', {'class': 'cp-app-drive-path-inner'});
$container.prepend($inner);
$outer.append($inner);
$container.prepend($outer);
var skipNext = false; // When encountering a shared folder, skip a key in the path
path.forEach(function (p, idx) {
@ -2996,6 +2991,26 @@ define([
};
// Drive content toolbar
var checkCollapseButton = function () {
APP.$collapseButton.removeClass('cp-toolbar-button-active');
if (APP.$tree.is(':visible')) {
APP.$collapseButton.addClass('cp-toolbar-button-active');
}
};
var collapseTreeButton = function () {
Messages.drive_treeButton = "Files"; // XXX
APP.$collapseButton = APP.$collapseButton || common.createButton('', true, {
text: Messages.drive_treeButton,
name: 'files',
icon: 'fa-sitemap',
drawer: false,
}, function () {
APP.$tree.toggle();
checkCollapseButton();
});
checkCollapseButton();
APP.toolbar.$bottomL.append(APP.$collapseButton);
};
var createToolbar = function () {
var $toolbar = APP.toolbar.$bottom;
APP.toolbar.$bottomL.html('');
@ -3008,6 +3023,7 @@ define([
if (APP.$burnThisDrive) {
APP.toolbar.$bottomR.append(APP.$burnThisDrive);
}
collapseTreeButton();
return $toolbar;
};
@ -3494,7 +3510,11 @@ define([
LS.setLastOpenedFolder(path);
var $toolbar = createToolbar(path);
createToolbar(path);
if (inTrash || isInRoot) {
createTitle($content, path);
}
var $info = createInfoBox(path);
var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
@ -3532,9 +3552,6 @@ define([
createShareButton(sfId, APP.toolbar.$bottomL);
}
createTitle($toolbar.find('.cp-app-drive-path'), path); // XXX
if (APP.mobile()) {
var $context = $('<button>', {
id: 'cp-app-drive-toolbar-context-mobile'
@ -3838,6 +3855,15 @@ define([
var s = $categories.scrollTop() || 0;
$tree.html('');
$(h('button.fa.fa-times.cp-close-button', {
title: Messages.filePicker_close
})).click(function (e) {
e.stopPropagation();
$tree.hide();
checkCollapseButton();
}).appendTo($tree);
var $div = $('<div>', {'class': 'cp-app-drive-tree-categories-container'})
.appendTo($tree);
if (displayedCategories.indexOf(SEARCH) !== -1) { createCategory($div, SEARCH); }