Fix menu padding to handle both icons and submenus

Fixes #3683
This commit is contained in:
Nick O'Leary 2022-06-16 23:18:02 +01:00
parent 7d7682b34e
commit 53184715bc
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 35 additions and 2 deletions

View File

@ -133,6 +133,8 @@ RED.menu = (function() {
if (opt.options) {
item.addClass("red-ui-menu-dropdown-submenu"+(opt.direction!=='right'?" pull-left":""));
var submenu = $('<ul id="'+opt.id+'-submenu" class="red-ui-menu-dropdown"></ul>').appendTo(item);
var hasIcons = false
var hasSubmenus = false
for (var i=0;i<opt.options.length;i++) {
@ -144,6 +146,8 @@ RED.menu = (function() {
opt.options[i].onpostselect = opt.onpostselect
}
opt.options[i].direction = opt.direction
hasIcons = hasIcons || (opt.options[i].icon);
hasSubmenus = hasSubmenus || (opt.options[i].options);
}
var li = createMenuItem(opt.options[i]);
@ -151,6 +155,14 @@ RED.menu = (function() {
li.appendTo(submenu);
}
}
if (!hasIcons) {
submenu.addClass("red-ui-menu-dropdown-noicons")
}
if (hasSubmenus) {
submenu.addClass("red-ui-menu-dropdown-submenus")
}
}
if (opt.disabled) {
item.addClass("disabled");
@ -191,6 +203,8 @@ RED.menu = (function() {
}
var lastAddedSeparator = false;
var hasSubmenus = false;
var hasIcons = false;
for (var i=0;i<options.options.length;i++) {
var opt = options.options[i];
if (opt) {
@ -203,6 +217,8 @@ RED.menu = (function() {
opt.direction = options.direction || 'left'
}
if (opt !== null || !lastAddedSeparator) {
hasIcons = hasIcons || (opt && opt.icon);
hasSubmenus = hasSubmenus || (opt && opt.options);
var li = createMenuItem(opt);
if (li) {
li.appendTo(topMenu);
@ -210,7 +226,12 @@ RED.menu = (function() {
}
}
}
if (!hasIcons) {
topMenu.addClass("red-ui-menu-dropdown-noicons")
}
if (hasSubmenus) {
topMenu.addClass("red-ui-menu-dropdown-submenus")
}
return topMenu;
}

View File

@ -46,7 +46,7 @@
& > li > a,
& > li > a:focus {
display: block;
padding: 4px 20px 4px 12px;
padding: 4px 12px 4px 32px;
clear: both;
font-weight: normal;
line-height: 20px;
@ -58,6 +58,18 @@
& > li.pull-left > a:focus {
padding: 4px 12px 4px 32px;
}
&.red-ui-menu-dropdown-noicons > li > a,
&.red-ui-menu-dropdown-noicons > li > a:focus {
padding: 4px 12px 4px 12px;
}
&.red-ui-menu-dropdown-submenus > li > a,
&.red-ui-menu-dropdown-submenus > li > a:focus {
padding-right: 20px;
}
& > .active > a,
& > .active > a:hover,
& > .active > a:focus {