1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Move context sidebar auto-refresh option to individual sections

This commit is contained in:
Nick O'Leary 2019-09-10 17:10:22 +01:00
parent 5a094b44c4
commit ec01f8f54b
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
4 changed files with 39 additions and 77 deletions

View File

@ -571,7 +571,7 @@
"flow": "Flow", "flow": "Flow",
"global": "Global", "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", "autoRefresh": "Refresh on selection change",
"refrsh": "Refresh", "refrsh": "Refresh",
"delete": "Delete" "delete": "Delete"
}, },

View File

@ -39,8 +39,8 @@
var baseClass = this.options.baseClass || "red-ui-button"; var baseClass = this.options.baseClass || "red-ui-button";
var enabledIcon = this.options.enabledIcon || "fa-check-square-o"; var enabledIcon = this.options.enabledIcon || "fa-check-square-o";
var disabledIcon = this.options.disabledIcon || "fa-square-o"; var disabledIcon = this.options.disabledIcon || "fa-square-o";
var enabledLabel = this.options.enabledLabel || RED._("editor:workspace.enabled"); var enabledLabel = this.options.hasOwnProperty('enabledLabel') ? this.options.enabledLabel : RED._("editor:workspace.enabled");
var disabledLabel = this.options.disabledLabel || RED._("editor:workspace.disabled"); var disabledLabel = this.options.hasOwnProperty('disabledLabel') ? this.options.disabledLabel : RED._("editor:workspace.disabled");
this.element.css("display","none"); this.element.css("display","none");
this.element.on("focus", function() { this.element.on("focus", function() {

View File

@ -21,6 +21,7 @@ RED.sidebar.context = (function() {
var localCache = {}; var localCache = {};
var flowAutoRefresh; var flowAutoRefresh;
var nodeAutoRefresh;
var nodeSection; var nodeSection;
// var subflowSection; // var subflowSection;
var flowSection; var flowSection;
@ -34,18 +35,6 @@ RED.sidebar.context = (function() {
content = $("<div>").css({"position":"relative","height":"100%"}); content = $("<div>").css({"position":"relative","height":"100%"});
content.className = "red-ui-sidebar-context" 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 footerToolbar = $('<div></div>');
var stackContainer = $("<div>",{class:"red-ui-sidebar-context-stack"}).appendTo(content); var stackContainer = $("<div>",{class:"red-ui-sidebar-context-stack"}).appendTo(content);
@ -55,10 +44,7 @@ RED.sidebar.context = (function() {
nodeSection = sections.add({ nodeSection = sections.add({
title: RED._("sidebar.context.node"), title: RED._("sidebar.context.node"),
collapsible: true, collapsible: true
// onexpand: function() {
// updateNode(currentNode,true);
// }
}); });
nodeSection.expand(); nodeSection.expand();
nodeSection.content.css({height:"100%"}); nodeSection.content.css({height:"100%"});
@ -66,30 +52,27 @@ RED.sidebar.context = (function() {
var table = $('<table class="red-ui-info-table"></table>').appendTo(nodeSection.content); var table = $('<table class="red-ui-info-table"></table>').appendTo(nodeSection.content);
nodeSection.table = $('<tbody>').appendTo(table); nodeSection.table = $('<tbody>').appendTo(table);
var bg = $('<div style="float: right"></div>').appendTo(nodeSection.header); var bg = $('<div style="float: right"></div>').appendTo(nodeSection.header);
$('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
var nodeAutoRefreshSetting = RED.settings.get("editor.context.nodeRefresh",false);
nodeAutoRefresh = $('<input type="checkbox">').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 = $('<button class="red-ui-button red-ui-button-small" style="margin-left: 5px"><i class="fa fa-refresh"></i></button>')
.appendTo(bg) .appendTo(bg)
.on("click", function(evt) { .on("click", function(evt) {
evt.stopPropagation(); evt.stopPropagation();
evt.preventDefault(); evt.preventDefault();
updateNode(currentNode, true); updateNode(currentNode, true);
}) })
RED.popover.tooltip(bg,RED._("sidebar.context.refrsh")); RED.popover.tooltip(manualRefreshNode,RED._("sidebar.context.refrsh"));
// subflowSection = sections.add({
// title: "Subflow",
// collapsible: true
// });
// subflowSection.expand();
// subflowSection.content.css({height:"100%"});
// bg = $('<div style="float: right"></div>').appendTo(subflowSection.header);
// $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
// .appendTo(bg)
// .on("click", function(evt) {
// evt.stopPropagation();
// evt.preventDefault();
// })
// RED.popover.tooltip(bg,RED._("sidebar.context.refrsh"));
// subflowSection.container.hide();
flowSection = sections.add({ flowSection = sections.add({
title: RED._("sidebar.context.flow"), title: RED._("sidebar.context.flow"),
@ -101,14 +84,26 @@ RED.sidebar.context = (function() {
var table = $('<table class="red-ui-info-table"></table>').appendTo(flowSection.content); var table = $('<table class="red-ui-info-table"></table>').appendTo(flowSection.content);
flowSection.table = $('<tbody>').appendTo(table); flowSection.table = $('<tbody>').appendTo(table);
bg = $('<div style="float: right"></div>').appendTo(flowSection.header); bg = $('<div style="float: right"></div>').appendTo(flowSection.header);
$('<button class="red-ui-button red-ui-button-small"><i class="fa fa-refresh"></i></button>')
var flowAutoRefreshSetting = RED.settings.get("editor.context.flowRefresh",false);
flowAutoRefresh = $('<input type="checkbox">').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 = $('<button class="red-ui-button red-ui-button-small" style="margin-left: 5px"><i class="fa fa-refresh"></i></button>')
.appendTo(bg) .appendTo(bg)
.on("click", function(evt) { .on("click", function(evt) {
evt.stopPropagation(); evt.stopPropagation();
evt.preventDefault(); evt.preventDefault();
updateFlow(currentFlow, true); updateFlow(currentFlow, true);
}) })
RED.popover.tooltip(bg,RED._("sidebar.context.refrsh")); RED.popover.tooltip(manualRefreshFlow,RED._("sidebar.context.refrsh"));
globalSection = sections.add({ globalSection = sections.add({
title: RED._("sidebar.context.global"), title: RED._("sidebar.context.global"),
@ -144,28 +139,6 @@ RED.sidebar.context = (function() {
action: "core:show-context-tab" 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) { RED.events.on("view:selection-changed", function(event) {
var selectedNode = event.nodes && event.nodes.length === 1 && event.nodes[0]; var selectedNode = event.nodes && event.nodes.length === 1 && event.nodes[0];
updateNode(selectedNode); updateNode(selectedNode);
@ -174,29 +147,18 @@ RED.sidebar.context = (function() {
RED.events.on("workspace:change", function(event) { RED.events.on("workspace:change", function(event) {
updateFlow(RED.nodes.workspace(event.workspace)); updateFlow(RED.nodes.workspace(event.workspace));
}) })
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;");
}
$(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;");
} }
function updateNode(node,force) { function updateNode(node,force) {
currentNode = node; currentNode = node;
if (force) { if (force || nodeAutoRefresh.prop("checked")) {
if (node) { if (node) {
updateEntry(nodeSection,"context/node/"+node.id,node.id); 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 { } else {
// subflowSection.container.hide();
updateEntry(nodeSection) updateEntry(nodeSection)
} }
} else { } else {

View File

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