Change default dropdown appearance and sidebar tab menu handling

packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js

@@ -150,13 +150,14 @@ RED.menu = (function() {
 
     }
     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;

packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js

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

packages/node_modules/@node-red/editor-client/src/sass/bootstrap.scss

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

packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss

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

packages/node_modules/@node-red/editor-client/src/sass/header.scss

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