diff --git a/www/drive/app-drive.less b/www/drive/app-drive.less index 421950730..2abda3f70 100644 --- a/www/drive/app-drive.less +++ b/www/drive/app-drive.less @@ -861,37 +861,58 @@ width: auto; overflow: hidden; white-space: nowrap; - display: flex; - flex-flow: row-reverse; flex-shrink: 1; min-width: 50px; max-width: 100%; text-align: left; - .cp-app-drive-path-element { - display: inline-block; - height: @variables_bar-height; - line-height: @variables_bar-height; - font-size: @colortheme_app-font-size; - padding: 0 5px; - border: 0; - background: darken(@colortheme_drive-bg, 7%); - color: @colortheme_drive-color; - box-sizing: border-box; - transition: all 0.15s; - &.cp-app-drive-path-separator { - color: #ccc; - } - &:hover { - &:not(.cp-app-drive-path-separator) { - background-color: darken(@colortheme_drive-bg, 15%); - text-decoration: underline; - cursor: pointer; + 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: darken(@colortheme_drive-bg, 7%); + color: @colortheme_drive-color; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + transition: all 0.15s; + + &:first-child { + flex-shrink: 1; + } + + &.cp-app-drive-path-separator { + color: #ccc; } - & ~ .cp-app-drive-path-element { - background-color: darken(@colortheme_drive-bg, 15%); + + &.cp-app-drive-path-collapse { + position: relative; } - & ~ .cp-app-drive-path-element:not(.cp-app-drive-path-separator) { - text-decoration: underline; + + &:hover { + &:not(.cp-app-drive-path-separator) { + background-color: darken(@colortheme_drive-bg, 15%); + text-decoration: underline; + cursor: pointer; + } + & ~ .cp-app-drive-path-element { + background-color: darken(@colortheme_drive-bg, 15%); + } + & ~ .cp-app-drive-path-element:not(.cp-app-drive-path-separator) { + text-decoration: underline; + } } } } diff --git a/www/drive/inner.js b/www/drive/inner.js index 43b351690..ae1d8350f 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -1610,6 +1610,60 @@ define([ } return title; }; */ + + var drivePathOverflowing = function () { + var $container = $(".cp-app-drive-path"); + if ($container.length) { + $container.css("overflow", "hidden"); + var overflown = $container[0].scrollWidth > $container[0].clientWidth; + $container.css("overflow", ""); + return overflown; + } + }; + + var collapseDrivePath = function () { + var $container = $(".cp-app-drive-path-inner"); + var $spanCollapse = $(".cp-app-drive-path-collapse"); + $spanCollapse.css("display", "none"); + + var $pathElements = $container.find(".cp-app-drive-path-element"); + $pathElements.not($spanCollapse).css("display", ""); + + if (drivePathOverflowing()) { + var collapseLevel = 0; + var removeOverflowElement = function () { + if (drivePathOverflowing()) { + if ($pathElements.length === 3) { + return false; + } + collapseLevel++; + if ($($pathElements.get(-2)).is(".cp-app-drive-path-separator")) { + $($pathElements.get(-2)).css("display", "none"); + $pathElements = $pathElements.not($pathElements.get(-2)); + } + $($pathElements.get(-2)).css("display", "none"); + $pathElements = $pathElements.not($pathElements.get(-2)); + return true; + } + }; + + while (removeOverflowElement()) {} + $spanCollapse.css("display", ""); + removeOverflowElement(); + + $spanCollapse.attr("title", getLastOpenedFolder().slice(0, collapseLevel).join(" / ").replace("root", ROOT_NAME)); + $spanCollapse[0].onclick = function () { + APP.displayDirectory(getLastOpenedFolder().slice(0, collapseLevel)); + }; + } + }; + + window.addEventListener("resize", collapseDrivePath); + var treeResizeObserver = new MutationObserver(collapseDrivePath); + treeResizeObserver.observe($("#cp-app-drive-tree")[0], {"attributes": true}); + var toolbarButtonAdditionObserver = new MutationObserver(collapseDrivePath); + $(function () { toolbarButtonAdditionObserver.observe($("#cp-app-drive-toolbar")[0], {"childList": true, "subtree": true}); }); + var getPrettyName = function (name) { var pName; @@ -1639,6 +1693,9 @@ define([ var el = isVirtual ? undefined : manager.find(path); path = path[0] === SEARCH ? path.slice(0,1) : path; + var $inner = $('
', {'class': 'cp-app-drive-path-inner'}); + $container.prepend($inner); + var skipNext = false; // When encountering a shared folder, skip a key in the path path.forEach(function (p, idx) { if (skipNext) { skipNext = false; return; } @@ -1671,13 +1728,21 @@ define([ var $span2 = $('', { 'class': 'cp-app-drive-path-element cp-app-drive-path-separator' }).text(' / '); - $container.prepend($span2); + $inner.prepend($span2); } - - $span.text(name).prependTo($container); + $span.text(name).prependTo($inner); }); + + var $spanCollapse = $('', { + 'class': 'cp-app-drive-path-element cp-app-drive-path-collapse' + }).text(' ... '); + $inner.append($spanCollapse); + + collapseDrivePath(); }; + + var createInfoBox = function (path) { var $box = $('
', {'class': 'cp-app-drive-content-info-box'}); var msg;