From f26b9feeaf9b1c0b0e8f281a7d4ec805d763178a Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 10 Jan 2019 23:30:51 +0000
Subject: [PATCH] Change default dropdown appearance and sidebar tab menu
 handling

---
 .../editor-client/src/js/ui/common/menu.js          | 13 +++++++------
 .../editor-client/src/js/ui/common/tabs.js          | 13 ++++++++++---
 .../@node-red/editor-client/src/sass/bootstrap.scss |  4 ----
 .../editor-client/src/sass/dropdownMenu.scss        |  9 +++++++++
 .../@node-red/editor-client/src/sass/header.scss    |  1 +
 5 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
index 584baf5a4..612bf4516 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js
+++ b/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);
-
-        var topMenu = $("<ul/>",{id:options.id+"-submenu", class:"dropdown-menu pull-right"});
-
-        if (menuParent.length === 1) {
-            topMenu.insertAfter(menuParent);
+        if (options.id) {
+            topMenu.attr({id:options.id+"-submenu"});
+            var menuParent = $("#"+options.id);
+            if (menuParent.length === 1) {
+                topMenu.insertAfter(menuParent);
+            }
         }
 
         var lastAddedSeparator = false;
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
index 1b7d2777a..b87ce5d36 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
+++ b/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();
                 })
             }
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/bootstrap.scss b/packages/node_modules/@node-red/editor-client/src/sass/bootstrap.scss
index 1aff6b8bf..56e7497dd 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/bootstrap.scss
+++ b/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;
-}
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
index bedf82796..06fc8e6e4 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss
+++ b/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;
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/header.scss b/packages/node_modules/@node-red/editor-client/src/sass/header.scss
index 3cf25650b..e7d2170b0 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/header.scss
+++ b/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;
 }