mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Move palette editor to userSettings dialog
This commit is contained in:
Nick O'Leary
parent
5938143002
commit
ccfcbe8526
@ -209,7 +209,6 @@
|
||||
]});
|
||||
menuOptions.push(null);
|
||||
if (RED.settings.theme('palette.editable') !== false) {
|
||||
RED.palette.editor.init();
|
||||
menuOptions.push({id:"menu-item-edit-palette",label:RED._("menu.label.editPalette"),onselect:"core:manage-palette"});
|
||||
menuOptions.push(null);
|
||||
}
|
||||
@ -225,19 +224,23 @@
|
||||
menuOptions.push({id:"menu-item-node-red-version", label:"v"+RED.settings.version, onselect: "core:show-about" });
|
||||
|
||||
|
||||
RED.view.init();
|
||||
RED.userSettings.init();
|
||||
RED.user.init();
|
||||
RED.library.init();
|
||||
RED.keyboard.init();
|
||||
RED.palette.init();
|
||||
if (RED.settings.theme('palette.editable') !== false) {
|
||||
RED.palette.editor.init();
|
||||
}
|
||||
|
||||
RED.sidebar.init();
|
||||
RED.subflow.init();
|
||||
RED.workspaces.init();
|
||||
RED.clipboard.init();
|
||||
RED.search.init();
|
||||
RED.view.init();
|
||||
RED.editor.init();
|
||||
RED.keyboard.init();
|
||||
RED.diff.init();
|
||||
RED.userSettings.init();
|
||||
|
||||
RED.menu.init({id:"btn-sidemenu",options: menuOptions});
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ RED.tabs = (function() {
|
||||
var currentTabWidth;
|
||||
var currentActiveTabWidth = 0;
|
||||
|
||||
var ul = $("#"+options.id);
|
||||
var ul = options.element || $("#"+options.id);
|
||||
var wrapper = ul.wrap( "<div>" ).parent();
|
||||
var scrollContainer = ul.wrap( "<div>" ).parent();
|
||||
wrapper.addClass("red-ui-tabs");
|
||||
|
||||
@ -85,6 +85,12 @@ RED.keyboard = (function() {
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
RED.userSettings.add({
|
||||
id:'keyboard',
|
||||
title: 'Keyboard',
|
||||
get: getSettingsPane
|
||||
})
|
||||
}
|
||||
|
||||
@ -512,8 +518,7 @@ RED.keyboard = (function() {
|
||||
},
|
||||
revertToDefault: revertToDefault,
|
||||
formatKey: formatKey,
|
||||
validateKey: validateKey,
|
||||
getSettingsPane: getSettingsPane
|
||||
validateKey: validateKey
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
@ -309,20 +309,23 @@ RED.palette.editor = (function() {
|
||||
}
|
||||
|
||||
initInstallTab();
|
||||
$("#header-shade").show();
|
||||
$("#editor-shade").show();
|
||||
$("#sidebar-shade").show();
|
||||
$("#sidebar-separator").hide();
|
||||
// $("#header-shade").show();
|
||||
// $("#editor-shade").show();
|
||||
// $("#sidebar-shade").show();
|
||||
// $("#sidebar-separator").hide();
|
||||
|
||||
editorTabs.activateTab('nodes');
|
||||
|
||||
$("#main-container").addClass("palette-expanded");
|
||||
// $("#main-container").addClass("palette-expanded");
|
||||
setTimeout(function() {
|
||||
editorTabs.resize();
|
||||
filterInput.focus();
|
||||
},250);
|
||||
RED.events.emit("palette-editor:open");
|
||||
RED.keyboard.add("*","escape",function(){hidePaletteEditor()});
|
||||
// RED.events.emit("palette-editor:open");
|
||||
// RED.keyboard.add("*","escape",function(){hidePaletteEditor()});
|
||||
|
||||
RED.userSettings.show('palette');
|
||||
|
||||
}
|
||||
function hidePaletteEditor() {
|
||||
RED.keyboard.remove("escape");
|
||||
@ -445,22 +448,114 @@ RED.palette.editor = (function() {
|
||||
return -1 * (A.info.timestamp-B.info.timestamp);
|
||||
}
|
||||
|
||||
|
||||
function init() {
|
||||
if (RED.settings.theme('palette.editable') === false) {
|
||||
return;
|
||||
}
|
||||
createSettingsPane();
|
||||
|
||||
RED.events.on("editor:open",function() { disabled = true; });
|
||||
RED.events.on("editor:close",function() { disabled = false; });
|
||||
RED.events.on("search:open",function() { disabled = true; });
|
||||
RED.events.on("search:close",function() { disabled = false; });
|
||||
RED.events.on("type-search:open",function() { disabled = true; });
|
||||
RED.events.on("type-search:close",function() { disabled = false; });
|
||||
RED.userSettings.add({
|
||||
id:'palette',
|
||||
title: 'Palette',
|
||||
get: getSettingsPane,
|
||||
close: function() {
|
||||
settingsPane.detach();
|
||||
}
|
||||
})
|
||||
|
||||
// RED.events.on("editor:open",function() { disabled = true; });
|
||||
// RED.events.on("editor:close",function() { disabled = false; });
|
||||
// RED.events.on("search:open",function() { disabled = true; });
|
||||
// RED.events.on("search:close",function() { disabled = false; });
|
||||
// RED.events.on("type-search:open",function() { disabled = true; });
|
||||
// RED.events.on("type-search:close",function() { disabled = false; });
|
||||
|
||||
RED.actions.add("core:manage-palette",RED.palette.editor.show);
|
||||
|
||||
RED.events.on('registry:module-updated', function(ns) {
|
||||
refreshNodeModule(ns.module);
|
||||
});
|
||||
RED.events.on('registry:node-set-enabled', function(ns) {
|
||||
refreshNodeModule(ns.module);
|
||||
});
|
||||
RED.events.on('registry:node-set-disabled', function(ns) {
|
||||
refreshNodeModule(ns.module);
|
||||
});
|
||||
RED.events.on('registry:node-type-added', function(nodeType) {
|
||||
if (!/^subflow:/.test(nodeType)) {
|
||||
var ns = RED.nodes.registry.getNodeSetForType(nodeType);
|
||||
refreshNodeModule(ns.module);
|
||||
}
|
||||
});
|
||||
RED.events.on('registry:node-type-removed', function(nodeType) {
|
||||
if (!/^subflow:/.test(nodeType)) {
|
||||
var ns = RED.nodes.registry.getNodeSetForType(nodeType);
|
||||
refreshNodeModule(ns.module);
|
||||
}
|
||||
});
|
||||
RED.events.on('registry:node-set-added', function(ns) {
|
||||
refreshNodeModule(ns.module);
|
||||
for (var i=0;i<filteredList.length;i++) {
|
||||
if (filteredList[i].info.id === ns.module) {
|
||||
var installButton = filteredList[i].elements.installButton;
|
||||
installButton.addClass('disabled');
|
||||
installButton.html(RED._('palette.editor.installed'));
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
RED.events.on('registry:node-set-removed', function(ns) {
|
||||
var module = RED.nodes.registry.getModule(ns.module);
|
||||
if (!module) {
|
||||
var entry = nodeEntries[ns.module];
|
||||
if (entry) {
|
||||
nodeList.editableList('removeItem', entry);
|
||||
delete nodeEntries[ns.module];
|
||||
for (var i=0;i<filteredList.length;i++) {
|
||||
if (filteredList[i].info.id === ns.module) {
|
||||
var installButton = filteredList[i].elements.installButton;
|
||||
installButton.removeClass('disabled');
|
||||
installButton.html(RED._('palette.editor.install'));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
RED.events.on('nodes:add', function(n) {
|
||||
if (!/^subflow:/.test(n.type)) {
|
||||
typesInUse[n.type] = (typesInUse[n.type]||0)+1;
|
||||
if (typesInUse[n.type] === 1) {
|
||||
var ns = RED.nodes.registry.getNodeSetForType(n.type);
|
||||
refreshNodeModule(ns.module);
|
||||
}
|
||||
}
|
||||
})
|
||||
RED.events.on('nodes:remove', function(n) {
|
||||
if (typesInUse.hasOwnProperty(n.type)) {
|
||||
typesInUse[n.type]--;
|
||||
if (typesInUse[n.type] === 0) {
|
||||
delete typesInUse[n.type];
|
||||
var ns = RED.nodes.registry.getNodeSetForType(n.type);
|
||||
refreshNodeModule(ns.module);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var settingsPane;
|
||||
function getSettingsPane() {
|
||||
return settingsPane;
|
||||
}
|
||||
function createSettingsPane() {
|
||||
settingsPane = $('<div id="user-settings-tab-palette"></div>');
|
||||
var content = $('<div id="palette-editor">'+
|
||||
'<ul id="palette-editor-tabs"></ul>'+
|
||||
'</div>').appendTo(settingsPane);
|
||||
|
||||
editorTabs = RED.tabs.create({
|
||||
id:"palette-editor-tabs",
|
||||
element: settingsPane.find('#palette-editor-tabs'),
|
||||
onchange:function(tab) {
|
||||
$("#palette-editor .palette-editor-tab").hide();
|
||||
tab.content.show();
|
||||
@ -484,17 +579,7 @@ RED.palette.editor = (function() {
|
||||
});
|
||||
|
||||
|
||||
$("#editor-shade").click(function() {
|
||||
if ($("#main-container").hasClass("palette-expanded")) {
|
||||
hidePaletteEditor();
|
||||
}
|
||||
});
|
||||
|
||||
$("#palette-editor-close").on("click", function(e) {
|
||||
hidePaletteEditor();
|
||||
})
|
||||
|
||||
var modulesTab = $('<div>',{class:"palette-editor-tab"}).appendTo("#palette-editor");
|
||||
var modulesTab = $('<div>',{class:"palette-editor-tab"}).appendTo(content);
|
||||
|
||||
editorTabs.addTab({
|
||||
id: 'nodes',
|
||||
@ -659,7 +744,7 @@ RED.palette.editor = (function() {
|
||||
|
||||
|
||||
|
||||
var installTab = $('<div>',{class:"palette-editor-tab hide"}).appendTo("#palette-editor");
|
||||
var installTab = $('<div>',{class:"palette-editor-tab hide"}).appendTo(content);
|
||||
|
||||
editorTabs.addTab({
|
||||
id: 'install',
|
||||
@ -874,79 +959,6 @@ RED.palette.editor = (function() {
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
RED.events.on('registry:module-updated', function(ns) {
|
||||
refreshNodeModule(ns.module);
|
||||
});
|
||||
RED.events.on('registry:node-set-enabled', function(ns) {
|
||||
refreshNodeModule(ns.module);
|
||||
});
|
||||
RED.events.on('registry:node-set-disabled', function(ns) {
|
||||
refreshNodeModule(ns.module);
|
||||
});
|
||||
RED.events.on('registry:node-type-added', function(nodeType) {
|
||||
if (!/^subflow:/.test(nodeType)) {
|
||||
var ns = RED.nodes.registry.getNodeSetForType(nodeType);
|
||||
refreshNodeModule(ns.module);
|
||||
}
|
||||
});
|
||||
RED.events.on('registry:node-type-removed', function(nodeType) {
|
||||
if (!/^subflow:/.test(nodeType)) {
|
||||
var ns = RED.nodes.registry.getNodeSetForType(nodeType);
|
||||
refreshNodeModule(ns.module);
|
||||
}
|
||||
});
|
||||
RED.events.on('registry:node-set-added', function(ns) {
|
||||
refreshNodeModule(ns.module);
|
||||
for (var i=0;i<filteredList.length;i++) {
|
||||
if (filteredList[i].info.id === ns.module) {
|
||||
var installButton = filteredList[i].elements.installButton;
|
||||
installButton.addClass('disabled');
|
||||
installButton.html(RED._('palette.editor.installed'));
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
RED.events.on('registry:node-set-removed', function(ns) {
|
||||
var module = RED.nodes.registry.getModule(ns.module);
|
||||
if (!module) {
|
||||
var entry = nodeEntries[ns.module];
|
||||
if (entry) {
|
||||
nodeList.editableList('removeItem', entry);
|
||||
delete nodeEntries[ns.module];
|
||||
for (var i=0;i<filteredList.length;i++) {
|
||||
if (filteredList[i].info.id === ns.module) {
|
||||
var installButton = filteredList[i].elements.installButton;
|
||||
installButton.removeClass('disabled');
|
||||
installButton.html(RED._('palette.editor.install'));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
RED.events.on('nodes:add', function(n) {
|
||||
if (!/^subflow:/.test(n.type)) {
|
||||
typesInUse[n.type] = (typesInUse[n.type]||0)+1;
|
||||
if (typesInUse[n.type] === 1) {
|
||||
var ns = RED.nodes.registry.getNodeSetForType(n.type);
|
||||
refreshNodeModule(ns.module);
|
||||
}
|
||||
}
|
||||
})
|
||||
RED.events.on('nodes:remove', function(n) {
|
||||
if (typesInUse.hasOwnProperty(n.type)) {
|
||||
typesInUse[n.type]--;
|
||||
if (typesInUse[n.type] === 0) {
|
||||
delete typesInUse[n.type];
|
||||
var ns = RED.nodes.registry.getNodeSetForType(n.type);
|
||||
refreshNodeModule(ns.module);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -19,6 +19,12 @@ RED.userSettings = (function() {
|
||||
var trayWidth = 700;
|
||||
var settingsVisible = false;
|
||||
|
||||
var panes = [];
|
||||
|
||||
function addPane(options) {
|
||||
panes.push(options);
|
||||
}
|
||||
|
||||
function show(initialTab) {
|
||||
if (settingsVisible) {
|
||||
return;
|
||||
@ -43,56 +49,39 @@ RED.userSettings = (function() {
|
||||
},
|
||||
open: function(tray) {
|
||||
var trayBody = tray.find('.editor-tray-body');
|
||||
var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(trayBody);
|
||||
var settingsContent = $('<div></div>').appendTo(trayBody);
|
||||
var tabContainer = $('<div></div>',{id:"user-settings-tabs-container"}).appendTo(settingsContent);
|
||||
|
||||
$('<ul></ul>',{id:"user-settings-tabs"}).appendTo(tabContainer);
|
||||
var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(trayBody);
|
||||
|
||||
createViewPane().hide().appendTo(tabContents);
|
||||
RED.keyboard.getSettingsPane().hide().appendTo(tabContents);
|
||||
|
||||
$('<div id="user-settings-tab-palette"></div>').appendTo(tabContents);
|
||||
|
||||
|
||||
var tabs = RED.tabs.create({
|
||||
var settingsTabs = RED.tabs.create({
|
||||
id: "user-settings-tabs",
|
||||
vertical: true,
|
||||
onchange: function(tab) {
|
||||
$("#user-settings-tabs-content").children().hide();
|
||||
$("#" + tab.id).show();
|
||||
setTimeout(function() {
|
||||
$("#user-settings-tabs-content").children().hide();
|
||||
$("#" + tab.id).show();
|
||||
},50);
|
||||
}
|
||||
});
|
||||
tabs.addTab({
|
||||
id: "user-settings-tab-view",
|
||||
label: "View"
|
||||
var tabContents = $('<div></div>',{id:"user-settings-tabs-content"}).appendTo(settingsContent);
|
||||
|
||||
panes.forEach(function(pane) {
|
||||
settingsTabs.addTab({
|
||||
id: "user-settings-tab-"+pane.id,
|
||||
label: pane.title
|
||||
});
|
||||
pane.get().hide().appendTo(tabContents);
|
||||
});
|
||||
tabs.addTab({
|
||||
id: "user-settings-tab-keyboard",
|
||||
label: "Keyboard"
|
||||
});
|
||||
tabs.addTab({
|
||||
id: "user-settings-tab-palette",
|
||||
label: "Palette"
|
||||
});
|
||||
if (initialTab) {
|
||||
tabs.activateTab("user-settings-tab-"+initialTab)
|
||||
}
|
||||
settingsContent.i18n();
|
||||
settingsTabs.activateTab("user-settings-tab-"+(initialTab||'view'))
|
||||
},
|
||||
close: function() {
|
||||
settingsVisible = false;
|
||||
|
||||
viewSettings.forEach(function(section) {
|
||||
section.options.forEach(function(opt) {
|
||||
var input = $("#user-settings-"+opt.setting);
|
||||
if (opt.toggle) {
|
||||
setSelected(opt.setting,input.prop('checked'));
|
||||
} else {
|
||||
setSelected(opt.setting,input.val());
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
panes.forEach(function(pane) {
|
||||
if (pane.close) {
|
||||
pane.close();
|
||||
}
|
||||
});
|
||||
},
|
||||
show: function() {}
|
||||
}
|
||||
@ -171,6 +160,24 @@ RED.userSettings = (function() {
|
||||
RED.actions.add("core:show-user-settings",show);
|
||||
RED.actions.add("core:show-help", function() { show('keyboard')});
|
||||
|
||||
addPane({
|
||||
id:'view',
|
||||
title: 'View',
|
||||
get: createViewPane,
|
||||
close: function() {
|
||||
viewSettings.forEach(function(section) {
|
||||
section.options.forEach(function(opt) {
|
||||
var input = $("#user-settings-"+opt.setting);
|
||||
if (opt.toggle) {
|
||||
setSelected(opt.setting,input.prop('checked'));
|
||||
} else {
|
||||
setSelected(opt.setting,input.val());
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
viewSettings.forEach(function(section) {
|
||||
section.options.forEach(function(opt) {
|
||||
allSettings[opt.setting] = opt;
|
||||
@ -195,6 +202,8 @@ RED.userSettings = (function() {
|
||||
}
|
||||
return {
|
||||
init: init,
|
||||
toggle: toggle
|
||||
toggle: toggle,
|
||||
show: show,
|
||||
add: addPane
|
||||
};
|
||||
})();
|
||||
|
||||
@ -14,13 +14,16 @@
|
||||
* limitations under the License.
|
||||
**/
|
||||
|
||||
#user-settings-tab-palette {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#palette-editor {
|
||||
text-align: left;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
bottom: 25px;
|
||||
bottom: 0;
|
||||
left:0;
|
||||
padding: 0;
|
||||
box-sizing:border-box;
|
||||
@ -51,7 +54,7 @@
|
||||
|
||||
}
|
||||
.red-ui-editableList-item-content {
|
||||
padding: 12px 8px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
&:last-child {
|
||||
// border-bottom: 1px solid $primary-border-color;
|
||||
@ -61,7 +64,7 @@
|
||||
}
|
||||
.palette-editor-tab {
|
||||
position:absolute;
|
||||
top:115px;
|
||||
top:35px;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0
|
||||
|
||||
@ -60,10 +60,6 @@
|
||||
<div id="palette-search" class="palette-search hide">
|
||||
<input type="text" data-i18n="[placeholder]palette.filter"></input>
|
||||
</div>
|
||||
<div id="palette-editor">
|
||||
<div class="editor-tray-header"><div class="editor-tray-titlebar"><ul class="editor-tray-breadcrumbs"><li data-i18n="palette.editor.title"></li></ul></div><div class="editor-tray-toolbar"><button id="palette-editor-close" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only primary" role="button" aria-disabled="false" data-i18n="common.label.done"></button></div></div>
|
||||
<ul id="palette-editor-tabs"></ul>
|
||||
</div>
|
||||
<div id="palette-container" class="palette-scroll hide"></div>
|
||||
<div id="palette-footer">
|
||||
<a class="palette-button" id="palette-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user