frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Move edit tray buttons to top

This commit is contained in:
Nick O'Leary 2016-05-03 15:45:29 +01:00
parent 8080ebceb4
commit ce25fc658b
7 changed files with 317 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
editor/js/ui/editor.js
View File

@ -15,6 +15,8 @@
**/
RED.editor = (function() {
var editStack = [];
var editing_node = null;
var editing_config_node = null;
var subflowEditor;
@ -417,19 +419,86 @@ RED.editor = (function() {
}
}
function getEditStackTitle() {
var title = '<ul class="editor-tray-breadcrumbs">';
for (var i=0;i<editStack.length;i++) {
var node = editStack[i];
var label = node.type;
if (node.type === 'subflow') {
label = RED._("subflow.editSubflow",{name:node.name})
} else if (node.type.indexOf("subflow:")===0) {
var subflow = RED.nodes.subflow(node.type.substring(8));
label = RED._("subflow.editSubflow",{name:subflow.name})
} else {
if (typeof node._def.paletteLabel !== "undefined") {
try {
label = (typeof node._def.paletteLabel === "function" ? node._def.paletteLabel.call(node._def) : node._def.paletteLabel)||"";
} catch(err) {
console.log("Definition error: "+node.type+".paletteLabel",err);
}
}
if (i === editStack.length-1) {
if (RED.nodes.node(node.id)) {
label = RED._("editor.editNode",{type:label});
} else {
label = RED._("editor.addNewConfig",{type:label});
}
}
}
title += '<li>'+label+'</li>';
}
title += '</ul>';
return title;
}
function showEditDialog(node) {
var editing_node = node;
editStack.push(node);
RED.view.state(RED.state.EDITING);
var type = node.type;
if (node.type.substring(0,8) == "subflow:") {
type = "subflow";
}
var trayOptions = {
title: "Edit "+type+" node",
title: getEditStackTitle(),
buttons: [
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
if (editing_node._def) {
if (editing_node._def.oneditcancel) {
editing_node._def.oneditcancel.call(editing_node);
}
for (var d in editing_node._def.defaults) {
if (editing_node._def.defaults.hasOwnProperty(d)) {
var def = editing_node._def.defaults[d];
if (def.type) {
var configTypeDef = RED.nodes.getType(def.type);
if (configTypeDef && configTypeDef.exclusive) {
var input = $("#node-input-"+d).val()||"";
if (input !== "" && !editing_node[d]) {
// This node has an exclusive config node that
// has just been added. As the user is cancelling
// the edit, need to delete the just-added config
// node so that it doesn't get orphaned.
RED.nodes.remove(input);
}
}
}
}
}
}
RED.tray.close();
}
},
{
id: "node-dialog-ok",
text: RED._("common.label.ok"),
text: RED._("common.label.done"),
class: "primary",
click: function() {
var changes = {};
var changed = false;
@ -556,38 +625,6 @@ RED.editor = (function() {
RED.view.redraw(true);
RED.tray.close();
}
},
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
if (editing_node._def) {
if (editing_node._def.oneditcancel) {
editing_node._def.oneditcancel.call(editing_node);
}
for (var d in editing_node._def.defaults) {
if (editing_node._def.defaults.hasOwnProperty(d)) {
var def = editing_node._def.defaults[d];
if (def.type) {
var configTypeDef = RED.nodes.getType(def.type);
if (configTypeDef && configTypeDef.exclusive) {
var input = $("#node-input-"+d).val()||"";
if (input !== "" && !editing_node[d]) {
// This node has an exclusive config node that
// has just been added. As the user is cancelling
// the edit, need to delete the just-added config
// node so that it doesn't get orphaned.
RED.nodes.remove(input);
}
}
}
}
}
}
RED.tray.close();
}
}
],
resize: function(dimensions) {
@ -631,26 +668,6 @@ RED.editor = (function() {
$('<input type="text" style="display: none;" />').prependTo(dialogForm);
prepareEditDialog(node,node._def,"node-input");
dialogForm.i18n();
// var minWidth = $(this).dialog('option','minWidth');
// if ($(this).outerWidth() < minWidth) {
// $(this).dialog('option','width',minWidth);
// } else {
// $(this).dialog('option','width',$(this).outerWidth());
// }
// if (editing_node) {
// var size = $(this).dialog('option','sizeCache-'+editing_node.type);
// if (size) {
// $(this).dialog('option','width',size.width);
// $(this).dialog('option','height',size.height);
// }
// if (editing_node._def.oneditresize) {
// setTimeout(function() {
// var form = $("#dialog-form");
// editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
// },0);
// }
// }
},
close: function() {
RED.keyboard.enable();
@ -661,6 +678,7 @@ RED.editor = (function() {
RED.sidebar.info.refresh(editing_node);
}
RED.workspaces.refresh();
editStack.pop();
},
show: function() {
if (editing_node) {
@ -668,14 +686,6 @@ RED.editor = (function() {
}
}
}
/*).parent().on('keydown', function(evt) {
if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
$("#node-dialog-cancel").click();
} else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
$("#node-dialog-ok").click();
}
});
*/
if (editTrayWidthCache[type]) {
trayOptions.width = editTrayWidthCache[type];
}
@ -683,7 +693,7 @@ RED.editor = (function() {
if (type === 'subflow') {
var id = editing_node.type.substring(8);
trayOptions.buttons.unshift({
class: 'leftButton',
class: 'leftButton primary',
text: RED._("subflow.edit"),
click: function() {
RED.workspaces.show(id);
@ -730,9 +740,11 @@ RED.editor = (function() {
}
editing_config_node["_"] = node_def._;
}
editStack.push(editing_config_node);
RED.view.state(RED.state.EDITING);
var trayOptions = {
title: (adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
resize: function() {
if (editing_config_node && editing_config_node._def.oneditresize) {
var form = $("#node-config-dialog-edit-form");
@ -745,7 +757,7 @@ RED.editor = (function() {
var trayFooter = tray.find(".editor-tray-footer");
trayFooter.prepend('<div id="node-config-dialog-user-count"><i class="fa fa-info-circle"></i> <span></span></div>');
trayHeader.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
trayFooter.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
RED.keyboard.disable();
@ -822,6 +834,7 @@ RED.editor = (function() {
RED.keyboard.enable();
}
RED.workspaces.refresh();
editStack.pop();
},
show: function() {
if (editing_config_node) {
@ -830,9 +843,33 @@ RED.editor = (function() {
}
}
trayOptions.buttons = [
{
id: "node-config-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
var configType = type;
var configId = editing_config_node.id;
var configAdding = adding;
var configTypeDef = RED.nodes.getType(configType);
if (configTypeDef.oneditcancel) {
// TODO: what to pass as this to call
if (configTypeDef.oneditcancel) {
var cn = RED.nodes.node(configId);
if (cn) {
configTypeDef.oneditcancel.call(cn,false);
} else {
configTypeDef.oneditcancel.call({id:configId},true);
}
}
}
RED.tray.close();
}
},
{
id: "node-config-dialog-ok",
text: adding?RED._("editor.configAdd"):RED._("editor.configUpdate"),
class: "primary",
click: function() {
var configProperty = name;
var configId = editing_config_node.id;
@ -931,36 +968,13 @@ RED.editor = (function() {
updateConfigNodeSelect(configProperty,configType,editing_config_node.id,prefix);
});
}
},
{
id: "node-config-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
var configType = type;
var configId = editing_config_node.id;
var configAdding = adding;
var configTypeDef = RED.nodes.getType(configType);
if (configTypeDef.oneditcancel) {
// TODO: what to pass as this to call
if (configTypeDef.oneditcancel) {
var cn = RED.nodes.node(configId);
if (cn) {
configTypeDef.oneditcancel.call(cn,false);
} else {
configTypeDef.oneditcancel.call({id:configId},true);
}
}
}
RED.tray.close();
}
}
];
if (!adding) {
trayOptions.buttons.unshift({
class: 'leftButton',
text: RED._("editor.configDelete"),
text: RED._("editor.configDelete"), //'<i class="fa fa-trash"></i>',
click: function() {
var configProperty = name;
var configId = editing_config_node.id;
@ -1067,15 +1081,24 @@ RED.editor = (function() {
function showEditSubflowDialog(subflow) {
var editing_node = subflow;
editStack.push(subflow);
RED.view.state(RED.state.EDITING);
var subflowEditor;
var trayOptions = {
title: RED._("subflow.editSubflow",{name:subflow.name}),
title: getEditStackTitle(),
buttons: [
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
RED.tray.close();
}
},
{
id: "node-dialog-ok",
text: RED._("common.label.ok"),
class: "primary",
text: RED._("common.label.done"),
click: function() {
var i;
var changes = {};
@ -1133,13 +1156,6 @@ RED.editor = (function() {
editing_node.dirty = true;
RED.tray.close();
}
},
{
id: "node-dialog-cancel",
text: RED._("common.label.cancel"),
click: function() {
RED.tray.close();
}
}
],
resize: function() {
@ -1189,7 +1205,7 @@ RED.editor = (function() {
});
$("#subflow-input-name").val(subflow.name);
subflowEditor.getSession().setValue(subflow.info,-1);
subflowEditor.getSession().setValue(subflow.info||"",-1);
var userCount = 0;
var subflowType = "subflow:"+editing_node.id;
@ -1209,6 +1225,7 @@ RED.editor = (function() {
}
RED.sidebar.info.refresh(editing_node);
RED.workspaces.refresh();
editStack.pop();
editing_node = null;
},
show: function() {
@ -1222,6 +1239,15 @@ RED.editor = (function() {
return {
init: function() {
RED.tray.init();
$(window).on('keydown', function(evt) {
if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
$("#node-dialog-cancel").click();
$("#node-config-dialog-cancel").click();
} else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
$("#node-dialog-ok").click();
$("#node-config-dialog-ok").click();
}
});
},
edit: showEditDialog,
editConfig: showEditConfigNodeDialog,

13
editor/js/ui/tab-config.js
View File

@ -17,7 +17,7 @@ RED.sidebar.config = (function() {
var content = document.createElement("div");
content.className = "sidebar-node-config"
content.className = "sidebar-node-config";
$('<div class="button-group sidebar-header">'+
'<a class="sidebar-header-button-toggle selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
@ -35,6 +35,9 @@ RED.sidebar.config = (function() {
var flowCategories = $("<div>").appendTo(content);
var subflowCategories = $("<div>").appendTo(content);
var shade = $('<div class="sidebar-node-config-shade hide"></div>').appendTo(content);
var showUnusedOnly = false;
var categories = {};
@ -288,6 +291,12 @@ RED.sidebar.config = (function() {
return {
init:init,
show:show,
refresh:refreshConfigNodeList
refresh:refreshConfigNodeList,
disable: function() {
shade.show();
},
enable: function() {
shade.hide();
}
}
})();

64
editor/js/ui/tray.js
View File

@ -22,23 +22,26 @@ RED.tray = (function() {
}
function showTray(options) {
var el = $('<div class="editor-tray"></div>');
var header = $('<div class="editor-tray-header">'+(options.title||"")+'</div>').appendTo(el);
var header = $('<div class="editor-tray-header"></div>').appendTo(el);
var body = $('<div class="editor-tray-body"></div>').appendTo(el);
var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
var resizer = $('<div class="editor-tray-resize-handle"></div>').appendTo(el);
var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
// var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
// var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
if (options.title) {
$('<div class="editor-tray-titlebar">'+options.title+'</div>').appendTo(header);
}
var buttonBar = $('<div class="editor-tray-toolbar"></div>').appendTo(header);
if (options.buttons) {
for (var i=0;i<options.buttons.length;i++) {
var button = options.buttons[i];
var b = $('<button>').appendTo(footer);
var b = $('<button>').appendTo(buttonBar);
if (button.id) {
b.attr('id',button.id);
}
if (button.text) {
b.text(button.text);
b.html(button.text);
}
if (button.click) {
b.click(button.click);
@ -56,6 +59,8 @@ RED.tray = (function() {
footer: footer,
options: options
};
stack.push(tray);
el.draggable({
handle: resizer,
axis: "x",
@ -88,6 +93,7 @@ RED.tray = (function() {
$("#header-shade").show();
$("#editor-shade").show();
RED.sidebar.config.disable();
tray.preferredWidth = el.width();
if (options.width) {
@ -103,8 +109,6 @@ RED.tray = (function() {
});
$("#workspace").scrollLeft(0);
stack.push(tray);
var trayHeight = el.height()-header.outerHeight()-footer.outerHeight();
body.height(trayHeight-40);
@ -123,27 +127,27 @@ RED.tray = (function() {
el.css({right:0});
},0);
growButton.click(function(e) {
e.preventDefault();
tray.lastWidth = tray.width;
tray.width = $("#editor-stack").position().left-8;
el.width(tray.width);
if (options.resize) {
options.resize({width:tray.width});
}
});
shrinkButton.click(function(e) {
e.preventDefault();
if (tray.lastWidth && tray.width > tray.lastWidth) {
tray.width = tray.lastWidth;
} else if (tray.width > tray.preferredWidth) {
tray.width = tray.preferredWidth;
}
el.width(tray.width);
if (options.resize) {
options.resize({width:tray.width});
}
});
// growButton.click(function(e) {
// e.preventDefault();
// tray.lastWidth = tray.width;
// tray.width = $("#editor-stack").position().left-8;
// el.width(tray.width);
// if (options.resize) {
// options.resize({width:tray.width});
// }
// });
// shrinkButton.click(function(e) {
// e.preventDefault();
// if (tray.lastWidth && tray.width > tray.lastWidth) {
// tray.width = tray.lastWidth;
// } else if (tray.width > tray.preferredWidth) {
// tray.width = tray.preferredWidth;
// }
// el.width(tray.width);
// if (options.resize) {
// options.resize({width:tray.width});
// }
// });
}
@ -212,6 +216,8 @@ RED.tray = (function() {
if (stack.length === 0) {
$("#header-shade").hide();
$("#editor-shade").hide();
RED.sidebar.config.enable();
}
}
}

5
editor/sass/colors.scss
View File

@ -52,3 +52,8 @@ $workspace-button-color-focus-outline: rgba(85,150,230,0.2);
$typedInput-button-background: #efefef;
$typedInput-button-background-hover: #ddd;
$typedInput-button-background-active: #e3e3e3;
$editor-button-color-primary: #666;
$editor-button-color-secondary: #999;
$shade-color: rgba(220,220,220,0.5);

205
editor/sass/editor.scss
View File

@ -1,5 +1,5 @@
/**
* Copyright 2015 IBM Corp.
* Copyright 2015, 2016 IBM Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@ -15,88 +15,139 @@
**/
#editor-stack {
position: absolute;
margin: 0;
top: 0;
bottom: 0px;
right: 323px;
width: 0;
}
.editor-tray {
position:absolute;
margin: 0;
top: 0;
min-width: 500px;
width: auto;
right: -1000px;
bottom: 0;
background: #fff;
border-left: 1px solid $secondary-border-color;
border-bottom: 1px solid $primary-border-color;
box-sizing: content-box;
}
.editor-tray.open {
right: 0;
}
.editor-tray-body {
width: auto;
padding: 20px;
min-width: 500px;
box-sizing: border-box;
overflow-y: scroll;
}
.editor-tray-header {
padding: 10px;
box-sizing: border-box;
font-weight: bold;
height: 40px;
border-bottom: 1px solid $primary-border-color;
background: $palette-header-background;
}
.editor-tray-footer {
@include component-footer;
height: auto;
padding: 8px;
button {
@include workspace-button;
padding: 0.4em 1em;
margin-right: 8px;
#editor-stack {
position: absolute;
margin: 0;
top: 0;
bottom: 0px;
right: 323px;
width: 0;
}
.editor-tray {
position:absolute;
margin: 0;
top: 0;
min-width: 500px;
width: auto;
right: -1000px;
bottom: 0;
background: #fff;
border-left: 1px solid $secondary-border-color;
border-bottom: 1px solid $primary-border-color;
box-sizing: content-box;
}
.editor-tray.open {
right: 0;
}
.editor-tray-body {
width: auto;
padding: 20px;
min-width: 500px;
box-sizing: border-box;
overflow-y: scroll;
}
.editor-tray-header {
@include disable-selection;
position: relative;
box-sizing: border-box;
font-weight: bold;
border-bottom: 1px solid $secondary-border-color;
background: $palette-header-background;
&:after {
content: "";
display: table;
clear: both;
}
}
&.leftButton {
margin-right: 40px;
}
}
}
.editor-tray-resize-handle {
position: absolute;
top: 0px;
bottom: 0px;
width: 7px;
left: -9px;
background: $background-color url(images/grip.png) no-repeat 50% 50%;
cursor: col-resize;
border-left: 1px solid $primary-border-color;
box-shadow: -1px 0 6px rgba(0,0,0,0.1);
}
.editor-tray-footer {
@include component-footer;
height: 35px;
}
.editor-tray-toolbar {
text-align: right;
padding: 8px;
button {
@include workspace-button;
padding: 0.4em 1em;
margin-right: 8px;
color: $editor-button-color-primary;
&.leftButton {
float: left;
margin-top: 1px;
}
&:not(.leftButton):not(:last-child) {
margin-right: 16px;
}
&:not(.primary) {
background: none;
&:hover {
color: $editor-button-color-primary;
}
}
}
}
.editor-tray-titlebar {
border-bottom: 1px solid $secondary-border-color;
padding: 8px;
}
.editor-tray-breadcrumbs {
list-style-type: none;
margin: 0;
padding:0;
li {
display: inline-block;
padding:0;
margin:0;
&:not(:last-child) {
color: $editor-button-color-secondary;
font-weight: normal;
&:after {
display: inline-block;
content: '>';
margin: 0 5px;
}
}
}
}
.editor-tray-resize-handle {
position: absolute;
top: 0px;
bottom: 0px;
width: 7px;
left: -9px;
background: $background-color url(images/grip.png) no-repeat 50% 50%;
cursor: col-resize;
border-left: 1px solid $primary-border-color;
box-shadow: -1px 0 6px rgba(0,0,0,0.1);
}
.editor-tray-resize-button {
@include workspace-button;
display: block;
height: 20px;
height: 37px;
line-height: 35px;
border: none;
border-bottom: 1px solid $secondary-border-color;
margin: 0;
background: $background-color;
color: $workspace-button-color-disabled;
color: $workspace-button-color;
}
#editor-shade, #header-shade {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
background: $shade-color;
}
#editor-shade, #header-shade {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
background: rgba(220,220,220,0.5);
}
.dialog-form,#dialog-form, #dialog-config-form {
@ -164,6 +215,7 @@
cursor: auto;
float: right;
font-size: 12px !important;
line-height: 35px;
}
#node-config-dialog-scope-warning {
display: inline-block;
@ -175,13 +227,14 @@
margin: 1px 0 0 0;
padding: 0;
height: 22px;
width: 110px;
width: 150px;
}
#node-config-dialog-user-count {
vertical-align: middle;
display:inline-block;
margin-top: 10px;
margin-right: 20px;
float:left;
font-size: 12px;
line-height: 35px;
}

10
editor/sass/tab-config.scss
View File

@ -15,11 +15,21 @@
**/
.sidebar-node-config {
position: relative;
background: #f3f3f3;
height: 100%;
overflow-y:auto;
@include disable-selection;
}
.sidebar-node-config-shade {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
background: $shade-color;
}
.config-node-list {
margin: 0;

2
red/api/locales/en-US/editor.json
View File

@ -3,6 +3,7 @@
"label": {
"name": "Name",
"ok": "Ok",
"done":"Done",
"cancel": "Cancel",
"delete": "Delete",
"close": "Close"
@ -128,6 +129,7 @@
"nodesUse": "__count__ node uses this config",
"nodesUse_plural": "__count__ nodes use this config",
"addNewConfig": "Add new __type__ config node",
"editNode": "Edit __type__ node",
"editConfig": "Edit __type__ config node",
"addNewType": "Add new __type__...",
"errors": {