From cdcf39fe82b019cf5006947bffe85efe19f6516c Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 3 Oct 2018 14:02:07 +0100 Subject: [PATCH] Update tooltip style and add to some editor buttons --- .../lib/editor/locales/en-US/editor.json | 12 +++ .../editor-client/src/js/ui/common/popover.js | 60 +++++++++++--- .../editor-client/src/js/ui/common/tabs.js | 2 +- .../editor-client/src/js/ui/keyboard.js | 5 +- .../editor-client/src/js/ui/palette.js | 3 + .../src/js/ui/projects/projectSettings.js | 2 +- .../src/js/ui/projects/tab-versionControl.js | 1 + .../editor-client/src/js/ui/tab-config.js | 1 + .../editor-client/src/js/ui/tab-context.js | 3 +- .../editor-client/src/js/ui/tab-info.js | 4 +- .../editor-client/src/js/ui/view-navigator.js | 1 + .../@node-red/editor-client/src/js/ui/view.js | 3 + .../editor-client/src/sass/colors.scss | 3 + .../editor-client/src/sass/popover.scss | 83 ++++++++++++------- .../@node-red/nodes/core/core/58-debug.html | 3 +- 15 files changed, 139 insertions(+), 47 deletions(-) diff --git a/packages/node_modules/@node-red/editor-api/lib/editor/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-api/lib/editor/locales/en-US/editor.json index 49d134779..84b4f025b 100644 --- a/packages/node_modules/@node-red/editor-api/lib/editor/locales/en-US/editor.json +++ b/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", diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js index 4e2a0b0ef..71820392e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js +++ b/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, - leftRight: 17, - leftLeft: 16, - leftBottom: 3, + top: 6, + topTop: 20, + leftRight: 8, + leftLeft: 26, + leftBottom: 8, + leftTop: 9 } } function createPopover(options) { @@ -48,7 +52,7 @@ RED.popover = (function() { var openPopup = function(instant) { if (active) { - div = $('
'); + 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 = $(''+content+' '+RED.keyboard.formatKey(shortcut.key, true)+''); + } + return label; + } + } RED.popover.create({ target:target, trigger: "hover", size: "small", direction: "bottom", - content: content, - delay: { show: 550, hide: 10 } + content: label, + delay: { show: 350, hide: 10 } }); } } 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 d664235be..9c50927da 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 @@ -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); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js index c34ad2711..bb65c665d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js @@ -319,7 +319,7 @@ RED.keyboard = (function() { var cmdCtrlKey = ''+(isMac?'⌘':'Ctrl')+''; - function formatKey(key) { + function formatKey(key,plain) { var formattedKey = isMac?key.replace(/ctrl-?/,"⌘"):key; formattedKey = isMac?formattedKey.replace(/alt-?/,"⌥"):key; formattedKey = formattedKey.replace(/shift-?/,"⇧") @@ -327,6 +327,9 @@ RED.keyboard = (function() { formattedKey = formattedKey.replace(/up/,"↑") formattedKey = formattedKey.replace(/right/,"→") formattedKey = formattedKey.replace(/down/,"↓") + if (plain) { + return formattedKey; + } return ''+formattedKey.split(" ").join(' ')+''; } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index e3b91d180..f4e6e8db0 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/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 = []; diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js index 011c9fbe7..1f1b2f987 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js +++ b/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", diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js index 82af7bb6a..22fbc12f3 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/tab-versionControl.js +++ b/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(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js index 438fbe359..55a24f366 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-config.js +++ b/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')}); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js index 12fcfeb85..aa1050290 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js +++ b/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"); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js index 034b3f292..cc834475f 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js +++ b/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 = $('Project').appendTo(tableBody); $(propRow.children()[1]).text(activeProject.name||""); $('').appendTo(tableBody); - $('') + var editProjectButton = $('') .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(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js index ce13c2eed..ccfa9f9a2 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js +++ b/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, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 0285c9d44..5bd04b3e7 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/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(); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss index 94bc24261..4d3ab2033 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss +++ b/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; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss b/packages/node_modules/@node-red/editor-client/src/sass/popover.scss index 691acd5c8..62f98843e 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/popover.scss +++ b/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; - padding: 5px; + font-size: 12px; + padding: 5px 7px; + line-height: 1.8em; - &.red-ui-popover-right:after { - border-width: 5px; - margin-top: -5px; + &.red-ui-popover-right:after, &.red-ui-popover-left:after { + border-width: 7px; + margin-top: -7px; } - &.red-ui-popover-right:before { - border-width: 6px; - margin-top: -6px; + &.red-ui-popover-right:before, &.red-ui-popover-left:before { + border-width: 8px; + margin-top: -8px; } - &.red-ui-popover-left:after { - border-width: 5px; - margin-top: -5px; + &.red-ui-popover-bottom:after, &.red-ui-popover-top:after { + border-width: 7px; + margin-left: -7px; } - &.red-ui-popover-left:before { - border-width: 6px; - margin-top: -6px; - } - &.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-bottom:before, &.red-ui-popover-top:before { + border-width: 8px; + margin-left: -8px; } + +} + +.red-ui-popover-key { + font-family: monospace; + margin-left: 5px; + border: 1px solid #999; + border-radius:3px; + padding: 2px 3px; } diff --git a/packages/node_modules/@node-red/nodes/core/core/58-debug.html b/packages/node_modules/@node-red/nodes/core/core/58-debug.html index 70fe7376f..4c0b4c77f 100644 --- a/packages/node_modules/@node-red/nodes/core/core/58-debug.html +++ b/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'); });