From e68ad7cf5f2ac3a5e9136a303ac35e2e49204a91 Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 15 May 2020 11:16:57 +0200 Subject: [PATCH] Fix drive UI issues and add path --- customize.dist/src/less2/include/drive.less | 154 +++++++++++--------- www/common/drive-ui.js | 50 +++++-- 2 files changed, 124 insertions(+), 80 deletions(-) diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less index 623e2b88b..4cd8080c7 100644 --- a/customize.dist/src/less2/include/drive.less +++ b/customize.dist/src/less2/include/drive.less @@ -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; diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index ca0827d3a..567fee627 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -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 = $('
', {'class': 'cp-app-drive-path'}); var $inner = $('
', {'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 = $('
', {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 = $('