Update tooltip style and add to some editor buttons

packages/node_modules/@node-red/editor-api/lib/editor/locales/en-US/editor.json

@@ -78,6 +78,12 @@
             "projects-settings": "Project Settings"
         }
     },
+    "actions": {
+        "toggle-navigator": "Toggle navigator",
+        "zoom-out": "Zoom out",
+        "zoom-reset": "Reset zoom",
+        "zoom-in": "Zoom in"
+    },
     "user": {
         "loggedInAs": "Logged in as __name__",
         "username": "Username",
@@ -335,6 +341,10 @@
             "analysis": "analysis",
             "advanced": "advanced"
         },
+        "actions": {
+            "collapse-all": "Collapse all categories",
+            "expand-all": "Expand all categories"
+        },
         "event": {
             "nodeAdded": "Node added to palette:",
             "nodeAdded_plural": "Nodes added to palette",
@@ -488,7 +498,9 @@
             "editDescription": "Edit project description",
             "editDependencies": "Edit project dependencies",
             "editReadme": "Edit README.md",
+            "showProjectSettings": "Show project settings",
             "projectSettings": {
+                "title": "Project Settings",
                 "edit": "edit",
                 "none": "None",
                 "install": "install",

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

@@ -18,15 +18,19 @@ RED.popover = (function() {
     var deltaSizes = {
         "default": {
             top: 10,
+            topTop: 30,
             leftRight: 17,
             leftLeft: 25,
             leftBottom: 8,
+            leftTop: 11
         },
         "small": {
-            top: 5,
+            top: 6,
-            leftRight: 17,
+            topTop: 20,
-            leftLeft: 16,
+            leftRight: 8,
-            leftBottom: 3,
+            leftLeft: 26,
+            leftBottom: 8,
+            leftTop: 9
         }
     }
     function createPopover(options) {
@@ -48,7 +52,7 @@ RED.popover = (function() {
 
         var openPopup = function(instant) {
             if (active) {
-                div = $('<div class="red-ui-popover red-ui-popover-'+direction+'"></div>');
+                div = $('<div class="red-ui-popover"></div>');
                 if (size !== "default") {
                     div.addClass("red-ui-popover-size-"+size);
                 }
@@ -75,13 +79,36 @@ RED.popover = (function() {
                 var targetHeight = target.outerHeight();
                 var divHeight = div.height();
                 var divWidth = div.width();
+
+                var viewportTop = $(window).scrollTop();
+                var viewportBottom = viewportTop + $(window).height();
+                var top = 0;
+                var left = 0;
                 if (direction === 'right') {
-                    div.css({top: targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top,left:targetPos.left+targetWidth+deltaSizes[size].leftRight});
+                    top = targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top;
+                    left = targetPos.left+targetWidth+deltaSizes[size].leftRight;
                 } else if (direction === 'left') {
-                    div.css({top: targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top,left:targetPos.left-deltaSizes[size].leftLeft-divWidth});
+                    top = targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top;
+                    left = targetPos.left-deltaSizes[size].leftLeft-divWidth;
                 } else if (direction === 'bottom') {
-                    div.css({top: targetPos.top+targetHeight+deltaSizes[size].top,left:targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftBottom});
+                    top = targetPos.top+targetHeight+deltaSizes[size].top;
+                    left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftBottom;
+                    if (top+divHeight > viewportBottom) {
+                        direction = 'top'
+                        top = targetPos.top-deltaSizes[size].topTop-divHeight;
+                        left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftTop;
                     }
+                } else if (direction === 'top') {
+                    top = targetPos.top-deltaSizes[size].topTop-divHeight;
+                    left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftTop;
+                    if (top < 0) {
+                        direction = 'bottom';
+                        top = targetPos.top+targetHeight+deltaSizes[size].top;
+                        left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftBottom;
+                    }
+                }
+                div.addClass('red-ui-popover-'+direction).css({top: top, left: left});
+
                 if (instant) {
                     div.show();
                 } else {
@@ -156,14 +183,25 @@ RED.popover = (function() {
 
     return {
         create: createPopover,
-        tooltip: function(target,content) {
+        tooltip: function(target,content, action) {
+            var label = content;
+            if (action) {
+                label = function() {
+                    var label = content;
+                    var shortcut = RED.keyboard.getShortcut(action);
+                    if (shortcut && shortcut.key) {
+                        label = $('<span>'+content+' <span class="red-ui-popover-key">'+RED.keyboard.formatKey(shortcut.key, true)+'</span></span>');
+                    }
+                    return label;
+                }
+            }
             RED.popover.create({
                 target:target,
                 trigger: "hover",
                 size: "small",
                 direction: "bottom",
-                content: content,
+                content: label,
-                delay: { show: 550, hide: 10 }
+                delay: { show: 350, hide: 10 }
             });
         }
     }

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

@@ -353,7 +353,7 @@ RED.tabs = (function() {
                         pinnedLink.addClass("red-ui-tab-link-button-pinned");
                         pinnedTabsCount++;
                     }
-                    RED.popover.tooltip($(pinnedLink), tab.name);
+                    RED.popover.tooltip($(pinnedLink), tab.name, tab.action);
 
                 }
                 link.on("click",onTabClick);

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

@@ -319,7 +319,7 @@ RED.keyboard = (function() {
 
     var cmdCtrlKey = '<span class="help-key">'+(isMac?'&#8984;':'Ctrl')+'</span>';
 
-    function formatKey(key) {
+    function formatKey(key,plain) {
         var formattedKey = isMac?key.replace(/ctrl-?/,"&#8984;"):key;
         formattedKey = isMac?formattedKey.replace(/alt-?/,"&#8997;"):key;
         formattedKey = formattedKey.replace(/shift-?/,"&#8679;")
@@ -327,6 +327,9 @@ RED.keyboard = (function() {
         formattedKey = formattedKey.replace(/up/,"&#x2191;")
         formattedKey = formattedKey.replace(/right/,"&#x2192;")
         formattedKey = formattedKey.replace(/down/,"&#x2193;")
+        if (plain) {
+            return formattedKey;
+        }
         return '<span class="help-key-block"><span class="help-key">'+formattedKey.split(" ").join('</span> <span class="help-key">')+'</span></span>';
     }
 

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

@@ -509,6 +509,8 @@ RED.palette = (function() {
                 }
             }
         });
+        RED.popover.tooltip($("#palette-collapse-all"),RED._('palette.actions.collapse-all'));
+
         $("#palette-expand-all").on("click", function(e) {
             e.preventDefault();
             for (var cat in categoryContainers) {
@@ -517,6 +519,7 @@ RED.palette = (function() {
                 }
             }
         });
+        RED.popover.tooltip($("#palette-expand-all"),RED._('palette.actions.expand-all'));
     }
     function getCategories() {
         var categories = [];

packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js

@@ -49,7 +49,7 @@ RED.projects.settings = (function() {
         var tabContainer;
 
         var trayOptions = {
-            title: RED._("menu.label.userSettings"),
+            title: RED._("sidebar.project.projectSettings.title"),
             buttons: [
                 {
                     id: "node-dialog-ok",

packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js

@@ -1009,6 +1009,7 @@ RED.sidebar.versionControl = (function() {
             enableOnEdit: false,
             pinned: true,
             iconClass: "fa fa-code-fork",
+            action: "core:show-version-control-tab",
             onchange: function() {
                 setTimeout(function() {
                     sections.resize();

packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js

@@ -222,6 +222,7 @@ RED.sidebar.config = (function() {
             content: content,
             toolbar: toolbar,
             iconClass: "fa fa-cog",
+            action: "core:show-config-tab",
             onchange: function() { refreshConfigNodeList(); }
         });
         RED.actions.add("core:show-config-tab",function() {RED.sidebar.show('config')});

packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js

@@ -132,7 +132,8 @@ RED.sidebar.context = (function() {
             content: content,
             toolbar: footerToolbar,
             // pinned: true,
-            enableOnEdit: false
+            enableOnEdit: false,
+            action: "core:show-context-tab"
         });
 
         // var toggleLiveButton = $("#sidebar-context-toggle-live");

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js

@@ -92,6 +92,7 @@ RED.sidebar.info = (function() {
             label: RED._("sidebar.info.label"),
             name: RED._("sidebar.info.name"),
             iconClass: "fa fa-info",
+            action:"core:show-info-tab",
             content: content,
             pinned: true,
             enableOnEdit: true
@@ -140,12 +141,13 @@ RED.sidebar.info = (function() {
             propRow = $('<tr class="node-info-node-row"><td>Project</td><td></td></tr>').appendTo(tableBody);
             $(propRow.children()[1]).text(activeProject.name||"");
             $('<tr class="node-info-property-expand blank"><td colspan="2"></td></tr>').appendTo(tableBody);
-            $('<button class="editor-button editor-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
+            var editProjectButton = $('<button class="editor-button editor-button-small" style="position:absolute;right:2px;"><i class="fa fa-ellipsis-h"></i></button>')
                 .appendTo(propRow.children()[1])
                 .click(function(evt) {
                     evt.preventDefault();
                     RED.projects.editProject();
                 });
+            RED.popover.tooltip(editProjectButton,RED._('sidebar.project.showProjectSettings'));
         }
         propertiesSection.container.show();
         infoSection.container.show();

packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js

@@ -158,6 +158,7 @@
                 evt.preventDefault();
                 toggle();
             })
+            RED.popover.tooltip($("#btn-navigate"),RED._('actions.toggle-navigator'),'core:toggle-navigator');
         },
         refresh: refreshNodes,
         resize: resizeNavBorder,

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

@@ -337,8 +337,11 @@ RED.view = (function() {
         RED.view.navigator.init();
 
         $("#btn-zoom-out").click(function() {zoomOut();});
+        RED.popover.tooltip($("#btn-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out');
         $("#btn-zoom-zero").click(function() {zoomZero();});
+        RED.popover.tooltip($("#btn-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset');
         $("#btn-zoom-in").click(function() {zoomIn();});
+        RED.popover.tooltip($("#btn-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in');
         $("#chart").on("DOMMouseScroll mousewheel", function (evt) {
             if ( evt.altKey ) {
                 evt.preventDefault();

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

@@ -67,3 +67,6 @@ $editor-button-color: #999;
 $editor-button-background: #fff;
 
 $shade-color: rgba(160,160,160,0.5);
+
+$popover-background: #333;
+$popover-color: #eee;

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

@@ -21,12 +21,14 @@
     width: auto;
     padding: 10px;
     height: auto;
-    background: #fff;
+    background: $popover-background;
-
+    color: $popover-color;
+    border-radius: 4px;
     z-index: 1000;
     font-size: 14px;
     line-height: 1.4em;
     @include component-shadow;
+    border-color: $popover-background;
 }
 
 .red-ui-popover:after, .red-ui-popover:before {
@@ -51,28 +53,33 @@
     left: 50%;
 }
 
+.red-ui-popover.red-ui-popover-top:after, .red-ui-popover.red-ui-popover-top:before {
+    top: 100%;
+    left: 50%;
+}
+
 .red-ui-popover.red-ui-popover-right:after {
     border-color: rgba(136, 183, 213, 0);
-    border-right-color: #fff;
+    border-right-color: $popover-background;
     border-width: 10px;
     margin-top: -10px;
 }
 .red-ui-popover.red-ui-popover-right:before {
     border-color: rgba(194, 225, 245, 0);
-    border-right-color: $primary-border-color;
+    border-right-color: $popover-background;
     border-width: 11px;
     margin-top: -11px;
 }
 
 .red-ui-popover.red-ui-popover-left:after {
     border-color: rgba(136, 183, 213, 0);
-    border-left-color: #fff;
+    border-left-color: $popover-background;
     border-width: 10px;
     margin-top: -10px;
 }
 .red-ui-popover.red-ui-popover-left:before {
     border-color: rgba(194, 225, 245, 0);
-    border-left-color: $primary-border-color;
+    border-left-color: $popover-background;
     border-width: 11px;
     margin-top: -11px;
 }
@@ -80,45 +87,61 @@
 
 .red-ui-popover.red-ui-popover-bottom:after {
     border-color: rgba(136, 183, 213, 0);
-    border-bottom-color: #fff;
+    border-bottom-color: $popover-background;
     border-width: 10px;
     margin-left: -10px;
 }
 .red-ui-popover.red-ui-popover-bottom:before {
     border-color: rgba(194, 225, 245, 0);
-    border-bottom-color: $primary-border-color;
+    border-bottom-color: $popover-background;
+    border-width: 11px;
+    margin-left: -11px;
+}
+
+.red-ui-popover.red-ui-popover-top:after {
+    border-color: rgba(136, 183, 213, 0);
+    border-top-color: $popover-background;
+    border-width: 10px;
+    margin-left: -10px;
+}
+.red-ui-popover.red-ui-popover-top:before {
+    border-color: rgba(194, 225, 245, 0);
+    border-top-color: $popover-background;
     border-width: 11px;
     margin-left: -11px;
 }
 
 
+
 .red-ui-popover-size-small {
-    font-size: 11px;
+    font-size: 12px;
-    padding: 5px;
+    padding: 5px 7px;
+    line-height: 1.8em;
 
-    &.red-ui-popover-right:after {
+    &.red-ui-popover-right:after, &.red-ui-popover-left:after {
-        border-width: 5px;
+        border-width: 7px;
-        margin-top: -5px;
+        margin-top: -7px;
     }
-    &.red-ui-popover-right:before {
+    &.red-ui-popover-right:before, &.red-ui-popover-left:before {
-        border-width: 6px;
+        border-width: 8px;
-        margin-top: -6px;
+        margin-top: -8px;
     }
 
-    &.red-ui-popover-left:after {
+    &.red-ui-popover-bottom:after, &.red-ui-popover-top:after {
-        border-width: 5px;
+        border-width: 7px;
-        margin-top: -5px;
+        margin-left: -7px;
     }
-    &.red-ui-popover-left:before {
+    &.red-ui-popover-bottom:before, &.red-ui-popover-top:before {
-        border-width: 6px;
+        border-width: 8px;
-        margin-top: -6px;
+        margin-left: -8px;
     }
-    &.red-ui-popover-bottom:after {
+
-        border-width: 5px;
-        margin-left: -5px;
-    }
-    &.red-ui-popover-bottom:before {
-        border-width: 6px;
-        margin-left: -6px;
 }
+
+.red-ui-popover-key {
+    font-family: monospace;
+    margin-left: 5px;
+    border: 1px solid #999;
+    border-radius:3px;
+    padding: 2px 3px;
 }

packages/node_modules/@node-red/nodes/core/core/58-debug.html

@@ -157,7 +157,8 @@
                 toolbar: uiComponents.footer,
                 enableOnEdit: true,
                 pinned: true,
-                iconClass: "fa fa-bug"
+                iconClass: "fa fa-bug",
+                action: "core:show-debug-tab"
             });
             RED.actions.add("core:show-debug-tab",function() { RED.sidebar.show('debug'); });