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

Move palette editor to userSettings dialog

Browse Source
This commit is contained in:
Nick O'Leary 2017-04-29 23:10:55 +01:00
parent 5938143002
commit ccfcbe8526
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
7 changed files with 182 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
editor/js/main.js
View File

@ -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});

2
editor/js/ui/common/tabs.js
View File

@ -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");

9
editor/js/ui/keyboard.js
View File

@ -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
}
})();

210
editor/js/ui/palette-editor.js
View File

@ -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 {

79
editor/js/ui/userSettings.js
View File

@ -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) {
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
});
tabs.addTab({
id: "user-settings-tab-keyboard",
label: "Keyboard"
pane.get().hide().appendTo(tabContents);
});
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
};
})();

11
editor/sass/palette-editor.scss
View File

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

4
editor/templates/index.mst
View File

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