From a6f56524237275c9456563f9a74b8e140f86939d Mon Sep 17 00:00:00 2001 From: ClemDee Date: Wed, 3 Jul 2019 13:52:10 +0200 Subject: [PATCH] Add dropdown submenu --- .../src/less2/include/contextmenu.less | 34 ++++---- www/drive/inner.js | 77 +++++++++++++------ 2 files changed, 76 insertions(+), 35 deletions(-) diff --git a/customize.dist/src/less2/include/contextmenu.less b/customize.dist/src/less2/include/contextmenu.less index 30a9f7d98..f223be85c 100644 --- a/customize.dist/src/less2/include/contextmenu.less +++ b/customize.dist/src/less2/include/contextmenu.less @@ -11,6 +11,27 @@ li { padding: 0; font-size: @colortheme_app-font-size; + &.dropdown-submenu { + position: relative; + &> a { + cursor: default; + // reset bootstrap active style + &:active { + background: inherit; + color: inherit; + } + } + .dropdown-toggle { + margin-left: 10px; + } + .dropdown-menu { + top: -0.7rem; + left: 100%; + &.left { + left: -10rem; + } + } + } a { cursor: pointer; .fa, .cptools { @@ -19,19 +40,6 @@ } } } - .dropdown-submenu { - position: relative; - & .dropdown-menu { - top: -0.6rem; - left: 100%; - &.left { - left: -10rem; - } - } - &:hover .dropdown-menu { - display: block; - } - } .cp-app-drive-context-noAction { font-style: italic; color: #aaa; diff --git a/www/drive/inner.js b/www/drive/inner.js index b38aa78a3..510eabbe1 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -305,10 +305,10 @@ define([ 'style': 'display:block;position:static;margin-bottom:5px;' }, [ h('span.cp-app-drive-context-noAction.dropdown-item.disabled', Messages.fc_noAction || "No action possible"), -// h('li', h('a.cp-app-drive-context-open.dropdown-item', { -// 'tabindex': '-1', -// 'data-icon': faFolderOpen, -// }, Messages.fc_open)), + h('li', h('a.cp-app-drive-context-open.dropdown-item', { + 'tabindex': '-1', + 'data-icon': faFolderOpen, + }, Messages.fc_open)), h('li', h('a.cp-app-drive-context-openro.dropdown-item', { 'tabindex': '-1', 'data-icon': faReadOnly, @@ -323,22 +323,38 @@ define([ 'data-icon': "collapseAll", }, Messages.fc_collapseAll)), $separator.clone()[0], -// h('li', h('a.cp-app-drive-context-color.dropdown-item.cp-app-drive-context-editable', { -// 'tabindex': '-1', -// 'data-icon': faColor, -// }, Messages.fc_color)), - h('li.dropdown-submenu', [ - h('a.cp-app-drive-context-color.dropdown-item.dropdown-toggle', { - 'tabindex': '-1', - 'data-icon': faColor, - }, Messages.fc_color), - h("ul.dropdown-menu", [ - h('li', h('a.cp-app-drive-context-open.dropdown-item', { - 'tabindex': '-1', - 'data-icon': faFolderOpen, - }, Messages.fc_open)) - ]) - ]), + h('li', h('a.cp-app-drive-context-color.dropdown-item.cp-app-drive-context-editable', { + 'tabindex': '-1', + 'data-icon': faColor, + }, Messages.fc_color)), +// h('li.dropdown-submenu', [ +// h('a.cp-app-drive-context-test.dropdown-item', { +// 'tabindex': '-1', +// 'data-icon': faFolderOpen, +// }, "TEST"), +// h("ul.dropdown-menu", [ +// h('li', h('a.cp-app-drive-context-subtest1.dropdown-item', { +// 'tabindex': '-1', +// 'data-icon': faFolderOpen, +// }, "Sub test 1")), +// h('li.dropdown-submenu', [ +// h('a.cp-app-drive-context-test.dropdown-item', { +// 'tabindex': '-1', +// 'data-icon': faFolderOpen, +// }, "TEST"), +// h("ul.dropdown-menu", [ +// h('li', h('a.cp-app-drive-context-subtest2.dropdown-item', { +// 'tabindex': '-1', +// 'data-icon': faFolderOpen, +// }, "Sub test 2")), +// h('li', h('a.cp-app-drive-context-subtest3.dropdown-item', { +// 'tabindex': '-1', +// 'data-icon': faFolderOpen, +// }, "Sub test 3")), +// ]), +// ]), +// ]), +// ]), h('li', h('a.cp-app-drive-context-download.dropdown-item', { 'tabindex': '-1', 'data-icon': faDownload, @@ -437,12 +453,18 @@ define([ }); $(menu).find(".dropdown-submenu").each(function (i, el) { var $el = $(el); - var $sub = $el.find(".dropdown-menu"); + var $a = $el.children().filter("a"); + var $sub = $el.find(".dropdown-menu").first(); + // Add submenu expand icon + $a.append(h("span.dropdown-toggle")); + // Show / hide submenu $el.hover(function () { setTimeout(function () { // wait for dom to update $sub.toggleClass("left", $el.offset().left + $el.outerWidth() + $sub.outerWidth() > $(window).width()); + $sub.show(); }); }, function () { + $sub.hide(); $sub.removeClass("left"); }); }); @@ -1093,7 +1115,7 @@ define([ show = ['newfolder', 'newsharedfolder', 'newdoc']; break; case 'tree': - show = ['open', 'openro', 'expandall', 'collapseall', 'color', 'download', 'share', 'rename', 'delete', 'deleteowned', 'removesf', 'properties', 'hashtag']; + show = ['open', 'openro', 'expandall', 'collapseall', 'color', 'download', 'share', 'rename', 'delete', 'deleteowned', 'removesf', 'properties', 'hashtag', 'subtest1', 'subtest2', 'subtest3']; break; case 'default': show = ['open', 'openro', 'share', 'openparent', 'delete', 'deleteowned', 'properties', 'hashtag']; @@ -1279,6 +1301,7 @@ define([ var $menu = $contextMenu; var showSep = false; var $lastVisibleSep = null; + // show / hide drop-down divider $menu.find(".dropdown-menu").children().each(function (i, el) { var $el = $(el); if ($el.is(".dropdown-divider")) { @@ -1291,6 +1314,16 @@ define([ } }); if (!showSep && $lastVisibleSep) { $lastVisibleSep.css("display", "none"); } // remove last divider if no options after + // show / hide submenus + $menu.find(".dropdown-submenu").each(function (i, el) { + var $el = $(el); + $el.find("li").each(function (i, li) { + if ($(li).css("display") !== "none") { + $(el).css("display", "block"); + return; + } + }); + }); $menu.css({ display: "block" }); if (APP.mobile()) { return; } var h = $menu.outerHeight();