Merge pull request #4746 from node-red/export-flow-save-view

Export Nodes dialog refinement
This commit is contained in:
Nick O'Leary 2024-06-03 16:11:22 +01:00 committed by GitHub
commit 47dd08e74a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 16 deletions

View File

@ -27,7 +27,8 @@
"lock": "Lock", "lock": "Lock",
"unlock": "Unlock", "unlock": "Unlock",
"locked": "Locked", "locked": "Locked",
"unlocked": "Unlocked" "unlocked": "Unlocked",
"format": "Format"
}, },
"type": { "type": {
"string": "string", "string": "string",

View File

@ -26,6 +26,7 @@ RED.clipboard = (function() {
var currentPopoverError; var currentPopoverError;
var activeTab; var activeTab;
var libraryBrowser; var libraryBrowser;
var clipboardTabs;
var activeLibraries = {}; var activeLibraries = {};
@ -215,6 +216,13 @@ RED.clipboard = (function() {
open: function( event, ui ) { open: function( event, ui ) {
RED.keyboard.disable(); RED.keyboard.disable();
}, },
beforeClose: function(e) {
if (clipboardTabs && activeTab === "red-ui-clipboard-dialog-export-tab-clipboard") {
const jsonTabIndex = clipboardTabs.getTabIndex('red-ui-clipboard-dialog-export-tab-clipboard-json')
const activeTabIndex = clipboardTabs.activeIndex()
RED.settings.set("editor.dialog.export.json-view", activeTabIndex === jsonTabIndex )
}
},
close: function(e) { close: function(e) {
RED.keyboard.enable(); RED.keyboard.enable();
if (popover) { if (popover) {
@ -227,6 +235,8 @@ RED.clipboard = (function() {
dialogContainer = dialog.children(".dialog-form"); dialogContainer = dialog.children(".dialog-form");
exportNodesDialog = exportNodesDialog =
'<div class="form-row">'+
'<div style="display: flex; justify-content: space-between;">'+
'<div class="form-row">'+ '<div class="form-row">'+
'<label style="width:auto;margin-right: 10px;" data-i18n="common.label.export"></label>'+ '<label style="width:auto;margin-right: 10px;" data-i18n="common.label.export"></label>'+
'<span id="red-ui-clipboard-dialog-export-rng-group" class="button-group">'+ '<span id="red-ui-clipboard-dialog-export-rng-group" class="button-group">'+
@ -235,6 +245,15 @@ RED.clipboard = (function() {
'<a id="red-ui-clipboard-dialog-export-rng-full" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+ '<a id="red-ui-clipboard-dialog-export-rng-full" class="red-ui-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+
'</span>'+ '</span>'+
'</div>'+ '</div>'+
'<div class="form-row">'+
'<label style="width:auto;margin-right: 10px;" data-i18n="common.label.format"></label>'+
'<span id="red-ui-clipboard-dialog-export-fmt-group" class="button-group">'+
'<a id="red-ui-clipboard-dialog-export-fmt-mini" class="red-ui-button red-ui-button toggle" href="#" data-i18n="clipboard.export.compact"></a>'+
'<a id="red-ui-clipboard-dialog-export-fmt-full" class="red-ui-button red-ui-button toggle" href="#" data-i18n="clipboard.export.formatted"></a>'+
'</span>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="red-ui-clipboard-dialog-box">'+ '<div class="red-ui-clipboard-dialog-box">'+
'<div class="red-ui-clipboard-dialog-tabs">'+ '<div class="red-ui-clipboard-dialog-tabs">'+
'<ul id="red-ui-clipboard-dialog-export-tabs"></ul>'+ '<ul id="red-ui-clipboard-dialog-export-tabs"></ul>'+
@ -248,15 +267,9 @@ RED.clipboard = (function() {
'<div id="red-ui-clipboard-dialog-export-tab-clipboard-preview-list"></div>'+ '<div id="red-ui-clipboard-dialog-export-tab-clipboard-preview-list"></div>'+
'</div>'+ '</div>'+
'<div class="red-ui-clipboard-dialog-export-tab-clipboard-tab" id="red-ui-clipboard-dialog-export-tab-clipboard-json">'+ '<div class="red-ui-clipboard-dialog-export-tab-clipboard-tab" id="red-ui-clipboard-dialog-export-tab-clipboard-json">'+
'<div class="form-row" style="height:calc(100% - 40px)">'+ '<div class="form-row" style="height:calc(100% - 10px)">'+
'<textarea readonly id="red-ui-clipboard-dialog-export-text"></textarea>'+ '<textarea readonly id="red-ui-clipboard-dialog-export-text"></textarea>'+
'</div>'+ '</div>'+
'<div class="form-row" style="text-align: right;">'+
'<span id="red-ui-clipboard-dialog-export-fmt-group" class="button-group">'+
'<a id="red-ui-clipboard-dialog-export-fmt-mini" class="red-ui-button red-ui-button-small toggle" href="#" data-i18n="clipboard.export.compact"></a>'+
'<a id="red-ui-clipboard-dialog-export-fmt-full" class="red-ui-button red-ui-button-small toggle" href="#" data-i18n="clipboard.export.formatted"></a>'+
'</span>'+
'</div>'+
'</div>'+ '</div>'+
'</div>'+ '</div>'+
'<div class="form-row" id="red-ui-clipboard-dialog-export-tab-library-filename">'+ '<div class="form-row" id="red-ui-clipboard-dialog-export-tab-library-filename">'+
@ -569,7 +582,7 @@ RED.clipboard = (function() {
dialogContainer.empty(); dialogContainer.empty();
dialogContainer.append($(exportNodesDialog)); dialogContainer.append($(exportNodesDialog));
clipboardTabs = null
var tabs = RED.tabs.create({ var tabs = RED.tabs.create({
id: "red-ui-clipboard-dialog-export-tabs", id: "red-ui-clipboard-dialog-export-tabs",
vertical: true, vertical: true,
@ -630,7 +643,7 @@ RED.clipboard = (function() {
$("#red-ui-clipboard-dialog-tab-library-name").on('paste',function() { setTimeout(validateExportFilename,10)}); $("#red-ui-clipboard-dialog-tab-library-name").on('paste',function() { setTimeout(validateExportFilename,10)});
$("#red-ui-clipboard-dialog-export").button("enable"); $("#red-ui-clipboard-dialog-export").button("enable");
var clipboardTabs = RED.tabs.create({ clipboardTabs = RED.tabs.create({
id: "red-ui-clipboard-dialog-export-tab-clipboard-tabs", id: "red-ui-clipboard-dialog-export-tab-clipboard-tabs",
onchange: function(tab) { onchange: function(tab) {
$(".red-ui-clipboard-dialog-export-tab-clipboard-tab").hide(); $(".red-ui-clipboard-dialog-export-tab-clipboard-tab").hide();
@ -647,6 +660,9 @@ RED.clipboard = (function() {
id: "red-ui-clipboard-dialog-export-tab-clipboard-json", id: "red-ui-clipboard-dialog-export-tab-clipboard-json",
label: RED._("editor.types.json") label: RED._("editor.types.json")
}); });
if (RED.settings.get("editor.dialog.export.json-view") === true) {
clipboardTabs.activateTab("red-ui-clipboard-dialog-export-tab-clipboard-json");
}
var previewList = $("#red-ui-clipboard-dialog-export-tab-clipboard-preview-list").css({position:"absolute",top:0,right:0,bottom:0,left:0}).treeList({ var previewList = $("#red-ui-clipboard-dialog-export-tab-clipboard-preview-list").css({position:"absolute",top:0,right:0,bottom:0,left:0}).treeList({
data: [] data: []