From ec01f8f54b0080ea6ebfba4e40eeb836c88b906f Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 10 Sep 2019 17:10:22 +0100 Subject: [PATCH] Move context sidebar auto-refresh option to individual sections --- .../editor-client/locales/en-US/editor.json | 2 +- .../src/js/ui/common/toggleButton.js | 4 +- .../editor-client/src/js/ui/tab-context.js | 108 ++++++------------ .../editor-client/src/sass/tab-context.scss | 2 +- 4 files changed, 39 insertions(+), 77 deletions(-) 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 8d461c714..b89949ddf 100755 --- 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 @@ -571,7 +571,7 @@ "flow": "Flow", "global": "Global", "deleteConfirm": "Are you sure you want to delete this item?", - "autoRefresh": "Auto-refresh", + "autoRefresh": "Refresh on selection change", "refrsh": "Refresh", "delete": "Delete" }, diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js index 999606912..398d35c85 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js @@ -39,8 +39,8 @@ var baseClass = this.options.baseClass || "red-ui-button"; var enabledIcon = this.options.enabledIcon || "fa-check-square-o"; var disabledIcon = this.options.disabledIcon || "fa-square-o"; - var enabledLabel = this.options.enabledLabel || RED._("editor:workspace.enabled"); - var disabledLabel = this.options.disabledLabel || RED._("editor:workspace.disabled"); + var enabledLabel = this.options.hasOwnProperty('enabledLabel') ? this.options.enabledLabel : RED._("editor:workspace.enabled"); + var disabledLabel = this.options.hasOwnProperty('disabledLabel') ? this.options.disabledLabel : RED._("editor:workspace.disabled"); this.element.css("display","none"); this.element.on("focus", function() { 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 d4554e1f1..3bc41b982 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 @@ -21,6 +21,7 @@ RED.sidebar.context = (function() { var localCache = {}; var flowAutoRefresh; + var nodeAutoRefresh; var nodeSection; // var subflowSection; var flowSection; @@ -34,18 +35,6 @@ RED.sidebar.context = (function() { content = $("
").css({"position":"relative","height":"100%"}); content.className = "red-ui-sidebar-context" - var header = $('
').appendTo(content); - - var autoUpdate = RED.settings.get("editor.context.refresh",false); - flowAutoRefresh = $('').prop("checked",autoUpdate).appendTo(header).toggleButton({ - baseClass: "red-ui-sidebar-header-button", - enabledLabel: RED._("sidebar.context.autoRefresh"), - disabledLabel: RED._("sidebar.context.autoRefresh") - }).on("change", function() { - var value = $(this).prop("checked"); - RED.settings.set("editor.context.refresh",value); - }); - var footerToolbar = $('
'); var stackContainer = $("
",{class:"red-ui-sidebar-context-stack"}).appendTo(content); @@ -55,10 +44,7 @@ RED.sidebar.context = (function() { nodeSection = sections.add({ title: RED._("sidebar.context.node"), - collapsible: true, - // onexpand: function() { - // updateNode(currentNode,true); - // } + collapsible: true }); nodeSection.expand(); nodeSection.content.css({height:"100%"}); @@ -66,30 +52,27 @@ RED.sidebar.context = (function() { var table = $('
').appendTo(nodeSection.content); nodeSection.table = $('').appendTo(table); var bg = $('
').appendTo(nodeSection.header); - $('') + + var nodeAutoRefreshSetting = RED.settings.get("editor.context.nodeRefresh",false); + nodeAutoRefresh = $('').prop("checked",nodeAutoRefreshSetting).appendTo(bg).toggleButton({ + baseClass: "red-ui-sidebar-header-button red-ui-button-small", + enabledLabel: "", + disabledLabel: "" + }).on("change", function() { + var value = $(this).prop("checked"); + RED.settings.set("editor.context.flowRefresh",value); + }); + RED.popover.tooltip(nodeAutoRefresh.next(),RED._("sidebar.context.autoRefresh")); + + + var manualRefreshNode = $('') .appendTo(bg) .on("click", function(evt) { evt.stopPropagation(); evt.preventDefault(); updateNode(currentNode, true); }) - RED.popover.tooltip(bg,RED._("sidebar.context.refrsh")); - - // subflowSection = sections.add({ - // title: "Subflow", - // collapsible: true - // }); - // subflowSection.expand(); - // subflowSection.content.css({height:"100%"}); - // bg = $('
').appendTo(subflowSection.header); - // $('') - // .appendTo(bg) - // .on("click", function(evt) { - // evt.stopPropagation(); - // evt.preventDefault(); - // }) - // RED.popover.tooltip(bg,RED._("sidebar.context.refrsh")); - // subflowSection.container.hide(); + RED.popover.tooltip(manualRefreshNode,RED._("sidebar.context.refrsh")); flowSection = sections.add({ title: RED._("sidebar.context.flow"), @@ -101,14 +84,26 @@ RED.sidebar.context = (function() { var table = $('
').appendTo(flowSection.content); flowSection.table = $('').appendTo(table); bg = $('
').appendTo(flowSection.header); - $('') + + var flowAutoRefreshSetting = RED.settings.get("editor.context.flowRefresh",false); + flowAutoRefresh = $('').prop("checked",flowAutoRefreshSetting).appendTo(bg).toggleButton({ + baseClass: "red-ui-sidebar-header-button red-ui-button-small", + enabledLabel: "", + disabledLabel: "" + }).on("change", function() { + var value = $(this).prop("checked"); + RED.settings.set("editor.context.flowRefresh",value); + }); + RED.popover.tooltip(flowAutoRefresh.next(),RED._("sidebar.context.autoRefresh")); + + var manualRefreshFlow = $('') .appendTo(bg) .on("click", function(evt) { evt.stopPropagation(); evt.preventDefault(); updateFlow(currentFlow, true); }) - RED.popover.tooltip(bg,RED._("sidebar.context.refrsh")); + RED.popover.tooltip(manualRefreshFlow,RED._("sidebar.context.refrsh")); globalSection = sections.add({ title: RED._("sidebar.context.global"), @@ -144,28 +139,6 @@ RED.sidebar.context = (function() { action: "core:show-context-tab" }); - // var toggleLiveButton = $("#sidebar-context-toggle-live"); - // toggleLiveButton.on("click", function(evt) { - // evt.preventDefault(); - // if ($(this).hasClass("selected")) { - // $(this).removeClass("selected"); - // $(this).find("i").removeClass("fa-pause"); - // $(this).find("i").addClass("fa-play"); - // } else { - // $(this).addClass("selected"); - // $(this).find("i").removeClass("fa-play"); - // $(this).find("i").addClass("fa-pause"); - // } - // }); - // RED.popover.tooltip(toggleLiveButton, function() { - // if (toggleLiveButton.hasClass("selected")) { - // return "Pause live updates" - // } else { - // return "Start live updates" - // } - // }); - - RED.events.on("view:selection-changed", function(event) { var selectedNode = event.nodes && event.nodes.length === 1 && event.nodes[0]; updateNode(selectedNode); @@ -174,29 +147,18 @@ RED.sidebar.context = (function() { RED.events.on("workspace:change", function(event) { updateFlow(RED.nodes.workspace(event.workspace)); }) - if (autoUpdate) { - updateEntry(globalSection,"context/global","global"); - } else { - $(globalSection.table).empty(); - $('').appendTo(globalSection.table).i18n(); - globalSection.timestamp.html(" "); - } + $(globalSection.table).empty(); + $('').appendTo(globalSection.table).i18n(); + globalSection.timestamp.html(" "); } function updateNode(node,force) { currentNode = node; - if (force) { + if (force || nodeAutoRefresh.prop("checked")) { if (node) { updateEntry(nodeSection,"context/node/"+node.id,node.id); - // if (/^subflow:/.test(node.type)) { - // subflowSection.container.show(); - // updateEntry(subflowSection,"context/flow/"+node.id,node.id); - // } else { - // subflowSection.container.hide(); - // } } else { - // subflowSection.container.hide(); updateEntry(nodeSection) } } else { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss index b335ab601..46b09de43 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss @@ -16,7 +16,7 @@ .red-ui-sidebar-context-stack { position: absolute; - top: 42px; + top: 0; bottom: 0; left: 0; right: 0;