infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Add dropdown submenu

pull/1/head
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 {
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;

77
www/drive/inner.js
View File

@ -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();