From e50f554774cd65ea023e46286282c1c70773c46b Mon Sep 17 00:00:00 2001 From: ClemDee Date: Tue, 25 Jun 2019 13:37:20 +0200 Subject: [PATCH 1/6] Add Dropdown-submenu (beta) --- .../src/less2/include/contextmenu.less | 13 +++++++ www/drive/inner.js | 39 +++++++++++++++---- 2 files changed, 44 insertions(+), 8 deletions(-) diff --git a/customize.dist/src/less2/include/contextmenu.less b/customize.dist/src/less2/include/contextmenu.less index 2063a239e..30a9f7d98 100644 --- a/customize.dist/src/less2/include/contextmenu.less +++ b/customize.dist/src/less2/include/contextmenu.less @@ -19,6 +19,19 @@ } } } + .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 fb9bd4063..b38aa78a3 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,10 +323,22 @@ 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', 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-download.dropdown-item', { 'tabindex': '-1', 'data-icon': faDownload, @@ -423,6 +435,17 @@ define([ } $(el).prepend($icon); }); + $(menu).find(".dropdown-submenu").each(function (i, el) { + var $el = $(el); + var $sub = $el.find(".dropdown-menu"); + $el.hover(function () { + setTimeout(function () { // wait for dom to update + $sub.toggleClass("left", $el.offset().left + $el.outerWidth() + $sub.outerWidth() > $(window).width()); + }); + }, function () { + $sub.removeClass("left"); + }); + }); return $(menu); }; From a6f56524237275c9456563f9a74b8e140f86939d Mon Sep 17 00:00:00 2001 From: ClemDee Date: Wed, 3 Jul 2019 13:52:10 +0200 Subject: [PATCH 2/6] 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(); From 299414432092b0d818d1ccc1bede033bdfbd19a8 Mon Sep 17 00:00:00 2001 From: ClemDee Date: Wed, 3 Jul 2019 13:54:15 +0200 Subject: [PATCH 3/6] Remove context-submenu tests --- www/drive/inner.js | 30 +----------------------------- 1 file changed, 1 insertion(+), 29 deletions(-) diff --git a/www/drive/inner.js b/www/drive/inner.js index 510eabbe1..185e59f0c 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -327,34 +327,6 @@ define([ '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, @@ -1115,7 +1087,7 @@ define([ show = ['newfolder', 'newsharedfolder', 'newdoc']; break; case 'tree': - show = ['open', 'openro', 'expandall', 'collapseall', 'color', 'download', 'share', 'rename', 'delete', 'deleteowned', 'removesf', 'properties', 'hashtag', 'subtest1', 'subtest2', 'subtest3']; + show = ['open', 'openro', 'expandall', 'collapseall', 'color', 'download', 'share', 'rename', 'delete', 'deleteowned', 'removesf', 'properties', 'hashtag']; break; case 'default': show = ['open', 'openro', 'share', 'openparent', 'delete', 'deleteowned', 'properties', 'hashtag']; From a63d62595cba08d24ea1742addc8676c31ef6efd Mon Sep 17 00:00:00 2001 From: ClemDee Date: Wed, 3 Jul 2019 13:55:30 +0200 Subject: [PATCH 4/6] Fix missing semicolon --- www/drive/inner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/drive/inner.js b/www/drive/inner.js index 185e59f0c..6df932070 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -1399,7 +1399,7 @@ define([ }); cb(); }; - if (paths.some(function (p) { return manager.comparePath(newPath, p) })) { return void cb(); } + if (paths.some(function (p) { return manager.comparePath(newPath, p); })) { return void cb(); } manager.move(paths, newPath, newCb, copy); }; // Delete paths from the drive and/or shared folders (without moving them to the trash) From cd8c3c6b31926398f0ce1e5af2a23803e777f9b2 Mon Sep 17 00:00:00 2001 From: ClemDee Date: Wed, 3 Jul 2019 15:19:07 +0200 Subject: [PATCH 5/6] Add collapse/expand-all icons --- www/drive/inner.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/www/drive/inner.js b/www/drive/inner.js index 6df932070..f1350414b 100644 --- a/www/drive/inner.js +++ b/www/drive/inner.js @@ -77,6 +77,8 @@ define([ var faFolderOpen = 'cptools-folder-open'; var faSharedFolder = 'cptools-shared-folder'; var faSharedFolderOpen = 'cptools-shared-folder-open'; + var faExpandAll = 'fa-plus-square-o'; + var faCollapseAll = 'fa-minus-square-o'; var faShared = 'fa-shhare-alt'; var faReadOnly = 'fa-eye'; var faRename = 'fa-pencil'; @@ -316,11 +318,11 @@ define([ $separator.clone()[0], h('li', h('a.cp-app-drive-context-expandall.dropdown-item', { 'tabindex': '-1', - 'data-icon': "expandAll", + 'data-icon': faExpandAll, }, Messages.fc_expandAll)), h('li', h('a.cp-app-drive-context-collapseall.dropdown-item', { 'tabindex': '-1', - 'data-icon': "collapseAll", + 'data-icon': faCollapseAll, }, Messages.fc_collapseAll)), $separator.clone()[0], h('li', h('a.cp-app-drive-context-color.dropdown-item.cp-app-drive-context-editable', { From 51b739bb8de3a170b0accd353bf9f1e82cc07498 Mon Sep 17 00:00:00 2001 From: ClemDee Date: Thu, 4 Jul 2019 13:46:13 +0200 Subject: [PATCH 6/6] Fix contextmenu icons width --- customize.dist/src/less2/include/contextmenu.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/customize.dist/src/less2/include/contextmenu.less b/customize.dist/src/less2/include/contextmenu.less index f223be85c..8b1ef8c21 100644 --- a/customize.dist/src/less2/include/contextmenu.less +++ b/customize.dist/src/less2/include/contextmenu.less @@ -22,7 +22,7 @@ } } .dropdown-toggle { - margin-left: 10px; + margin-left: 1rem; } .dropdown-menu { top: -0.7rem; @@ -37,6 +37,7 @@ .fa, .cptools { margin-right: 1rem; color: @colortheme_context-menu-icon-color; + width: 16px; } } }