From 5ab7380ad190e8b2151efa715f045333cca5685e Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 21 May 2019 17:19:39 +0100 Subject: [PATCH] Add auto-refresh toggle to context sidebar --- .../editor-client/locales/en-US/editor.json | 3 +- .../src/js/ui/common/toggleButton.js | 24 +++++------ .../editor-client/src/js/ui/tab-context.js | 42 ++++++++++++++----- .../editor-client/src/sass/sidebar.scss | 3 ++ .../editor-client/src/sass/tab-context.scss | 2 +- 5 files changed, 47 insertions(+), 27 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 4fd83854b..5e928915d 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 @@ -528,7 +528,8 @@ "node": "Node", "flow": "Flow", "global": "Global", - "deleteConfirm": "Are you sure you want to delete this item?" + "deleteConfirm": "Are you sure you want to delete this item?", + "autoRefresh": "Auto-refresh" }, "palette": { "name": "Palette management", 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 8e8b13326..1a52183d3 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 @@ -17,13 +17,14 @@ /** * options: - * - invertState : boolean - if "true" the button will show "enabled" when the + * - invertState : boolean - if "true" the button will show "enabled" when the * checkbox is not selected and vice versa. - * - enabledIcon : string - the icon for "enabled" state, default "fa-check-square-o" - * - enabledLabel : string - the label for "enabled" state, default "Enabled" ("editor:workspace.enabled") - * - disabledIcon : string - the icon for "disabled" state, default "fa-square-o" + * - enabledIcon : string - the icon for "enabled" state, default "fa-check-square-o" + * - enabledLabel : string - the label for "enabled" state, default "Enabled" ("editor:workspace.enabled") + * - disabledIcon : string - the icon for "disabled" state, default "fa-square-o" * - disabledLabel : string - the label for "disabled" state, default "Disabled" ("editor:workspace.disabled") - * - class: string - additional classes to apply to the button - eg "red-ui-button-small" + * - baseClass : string - the base css class to apply, default "red-ui-button" (alternative eg "red-ui-sidebar-header-button") + * - class : string - additional classes to apply to the button - eg "red-ui-button-small" * methods: * - */ @@ -35,6 +36,7 @@ if (this.options.hasOwnProperty("invertState")) { invertState = this.options.invertState; } + 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"); @@ -45,7 +47,7 @@ this.element.on("focus", function() { that.button.focus(); }); - this.button = $(''); + this.button = $(''); if (this.options.class) { this.button.addClass(this.options.class) } @@ -71,19 +73,13 @@ } this.button.on("click",function(e) { + e.stopPropagation(); if (that.buttonIcon.hasClass(disabledIcon)) { - that.button.addClass("selected"); - that.buttonIcon.addClass(enabledIcon); - that.buttonIcon.removeClass(disabledIcon); that.element.prop("checked",!invertState); - that.buttonLabel.text(enabledLabel); } else { - that.buttonIcon.addClass(disabledIcon); - that.button.removeClass("selected"); - that.buttonIcon.removeClass(enabledIcon); that.element.prop("checked",invertState); - that.buttonLabel.text(disabledLabel); } + that.element.trigger("change"); }) this.element.on("change", function(e) { 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 57fecdbf3..438f483f8 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 @@ -20,7 +20,7 @@ RED.sidebar.context = (function() { var localCache = {}; - + var flowAutoRefresh; var nodeSection; // var subflowSection; var flowSection; @@ -34,10 +34,20 @@ 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); sections = RED.stack.create({ container: stackContainer @@ -95,7 +105,7 @@ RED.sidebar.context = (function() { .on("click", function(evt) { evt.stopPropagation(); evt.preventDefault(); - updateFlow(currentFlow); + updateFlow(currentFlow, true); }) globalSection = sections.add({ @@ -162,8 +172,13 @@ RED.sidebar.context = (function() { RED.events.on("workspace:change", function(event) { updateFlow(RED.nodes.workspace(event.workspace)); }) - - updateEntry(globalSection,"context/global","global"); + if (autoUpdate) { + updateEntry(globalSection,"context/global","global"); + } else { + $(globalSection.table).empty(); + $('').appendTo(globalSection.table).i18n(); + globalSection.timestamp.html(" "); + } } @@ -190,15 +205,20 @@ RED.sidebar.context = (function() { $('').appendTo(nodeSection.table).i18n(); } nodeSection.timestamp.html(" "); - } } - function updateFlow(flow) { + function updateFlow(flow, force) { currentFlow = flow; - if (flow) { - updateEntry(flowSection,"context/flow/"+flow.id,flow.id); + if (force || flowAutoRefresh.prop("checked")) { + if (flow) { + updateEntry(flowSection,"context/flow/"+flow.id,flow.id); + } else { + updateEntry(flowSection) + } } else { - updateEntry(flowSection) + $(flowSection.table).empty(); + $('').appendTo(flowSection.table).i18n(); + flowSection.timestamp.html(" "); } } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index 46dcfddb2..d85527178 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -91,6 +91,9 @@ button.red-ui-sidebar-header-button { font-size: 13px; line-height: 13px; padding: 5px 8px; + &.toggle { + @include workspace-button-toggle; + } } a.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-toggle */ 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 46b09de43..b335ab601 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: 0; + top: 42px; bottom: 0; left: 0; right: 0;