mirror of https://github.com/xwiki-labs/cryptpad
Fix drive UI issues and add path
This commit is contained in:
parent
1433eed246
commit
e68ad7cf5f
|
@ -273,6 +273,22 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
max-height: 100%;
|
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 {
|
.cp-app-drive-tree-categories-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: auto;
|
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 {
|
#cp-app-drive-content-folder {
|
||||||
|
@ -820,6 +905,7 @@
|
||||||
|
|
||||||
/* Toolbar */
|
/* Toolbar */
|
||||||
|
|
||||||
|
// XXX remove, preserve drive path?
|
||||||
#cp-app-drive-toolbar {
|
#cp-app-drive-toolbar {
|
||||||
background: @colortheme_drive-bg-light;
|
background: @colortheme_drive-bg-light;
|
||||||
color: @colortheme_drive-color;
|
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 {
|
.cp-app-drive-toolbar-filler {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
|
@ -2229,13 +2229,6 @@ define([
|
||||||
var treeResizeObserver = new MutationObserver(collapseDrivePath);
|
var treeResizeObserver = new MutationObserver(collapseDrivePath);
|
||||||
treeResizeObserver.observe($("#cp-app-drive-tree")[0], {"attributes": true});
|
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
|
// Create the title block with the "parent folder" button
|
||||||
var createTitle = function ($container, path, noStyle) {
|
var createTitle = function ($container, path, noStyle) {
|
||||||
if (!path || path.length === 0) { return; }
|
if (!path || path.length === 0) { return; }
|
||||||
|
@ -2247,8 +2240,10 @@ define([
|
||||||
var el = isVirtual ? undefined : manager.find(path);
|
var el = isVirtual ? undefined : manager.find(path);
|
||||||
path = path[0] === SEARCH ? path.slice(0,1) : 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'});
|
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
|
var skipNext = false; // When encountering a shared folder, skip a key in the path
|
||||||
path.forEach(function (p, idx) {
|
path.forEach(function (p, idx) {
|
||||||
|
@ -2996,6 +2991,26 @@ define([
|
||||||
};
|
};
|
||||||
|
|
||||||
// Drive content toolbar
|
// 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 createToolbar = function () {
|
||||||
var $toolbar = APP.toolbar.$bottom;
|
var $toolbar = APP.toolbar.$bottom;
|
||||||
APP.toolbar.$bottomL.html('');
|
APP.toolbar.$bottomL.html('');
|
||||||
|
@ -3008,6 +3023,7 @@ define([
|
||||||
if (APP.$burnThisDrive) {
|
if (APP.$burnThisDrive) {
|
||||||
APP.toolbar.$bottomR.append(APP.$burnThisDrive);
|
APP.toolbar.$bottomR.append(APP.$burnThisDrive);
|
||||||
}
|
}
|
||||||
|
collapseTreeButton();
|
||||||
return $toolbar;
|
return $toolbar;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -3494,7 +3510,11 @@ define([
|
||||||
|
|
||||||
LS.setLastOpenedFolder(path);
|
LS.setLastOpenedFolder(path);
|
||||||
|
|
||||||
var $toolbar = createToolbar(path);
|
createToolbar(path);
|
||||||
|
|
||||||
|
if (inTrash || isInRoot) {
|
||||||
|
createTitle($content, path);
|
||||||
|
}
|
||||||
var $info = createInfoBox(path);
|
var $info = createInfoBox(path);
|
||||||
|
|
||||||
var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
|
var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
|
||||||
|
@ -3532,9 +3552,6 @@ define([
|
||||||
createShareButton(sfId, APP.toolbar.$bottomL);
|
createShareButton(sfId, APP.toolbar.$bottomL);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
createTitle($toolbar.find('.cp-app-drive-path'), path); // XXX
|
|
||||||
|
|
||||||
if (APP.mobile()) {
|
if (APP.mobile()) {
|
||||||
var $context = $('<button>', {
|
var $context = $('<button>', {
|
||||||
id: 'cp-app-drive-toolbar-context-mobile'
|
id: 'cp-app-drive-toolbar-context-mobile'
|
||||||
|
@ -3838,6 +3855,15 @@ define([
|
||||||
var s = $categories.scrollTop() || 0;
|
var s = $categories.scrollTop() || 0;
|
||||||
|
|
||||||
$tree.html('');
|
$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'})
|
var $div = $('<div>', {'class': 'cp-app-drive-tree-categories-container'})
|
||||||
.appendTo($tree);
|
.appendTo($tree);
|
||||||
if (displayedCategories.indexOf(SEARCH) !== -1) { createCategory($div, SEARCH); }
|
if (displayedCategories.indexOf(SEARCH) !== -1) { createCategory($div, SEARCH); }
|
||||||
|
|
Loading…
Reference in New Issue