Fix drive UI issues and add path
yflory
parent
1433eed246
commit
e68ad7cf5f
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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); }
|
||||
|
|
|
|||
Loading…
Reference in New Issue