From 70fb181b7bfde5d64d16c28b9bd5a14299bc41ae Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 24 Oct 2018 22:57:16 +0100 Subject: [PATCH] Add more ui tooltips --- Gruntfile.js | 1 + .../editor-client/locales/en-US/editor.json | 10 ++- .../editor-client/src/js/jquery-addons.js | 35 ++++++++ .../editor-client/src/js/ui/common/popover.js | 18 ++-- .../editor-client/src/js/ui/palette.js | 2 + .../src/js/ui/projects/tab-versionControl.js | 82 ++++++++++--------- .../editor-client/src/js/ui/sidebar.js | 3 +- .../nodes/core/core/lib/debug/debug-utils.js | 3 +- .../nodes/locales/en-US/messages.json | 5 +- 9 files changed, 111 insertions(+), 48 deletions(-) create mode 100644 packages/node_modules/@node-red/editor-client/src/js/jquery-addons.js diff --git a/Gruntfile.js b/Gruntfile.js index 411b6305f..eec9726a2 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -118,6 +118,7 @@ module.exports = function(grunt) { src: [ // Ensure editor source files are concatenated in // the right order + "packages/node_modules/@node-red/editor-client/src/js/jquery-addons.js", "packages/node_modules/@node-red/editor-client/src/js/red.js", "packages/node_modules/@node-red/editor-client/src/js/events.js", "packages/node_modules/@node-red/editor-client/src/js/i18n.js", diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index 90444a09a..8516ccae3 100644 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -329,6 +329,7 @@ "nudgeNode": "Move selected nodes (1px)", "moveNode": "Move selected nodes (20px)", "toggleSidebar": "Toggle sidebar", + "togglePalette": "Toggle palette", "copyNode": "Copy selected nodes", "cutNode": "Cut selected nodes", "pasteNode": "Paste nodes", @@ -591,6 +592,11 @@ "versionControl": { "unstagedChanges": "Unstaged changes", "stagedChanges": "Staged changes", + "unstageChange": "Unstage change", + "stageChange": "Stage change", + "unstageAllChange": "Unstage all changes", + "stageAllChange": "Stage all changes", + "commitChanges": "Commit changes", "resolveConflicts": "Resolve conflicts", "head": "HEAD", "staged": "Staged", @@ -654,7 +660,9 @@ "commitsAheadAndBehind2": "__count__ commit ahead of the remote. ", "commitsAheadAndBehind2_plural": "__count__ commits ahead of the remote. ", "commitsAheadAndBehind3": "You must pull the remote commit down before pushing.", - "commitsAheadAndBehind3_plural": "You must pull the remote commits down before pushing." + "commitsAheadAndBehind3_plural": "You must pull the remote commits down before pushing.", + "refreshCommitHistory": "Refresh commit history", + "refreshChanges": "Refresh changes" } } }, diff --git a/packages/node_modules/@node-red/editor-client/src/js/jquery-addons.js b/packages/node_modules/@node-red/editor-client/src/js/jquery-addons.js new file mode 100644 index 000000000..c2bcaa73e --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/js/jquery-addons.js @@ -0,0 +1,35 @@ +/** + * Copyright JS Foundation and other contributors, http://js.foundation + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ + + +/** + * Trigger enabled/disabled events when element.prop("disabled",false/true) is + * called. + * Used by RED.popover to hide a popover when the trigger element is disabled + * as a disabled element doesn't emit mouseleave + */ +jQuery.propHooks.disabled = { + set: function (element, value) { + if (element.disabled !== value) { + element.disabled = value; + if (value) { + $(element).trigger('disabled'); + } else { + $(element).trigger('enabled'); + } + } + } +}; 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 5f5825081..065fcd7f9 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 @@ -96,7 +96,11 @@ RED.popover = (function() { } else if (d === 'bottom') { top = targetPos.top+targetHeight+deltaSizes[size].top; left = targetPos.left+targetWidth/2-divWidth/2 - deltaSizes[size].leftBottom; - if (left+divWidth > viewportRight) { + if (left < 0) { + d = "right"; + top = targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top; + left = targetPos.left+targetWidth+deltaSizes[size].leftRight; + } else if (left+divWidth > viewportRight) { d = "left"; top = targetPos.top+targetHeight/2-divHeight/2-deltaSizes[size].top; left = targetPos.left-deltaSizes[size].leftLeft-divWidth; @@ -147,12 +151,14 @@ RED.popover = (function() { active = true; timer = setTimeout(openPopup,delay.show); }); - target.on('mouseleave', function(e) { + target.on('mouseleave disabled', function(e) { if (timer) { clearTimeout(timer); } - active = false; - setTimeout(closePopup,delay.hide); + if (active) { + active = false; + setTimeout(closePopup,delay.hide); + } }); } else if (trigger === 'click') { target.click(function(e) { @@ -205,13 +211,13 @@ RED.popover = (function() { return label; } } - RED.popover.create({ + return RED.popover.create({ target:target, trigger: "hover", size: "small", direction: "bottom", content: label, - delay: { show: 350, hide: 10 } + delay: { show: 750, hide: 50 } }); } } 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 a0f8ce0fc..49faceac7 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 @@ -503,6 +503,8 @@ RED.palette = (function() { }) sidebarControls = $('
').appendTo($("#palette")); + RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette"); + sidebarControls.click(function() { RED.menu.toggleSelected("menu-item-palette"); }) 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 a153fe4da..78594fa0a 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 @@ -200,12 +200,12 @@ RED.sidebar.versionControl = (function() { ] }) - }); + RED.popover.tooltip(revertButton,RED._("sidebar.project.versionControl.revertChanges")); } bg = $('').appendTo(entryTools); if (state !== 'unmerged') { - $('') + var stageButton = $('') .appendTo(bg) .click(function(evt) { evt.preventDefault(); @@ -231,6 +231,7 @@ RED.sidebar.versionControl = (function() { } },{}); }); + RED.popover.tooltip(stageButton,RED._("sidebar.project.versionControl."+((state==='unstaged')?"stage":"unstage")+"Change")); } entry["update"+((state==='unstaged')?"Unstaged":"Staged")] = function(entry,status) { container.removeClass(); @@ -321,12 +322,13 @@ RED.sidebar.versionControl = (function() { localChanges.content.css({height:"100%"}); var bg = $('
').appendTo(localChanges.header); - $('') + var refreshButton = $('') .appendTo(bg) .click(function(evt) { evt.preventDefault(); refresh(true); - }) + }); + RED.popover.tooltip(refreshButton,RED._("sidebar.project.versionControl.refreshChanges")); emptyStagedItem = { label: RED._("sidebar.project.versionControl.none") }; emptyMergedItem = { label: RED._("sidebar.project.versionControl.conflictResolve") }; @@ -343,6 +345,7 @@ RED.sidebar.versionControl = (function() { }); updateBulk(toStage,true); }); + RED.popover.tooltip(stageAllButton,RED._("sidebar.project.versionControl.stageAllChange")); unstagedChangesList = $("
    ",{style:"position: absolute; top: 30px; bottom: 0; right:0; left:0;"}).appendTo(unstagedContent); unstagedChangesList.editableList({ addButton: false, @@ -432,7 +435,7 @@ RED.sidebar.versionControl = (function() { bg = $('
    ').appendTo(header); var showCommitBox = function() { commitMessage.val(""); - submitCommitButton.attr("disabled",true); + submitCommitButton.prop("disabled",true); unstagedContent.css("height","30px"); if (unmergedContent.is(":visible")) { unmergedContent.css("height","30px"); @@ -444,10 +447,10 @@ RED.sidebar.versionControl = (function() { setTimeout(function() { commitBox.css("height","175px"); },10); - stageAllButton.attr("disabled",true); - unstageAllButton.attr("disabled",true); - commitButton.attr("disabled",true); - abortMergeButton.attr("disabled",true); + stageAllButton.prop("disabled",true); + unstageAllButton.prop("disabled",true); + commitButton.prop("disabled",true); + abortMergeButton.prop("disabled",true); commitMessage.focus(); } commitButton = $('') @@ -457,6 +460,7 @@ RED.sidebar.versionControl = (function() { evt.stopPropagation(); showCommitBox(); }); + RED.popover.tooltip(commitButton,RED._("sidebar.project.versionControl.commitChanges")); unstageAllButton = $('') .appendTo(bg) .click(function(evt) { @@ -468,6 +472,7 @@ RED.sidebar.versionControl = (function() { updateBulk(toUnstage,false); }); + RED.popover.tooltip(unstageAllButton,RED._("sidebar.project.versionControl.unstageAllChange")); stagedChangesList = $("
      ",{style:"position: absolute; top: 30px; bottom: 0; right:0; left:0;"}).appendTo(stagedContent); @@ -487,7 +492,7 @@ RED.sidebar.versionControl = (function() { var commitMessage = $('') .appendTo(commitBox) .on("change keyup paste",function() { - submitCommitButton.attr('disabled',$(this).val().trim()===""); + submitCommitButton.prop('disabled',$(this).val().trim()===""); }); var commitToolbar = $('
      ').appendTo(commitBox); @@ -503,10 +508,10 @@ RED.sidebar.versionControl = (function() { setTimeout(function() { commitBox.hide(); },200); - stageAllButton.attr("disabled",false); - unstageAllButton.attr("disabled",false); - commitButton.attr("disabled",false); - abortMergeButton.attr("disabled",false); + stageAllButton.prop("disabled",false); + unstageAllButton.prop("disabled",false); + commitButton.prop("disabled",false); + abortMergeButton.prop("disabled",false); }) var submitCommitButton = $('') @@ -549,13 +554,14 @@ RED.sidebar.versionControl = (function() { collapsible: true }); - var bg = $('
      ').appendTo(localHistory.header); - $('') + bg = $('
      ').appendTo(localHistory.header); + refreshButton = $('') .appendTo(bg) .click(function(evt) { evt.preventDefault(); refresh(true,true); }) + RED.popover.tooltip(refreshButton,RED._("sidebar.project.versionControl.refreshCommitHistory")) var localBranchToolbar = $('
      ').appendTo(localHistory.content); @@ -578,6 +584,7 @@ RED.sidebar.versionControl = (function() { },100); } }) + RED.popover.tooltip(localBranchButton,RED._("sidebar.project.versionControl.changeLocalBranch")) var repoStatusButton = $('