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

Fix drive UI issues and add path

Browse Source
pull/1/head
yflory 5 years ago
parent 1433eed246
commit e68ad7cf5f
2 changed files with 124 additions and 80 deletions
Show Stats Download Patch File Download Diff File

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

@ -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;

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

@ -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); }

Write Preview
Loading…
Cancel
Save