1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Change default dropdown appearance and sidebar tab menu handling

This commit is contained in:
Nick O'Leary 2019-01-10 23:30:51 +00:00
parent 9e47d933af
commit f26b9feeaf
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
5 changed files with 27 additions and 13 deletions

View File

@ -150,13 +150,14 @@ RED.menu = (function() {
} }
function createMenu(options) { function createMenu(options) {
var topMenu = $("<ul/>",{class:"dropdown-menu pull-right"});
var menuParent = $("#"+options.id); if (options.id) {
topMenu.attr({id:options.id+"-submenu"});
var topMenu = $("<ul/>",{id:options.id+"-submenu", class:"dropdown-menu pull-right"}); var menuParent = $("#"+options.id);
if (menuParent.length === 1) {
if (menuParent.length === 1) { topMenu.insertAfter(menuParent);
topMenu.insertAfter(menuParent); }
} }
var lastAddedSeparator = false; var lastAddedSeparator = false;

View File

@ -96,6 +96,7 @@ RED.tabs = (function() {
var selectButton = $('<a href="#"><i class="fa fa-caret-down"></i></a>').appendTo(collapsedButtonsRow); var selectButton = $('<a href="#"><i class="fa fa-caret-down"></i></a>').appendTo(collapsedButtonsRow);
selectButton.addClass("red-ui-tab-link-button-menu") selectButton.addClass("red-ui-tab-link-button-menu")
selectButton.click(function(evt) { selectButton.click(function(evt) {
evt.stopPropagation();
evt.preventDefault(); evt.preventDefault();
if (!collapsibleMenu) { if (!collapsibleMenu) {
var pinnedOptions = []; var pinnedOptions = [];
@ -121,15 +122,21 @@ RED.tabs = (function() {
collapsibleMenu.css({ collapsibleMenu.css({
position: "absolute" position: "absolute"
}) })
collapsibleMenu.on('mouseleave', function(){ $(this).hide() });
collapsibleMenu.on('mouseup', function() { $(this).hide() });
collapsibleMenu.appendTo("body"); collapsibleMenu.appendTo("body");
} }
var elementPos = selectButton.offset(); var elementPos = selectButton.offset();
collapsibleMenu.css({ collapsibleMenu.css({
top: (elementPos.top+selectButton.height()-20)+"px", top: (elementPos.top+selectButton.height()-2)+"px",
left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px" left: (elementPos.left - collapsibleMenu.width() + selectButton.width())+"px"
}) })
if (collapsibleMenu.is(":visible")) {
$(document).off("click.tabmenu");
} else {
$(document).on("click.tabmenu", function(evt) {
$(document).off("click.tabmenu");
collapsibleMenu.hide();
});
}
collapsibleMenu.toggle(); collapsibleMenu.toggle();
}) })
} }

View File

@ -19,7 +19,3 @@
div.btn-group, a.btn { div.btn-group, a.btn {
@include disable-selection; @include disable-selection;
} }
.dropdown-menu>li>a {
color: #444;
}

View File

@ -19,6 +19,15 @@
background: #999; background: #999;
} }
.dropdown-menu {
background: #f3f3f3;
border-color: $secondary-border-color;
&>li>a {
color: #444;
}
}
.dropdown-menu * .fa-check-square { .dropdown-menu * .fa-check-square {
display: none; display: none;
color: #e0e0e0; color: #e0e0e0;

View File

@ -202,6 +202,7 @@ span.logo {
#header ul.dropdown-menu { #header ul.dropdown-menu {
background: $headerMenuBackground; background: $headerMenuBackground;
border: 1px solid rgba(0,0,0,0.2);
width: 250px !important; width: 250px !important;
margin-top: 0; margin-top: 0;
} }