frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add auto-refresh toggle to context sidebar

Browse Source
This commit is contained in:
Nick O'Leary 2019-05-21 17:19:39 +01:00
parent afa25df1af
commit 5ab7380ad1
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
5 changed files with 47 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/node_modules/@node-red/editor-client/locales/en-US/editor.json vendored
View File

@ -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",

24
packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js vendored
View File

@ -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 = $('<button type="button" class="red-ui-button toggle single"><i class="fa"></i> <span></span></button>');
this.button = $('<button type="button" class="'+baseClass+' toggle single"><i class="fa"></i> <span></span></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) {

42
packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js vendored
View File

@ -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 = $("<div>").css({"position":"relative","height":"100%"});
content.className = "red-ui-sidebar-context"
var header = $('<div class="red-ui-sidebar-header"></div>').appendTo(content);
var autoUpdate = RED.settings.get("editor.context.refresh",false);
flowAutoRefresh = $('<input type="checkbox">').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 = $('<div></div>');
var stackContainer = $("<div>",{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();
$('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.refresh"></td></tr>').appendTo(globalSection.table).i18n();
globalSection.timestamp.html("&nbsp;");
}
}
@ -190,15 +205,20 @@ RED.sidebar.context = (function() {
$('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.none"></td></tr>').appendTo(nodeSection.table).i18n();
}
nodeSection.timestamp.html("&nbsp;");
}
}
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();
$('<tr class="red-ui-help-info-row red-ui-search-empty blank" colspan="2"><td data-i18n="sidebar.context.refresh"></td></tr>').appendTo(flowSection.table).i18n();
flowSection.timestamp.html("&nbsp;");
}
}

3
packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss vendored
View File

@ -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 */

2
packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss vendored
View File

@ -16,7 +16,7 @@
.red-ui-sidebar-context-stack {
position: absolute;
top: 0;
top: 42px;
bottom: 0;
left: 0;
right: 0;