web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add dropdown submenu

Browse Source
This commit is contained in:
ClemDee 2019-07-03 13:52:10 +02:00
parent e50f554774
commit a6f5652423
2 changed files with 76 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
customize.dist/src/less2/include/contextmenu.less
View File

@ -11,6 +11,27 @@
li { li {
padding: 0; padding: 0;
font-size: @colortheme_app-font-size; 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 { a {
cursor: pointer; cursor: pointer;
.fa, .cptools { .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 { .cp-app-drive-context-noAction {
font-style: italic; font-style: italic;
color: #aaa; color: #aaa;

77
www/drive/inner.js
View File

@ -305,10 +305,10 @@ define([
'style': 'display:block;position:static;margin-bottom:5px;' '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('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', { h('li', h('a.cp-app-drive-context-open.dropdown-item', {
// 'tabindex': '-1', 'tabindex': '-1',
// 'data-icon': faFolderOpen, 'data-icon': faFolderOpen,
// }, Messages.fc_open)), }, Messages.fc_open)),
h('li', h('a.cp-app-drive-context-openro.dropdown-item', { h('li', h('a.cp-app-drive-context-openro.dropdown-item', {
'tabindex': '-1', 'tabindex': '-1',
'data-icon': faReadOnly, 'data-icon': faReadOnly,
@ -323,22 +323,38 @@ define([
'data-icon': "collapseAll", 'data-icon': "collapseAll",
}, Messages.fc_collapseAll)), }, Messages.fc_collapseAll)),
$separator.clone()[0], $separator.clone()[0],
// h('li', h('a.cp-app-drive-context-color.dropdown-item.cp-app-drive-context-editable', { h('li', h('a.cp-app-drive-context-color.dropdown-item.cp-app-drive-context-editable', {
// 'tabindex': '-1', 'tabindex': '-1',
// 'data-icon': faColor, 'data-icon': faColor,
// }, Messages.fc_color)), }, Messages.fc_color)),
h('li.dropdown-submenu', [ // h('li.dropdown-submenu', [
h('a.cp-app-drive-context-color.dropdown-item.dropdown-toggle', { // h('a.cp-app-drive-context-test.dropdown-item', {
'tabindex': '-1', // 'tabindex': '-1',
'data-icon': faColor, // 'data-icon': faFolderOpen,
}, Messages.fc_color), // }, "TEST"),
h("ul.dropdown-menu", [ // h("ul.dropdown-menu", [
h('li', h('a.cp-app-drive-context-open.dropdown-item', { // h('li', h('a.cp-app-drive-context-subtest1.dropdown-item', {
'tabindex': '-1', // 'tabindex': '-1',
'data-icon': faFolderOpen, // 'data-icon': faFolderOpen,
}, Messages.fc_open)) // }, "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', { h('li', h('a.cp-app-drive-context-download.dropdown-item', {
'tabindex': '-1', 'tabindex': '-1',
'data-icon': faDownload, 'data-icon': faDownload,
@ -437,12 +453,18 @@ define([
}); });
$(menu).find(".dropdown-submenu").each(function (i, el) { $(menu).find(".dropdown-submenu").each(function (i, el) {
var $el = $(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 () { $el.hover(function () {
setTimeout(function () { // wait for dom to update setTimeout(function () { // wait for dom to update
$sub.toggleClass("left", $el.offset().left + $el.outerWidth() + $sub.outerWidth() > $(window).width()); $sub.toggleClass("left", $el.offset().left + $el.outerWidth() + $sub.outerWidth() > $(window).width());
$sub.show();
}); });
}, function () { }, function () {
$sub.hide();
$sub.removeClass("left"); $sub.removeClass("left");
}); });
}); });
@ -1093,7 +1115,7 @@ define([
show = ['newfolder', 'newsharedfolder', 'newdoc']; show = ['newfolder', 'newsharedfolder', 'newdoc'];
break; break;
case 'tree': 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; break;
case 'default': case 'default':
show = ['open', 'openro', 'share', 'openparent', 'delete', 'deleteowned', 'properties', 'hashtag']; show = ['open', 'openro', 'share', 'openparent', 'delete', 'deleteowned', 'properties', 'hashtag'];
@ -1279,6 +1301,7 @@ define([
var $menu = $contextMenu; var $menu = $contextMenu;
var showSep = false; var showSep = false;
var $lastVisibleSep = null; var $lastVisibleSep = null;
// show / hide drop-down divider
$menu.find(".dropdown-menu").children().each(function (i, el) { $menu.find(".dropdown-menu").children().each(function (i, el) {
var $el = $(el); var $el = $(el);
if ($el.is(".dropdown-divider")) { if ($el.is(".dropdown-divider")) {
@ -1291,6 +1314,16 @@ define([
} }
}); });
if (!showSep && $lastVisibleSep) { $lastVisibleSep.css("display", "none"); } // remove last divider if no options after 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" }); $menu.css({ display: "block" });
if (APP.mobile()) { return; } if (APP.mobile()) { return; }
var h = $menu.outerHeight(); var h = $menu.outerHeight();