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

More UI refresh

This commit is contained in:
Nick O'Leary 2015-07-13 23:21:03 +01:00
parent 62e8f564b9
commit 27aa5ae7db
25 changed files with 189 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
editor/images/grip.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 193 B

After

Width:  |  Height:  |  Size: 192 B

4
editor/js/ui/editor.js
View File

@ -362,7 +362,7 @@ RED.editor = (function() {
input.replaceWith('<select style="width: 60%;" id="node-input-'+property+'"></select>'); input.replaceWith('<select style="width: 60%;" id="node-input-'+property+'"></select>');
updateConfigNodeSelect(property,type,node[property]); updateConfigNodeSelect(property,type,node[property]);
var select = $("#node-input-"+property); var select = $("#node-input-"+property);
select.after(' <a id="node-input-lookup-'+property+'" class="btn"><i class="fa fa-pencil"></i></a>'); select.after(' <a id="node-input-lookup-'+property+'" class="editor-button"><i class="fa fa-pencil"></i></a>');
$('#node-input-lookup-'+property).click(function(e) { $('#node-input-lookup-'+property).click(function(e) {
showEditConfigNodeDialog(property,type,select.find(":selected").val()); showEditConfigNodeDialog(property,type,select.find(":selected").val());
e.preventDefault(); e.preventDefault();
@ -390,7 +390,7 @@ RED.editor = (function() {
input.val(node[property]); input.val(node[property]);
input.attr("type","hidden"); input.attr("type","hidden");
var button = $("<a>",{id:"node-input-edit-"+property, class:"btn"}); var button = $("<a>",{id:"node-input-edit-"+property, class:"editor-button"});
input.after(button); input.after(button);
if (node[property]) { if (node[property]) {

6
editor/js/ui/library.js
View File

@ -142,9 +142,9 @@ RED.library = (function() {
return ul; return ul;
} }
$('#node-input-name').addClass('input-append-left').css("width","65%").after( $('#node-input-name').css("width","60%").after(
'<div class="btn-group" style="margin-left: 0px;">'+ '<div class="btn-group" style="margin-left: 5px;">'+
'<button id="node-input-'+options.type+'-lookup" class="btn input-append-right" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></button>'+ '<a id="node-input-'+options.type+'-lookup" class="editor-button" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>'+
'<ul class="dropdown-menu pull-right" role="menu">'+ '<ul class="dropdown-menu pull-right" role="menu">'+
'<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">'+RED._("library.openLibrary")+'</a></li>'+ '<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">'+RED._("library.openLibrary")+'</a></li>'+
'<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">'+RED._("library.saveToLibrary")+'</a></li>'+ '<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">'+RED._("library.saveToLibrary")+'</a></li>'+

7
editor/js/ui/notifications.js
View File

@ -30,10 +30,10 @@ RED.notify = (function() {
} }
var n = document.createElement("div"); var n = document.createElement("div");
n.id="red-notification-"+c; n.id="red-notification-"+c;
n.className = "alert"; n.className = "notification";
n.fixed = fixed; n.fixed = fixed;
if (type) { if (type) {
n.className = "alert alert-"+type; n.className = "notification notification-"+type;
} }
n.style.display = "none"; n.style.display = "none";
n.innerHTML = msg; n.innerHTML = msg;
@ -44,7 +44,7 @@ RED.notify = (function() {
return function() { return function() {
currentNotifications.splice(currentNotifications.indexOf(nn),1); currentNotifications.splice(currentNotifications.indexOf(nn),1);
$(nn).slideUp(300, function() { $(nn).slideUp(300, function() {
nn.parentNode.removeChild(nn); nn.parentNode.removeChild(nn);
}); });
}; };
})(); })();
@ -56,4 +56,3 @@ RED.notify = (function() {
return n; return n;
} }
})(); })();

8
editor/js/ui/sidebar.js
View File

@ -97,7 +97,7 @@ RED.sidebar = (function() {
if (!RED.menu.isSelected("menu-item-sidebar")) { if (!RED.menu.isSelected("menu-item-sidebar")) {
sidebarSeparator.opening = true; sidebarSeparator.opening = true;
var newChartRight = 10; var newChartRight = 7;
$("#sidebar").addClass("closing"); $("#sidebar").addClass("closing");
$("#workspace").css("right",newChartRight); $("#workspace").css("right",newChartRight);
$("#chart-zoom-controls").css("right",newChartRight+20); $("#chart-zoom-controls").css("right",newChartRight+20);
@ -151,12 +151,12 @@ RED.sidebar = (function() {
RED.menu.setSelected("menu-item-sidebar",false); RED.menu.setSelected("menu-item-sidebar",false);
if ($("#sidebar").width() < 180) { if ($("#sidebar").width() < 180) {
$("#sidebar").width(180); $("#sidebar").width(180);
$("#workspace").css("right",191); $("#workspace").css("right",187);
$("#chart-zoom-controls").css("right",211); $("#chart-zoom-controls").css("right",210);
} }
} }
$("#sidebar-separator").css("left","auto"); $("#sidebar-separator").css("left","auto");
$("#sidebar-separator").css("right",($("#sidebar").width()+3)+"px"); $("#sidebar-separator").css("right",($("#sidebar").width()+2)+"px");
RED.events.emit("sidebar:resize"); RED.events.emit("sidebar:resize");
} }
}); });

1
editor/js/ui/tab-info.js
View File

@ -30,6 +30,7 @@ RED.sidebar.info = (function() {
content.style.paddingTop = "4px"; content.style.paddingTop = "4px";
content.style.paddingLeft = "4px"; content.style.paddingLeft = "4px";
content.style.paddingRight = "4px"; content.style.paddingRight = "4px";
content.className = "sidebar-node-info"
var propertiesExpanded = false; var propertiesExpanded = false;

2
editor/js/ui/view.js
View File

@ -1322,7 +1322,7 @@ RED.view = (function() {
.attr("class","node_icon_shade_border") .attr("class","node_icon_shade_border")
.attr("stroke-opacity","0.1") .attr("stroke-opacity","0.1")
.attr("stroke","#000") .attr("stroke","#000")
.attr("stroke-width","2"); .attr("stroke-width","1");
if ("right" == d._def.align) { if ("right" == d._def.align) {
icon_group.attr('class','node_icon_group node_icon_group_'+d._def.align); icon_group.attr('class','node_icon_group node_icon_group_'+d._def.align);

4
editor/js/ui/workspaces.js
View File

@ -206,6 +206,10 @@ RED.workspaces = (function() {
RED.menu.setAction('menu-item-workspace-delete',function() { RED.menu.setAction('menu-item-workspace-delete',function() {
deleteWorkspace(RED.nodes.workspace(activeWorkspace)); deleteWorkspace(RED.nodes.workspace(activeWorkspace));
}); });
$(window).resize(function() {
workspace_tabs.resize();
});
} }
function removeWorkspace(ws) { function removeWorkspace(ws) {

15
editor/sass/colors.scss
View File

@ -19,13 +19,24 @@ $form-text-color: #444;
$form-input-focus-color: rgba(85,150,230,0.8); $form-input-focus-color: rgba(85,150,230,0.8);
$form-input-border-color: #ccc; $form-input-border-color: #ccc;
$node-selected-color: #5596E6; // #ff7f0e
$node-selected-color: #ff7f0e;
$port-selected-color: #ff7f0e;
$link-color: #888;
$link-subflow-color: #bbb;
$link-unknown-color: #f00;
$primary-border-color: #bbbbbb; $primary-border-color: #bbbbbb;
$secondary-border-color: #dddddd; $secondary-border-color: #dddddd;
$tab-background-active: #fff;
$tab-background-inactive: #f0f0f0;
$tab-background-hover: #ddd;
$palette-header-background: #f3f3f3;
$workspace-button-background: #fff; $workspace-button-background: #fff;
$workspace-button-background-hover: #f3f3f3; $workspace-button-background-hover: #ddd;
$workspace-button-background-active: #efefef; $workspace-button-background-active: #efefef;
$workspace-button-color: #999; $workspace-button-color: #999;
$workspace-button-color-disabled: #ccc; $workspace-button-color-disabled: #ccc;

34
editor/sass/editor.scss
View File

@ -30,7 +30,7 @@
.form-row { .form-row {
clear: both; clear: both;
color: $form-text-color; color: $form-text-color;
margin-bottom:10px; margin-bottom:12px;
} }
.form-row label { .form-row label {
display: inline-block; display: inline-block;
@ -40,32 +40,21 @@
width:70%; width:70%;
} }
input.input-append-left {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
button.input-append-right {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
margin-left: -1px !important;
padding-left: 4px !important;
padding-right: 4px !important;
}
.form-tips { .form-tips {
background: lightgoldenrodyellow; background: #ffe;
font-size: 12px; font-size: 12px;
padding: 8px; padding: 8px;
border-radius: 5px; border-radius: 2px;
border: 1px solid #999; border: 1px solid $secondary-border-color;
max-width: 450px; max-width: 450px;
} }
.form-tips code { .form-tips code {
border: none; border: none;
padding: auto; padding: auto;
} }
.form-tips a {
text-decoration: underline;
}
.node-text-editor { .node-text-editor {
border:1px solid #ccc; border:1px solid #ccc;
@ -74,3 +63,12 @@ button.input-append-right {
font-size: 14px !important; font-size: 14px !important;
font-family: monospace !important; font-family: monospace !important;
} }
.editor-button {
@include workspace-button;
height: 30px;
line-height: 28px;
font-size: 12px;
border-radius: 3px;
padding: 0 10px;
}

10
editor/sass/flow.scss
View File

@ -166,8 +166,8 @@
} }
.port_hovered { .port_hovered {
stroke: #ff7f0e; stroke: $port-selected-color;
fill: #ff7f0e; fill: $port-selected-color;
} }
.subflowport { .subflowport {
stroke-dasharray: 5,5; stroke-dasharray: 5,5;
@ -190,14 +190,14 @@
} }
.link_line { .link_line {
stroke: #7f7f7f; stroke: $link-color;
stroke-width: 3; stroke-width: 3;
fill: none; fill: none;
pointer-events: none; pointer-events: none;
} }
.link_subflow { .link_subflow {
stroke: #bbb; stroke: $link-subflow-color;
stroke-dasharray: 10,5; stroke-dasharray: 10,5;
stroke-width: 2; stroke-width: 2;
} }
@ -221,7 +221,7 @@ g.link_selected path.link_line {
stroke: $node-selected-color; stroke: $node-selected-color;
} }
g.link_unknown path.link_line { g.link_unknown path.link_line {
stroke: #f00; stroke: $link-unknown-color;
stroke-width: 2; stroke-width: 2;
stroke-dasharray: 10, 4; stroke-dasharray: 10, 4;
} }

14
editor/sass/library.scss
View File

@ -31,17 +31,3 @@
#node-select-library li.list-hover { #node-select-library li.list-hover {
background: #ffffd0; background: #ffffd0;
} }
.library-button {
box-sizing: border-box;
height: 28px;
line-height: 28px;
display: inline-block;
font-size: 12px;
padding: 0px 8px;
text-decoration: none;
border-radius: 0px;
color: #666;
background: #f6f6f6;
margin: 0 5px;
}

3
editor/sass/mixins.scss
View File

@ -29,6 +29,7 @@
} }
@mixin workspace-button { @mixin workspace-button {
@include disable-selection;
color: $workspace-button-color; color: $workspace-button-color;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
@ -37,11 +38,13 @@
text-align: center; text-align: center;
margin:0; margin:0;
text-decoration: none; text-decoration: none;
cursor:pointer;
&.disabled { &.disabled {
cursor: default; cursor: default;
color: $workspace-button-color-disabled; color: $workspace-button-color-disabled;
} }
&:not(.disabled):hover { &:not(.disabled):hover {
text-decoration: none;
color: $workspace-button-color-hover; color: $workspace-button-color-hover;
background: $workspace-button-background-hover; background: $workspace-button-background-hover;
} }

90
editor/sass/notifications.scss
View File

@ -14,19 +14,87 @@
* limitations under the License. * limitations under the License.
**/ **/
#notifications {
z-index: 10000;
width: 500px;
margin-left: -250px;
left: 50%;
position: absolute;
top: 1px;
}
.notification {
box-sizing: border-box;
position: relative;
padding: 14px 18px;
margin-bottom: 4px;
box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
background-color: #fff;
color: #666;
border: 1px solid #325C80;
border-left-width: 16px;
}
.notification-success {
border-color: #4B8400;
}
.notification-warning {
border-color: #D74108;
}
.notification-error {
border-color: #AD1625;
}
/*
.notification {
box-sizing: border-box;
position: relative;
padding: 12px 20px;
margin-bottom: 4px;
box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
color: #f0f0f0;
background-color: #5AAAFA;
border: 1px solid #325C80;
border-left-width: 16px;
}
.notification-success {
background: #5AA700;
border-color: #4B8400;
}
.notification-warning {
background:#FF7832;
border-color: #D74108;
}
.notification-error {
background: #FF5050;
border-color: #AD1625;
}
*/
/*
.notification { .notification {
position: absolute; position: relative;
padding: 12px 20px;
margin-bottom: 4px;
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.15);
color: #325C80;
background-color: #C0E6FF;
border: 1px solid #325C80;
} }
#notifications {
z-index: 10000; .notification-success {
width: 500px; color: #4B8400;
margin-left: -250px; background-color: #C8F08F;
left: 50%; border-color: #4B8400;
position: absolute;
top: 1px;
} }
#notifications .alert { .notification-warning {
box-shadow: 0 0 1px 1px; color:#D74108;
margin-bottom: 5px; border-color: #D74108;
background-color:#FFD791;
} }
.notification-error {
color: #AD1625;
background-color: #FFD2DD;
border-color: #AD1625;
}
*/

2
editor/sass/palette.scss
View File

@ -102,7 +102,7 @@
} }
.palette-header { .palette-header {
background: #f3f3f3; background: $palette-header-background;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
padding: 9px; padding: 9px;

14
editor/sass/sidebar.scss
View File

@ -45,14 +45,22 @@
#sidebar-separator { #sidebar-separator {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 316px; right: 315px;
bottom:10px; bottom:10px;
width: 10px; width: 7px;
background: url(images/grip.png) no-repeat 50% 50%; background: url(images/grip.png) no-repeat 50% 50%;
cursor: col-resize; cursor: col-resize;
} }
.sidebar-closed > #sidebar { display: none; } .sidebar-closed > #sidebar { display: none; }
.sidebar-closed > #sidebar-separator { right: 0px !important; } .sidebar-closed > #sidebar-separator { right: 0px !important; }
.sidebar-closed > #workspace { right: 10px !important; } .sidebar-closed > #workspace { right: 7px !important; }
.sidebar-closed > #chart-zoom-controls { right: 30px !important; } .sidebar-closed > #chart-zoom-controls { right: 30px !important; }
#sidebar .button {
@include workspace-button;
line-height: 18px;
font-size: 12px;
margin-right: 5px;
padding: 2px 8px;
}

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

@ -14,6 +14,10 @@
* limitations under the License. * limitations under the License.
**/ **/
.sidebar-node-info hr {
margin: 10px 0;
}
table.node-info { table.node-info {
font-size: 14px; font-size: 14px;
margin: 5px; margin: 5px;
@ -64,11 +68,15 @@ div.node-info {
margin: 8px auto; margin: 8px auto;
} }
h2 { h2 {
font-weight: normal;
font-size: 18px;
margin: 8px auto;
}
h3 {
font-weight: normal; font-weight: normal;
font-size: 16px; font-size: 16px;
margin: 8px auto; margin: 8px auto;
} }
h3,
h4, h4,
h5 { h5 {
font-weight: normal; font-weight: normal;

6
editor/sass/tabs.scss
View File

@ -37,7 +37,7 @@ ul.red-ui-tabs li {
border-top: 1px solid $primary-border-color; border-top: 1px solid $primary-border-color;
border-right: 1px solid $primary-border-color; border-right: 1px solid $primary-border-color;
border-bottom: 1px solid $primary-border-color; border-bottom: 1px solid $primary-border-color;
background: #f3f3f3; background: $tab-background-inactive;
margin: 3px 3px 0 3px; margin: 3px 3px 0 3px;
height: 32px; height: 32px;
line-height: 29px; line-height: 29px;
@ -77,14 +77,14 @@ ul.red-ui-tabs li a.red-ui-tab-close:hover {
} }
ul.red-ui-tabs li a:hover { ul.red-ui-tabs li a:hover {
text-decoration: none; text-decoration: none;
background: #ddd; background: $tab-background-hover;
} }
ul.red-ui-tabs li a:focus { ul.red-ui-tabs li a:focus {
text-decoration: none; text-decoration: none;
} }
ul.red-ui-tabs li.active { ul.red-ui-tabs li.active {
background: #fff; background: $tab-background-active;
font-weight: bold; font-weight: bold;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
} }

2
editor/sass/workspace.scss
View File

@ -35,7 +35,7 @@
top:0px; top:0px;
left:179px; left:179px;
bottom: 10px; bottom: 10px;
right: 326px; right: 322px;
overflow: hidden; overflow: hidden;
@include component-border; @include component-border;
} }

2
nodes/core/core/58-debug.html
View File

@ -133,7 +133,7 @@
toolbar.id = "debug-toolbar"; toolbar.id = "debug-toolbar";
content.appendChild(toolbar); content.appendChild(toolbar);
toolbar.innerHTML = '<div class="btn-group pull-right"><a id="debug-tab-clear" title="clear log" class="btn btn-mini" href="#"><i class="fa fa-trash"></i></a></div> '; toolbar.innerHTML = '<div class="pull-right"><a id="debug-tab-clear" title="clear log" class="button" href="#"><i class="fa fa-trash"></i></a></div> ';
var messages = document.createElement("div"); var messages = document.createElement("div");
messages.id = "debug-content"; messages.id = "debug-content";

4
nodes/core/core/90-comment.html
View File

@ -51,9 +51,7 @@
return this.name?"node_label_italic":""; return this.name?"node_label_italic":"";
}, },
info: function() { info: function() {
var t = this.name || this._("comment.defaulttitle"); return (this.name?"# "+this.name+"\n":"")+(this.info||"");
var b = this.info || this._("comment.defaultinfo");
return "### "+t+"\n"+b;
}, },
oneditprepare: function() { oneditprepare: function() {
var that = this; var that = this;

2
nodes/core/io/21-httpin.html
View File

@ -33,7 +33,7 @@
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name"> <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
</div> </div>
<div class="form-row row-swagger-doc"> <div class="form-row row-swagger-doc">
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="httpin.label.doc"></span></label> <label for="node-input-swaggerDoc"><i class="fa fa-tag"></i> <span data-i18n="httpin.label.doc"></span></label>
<input type="text" id="node-input-swaggerDoc"> <input type="text" id="node-input-swaggerDoc">
</div> </div>
<div id="node-input-tip" class="form-tips"><span data-i18n="httpin.tip.in"></span><code><span id="node-input-path"></span></code>.</div> <div id="node-input-tip" class="form-tips"><span data-i18n="httpin.tip.in"></span><code><span id="node-input-path"></span></code>.</div>

4
nodes/core/locales/en-US/messages.json
View File

@ -172,9 +172,7 @@
"title": "Title", "title": "Title",
"body": "Body" "body": "Body"
}, },
"tip": "Tip: The text can be styled as <a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_new\">Github flavoured Markdown</a>", "tip": "Tip: The text can be styled as <a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_new\">Github flavoured Markdown</a>"
"defaulttitle": "Comment node",
"defaultinfo": "Use this node to add simple documentation.\n\nAnything you add will be rendered in this info panel.\n\nYou may use Markdown syntax to **enhance** the *presentation*."
}, },
"unknown": { "unknown": {
"label": { "label": {

8
nodes/core/logic/10-switch.html
View File

@ -28,7 +28,7 @@
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">
<a href="#" class="btn btn-mini" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="switch.label.rule"></span></a> <a href="#" class="editor-button" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="switch.label.rule"></span></a>
</div> </div>
<div class="form-row"> <div class="form-row">
<select id="node-input-checkall" style="width:100%; margin-right:5px;"> <select id="node-input-checkall" style="width:100%; margin-right:5px;">
@ -99,10 +99,10 @@
btwnField.append(" and "); btwnField.append(" and ");
var btwnValue2Field = $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"width: 50px;margin-left:2px;"}).appendTo(btwnField); var btwnValue2Field = $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"width: 50px;margin-left:2px;"}).appendTo(btwnField);
var finalspan = $('<span/>',{style:"float: right; margin-top: 3px;margin-right: 10px;"}).appendTo(row); var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
finalspan.append(' &#8594; <span class="node-input-rule-index">'+i+'</span> '); finalspan.append(' &#8594; <span class="node-input-rule-index">'+i+'</span> ');
var deleteButton = $('<a/>',{href:"#",class:"btn btn-mini", style:"margin-left: 5px;"}).appendTo(finalspan); var deleteButton = $('<a/>',{href:"#",class:"editor-button", style:"margin-left: 5px;"}).appendTo(finalspan);
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton); $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
selectField.change(function() { selectField.change(function() {
@ -171,7 +171,7 @@
height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom"))); height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
$("#node-input-rule-container-div").css("height",height+"px"); $("#node-input-rule-container-div").css("height",height+"px");
}; };
$( "#node-input-rule-container" ).sortable({ $( "#node-input-rule-container" ).sortable({
axis: "y", axis: "y",
update: function( event, ui ) { update: function( event, ui ) {

44
nodes/core/logic/15-change.html
View File

@ -28,7 +28,7 @@
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">
<a href="#" class="btn btn-mini" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="change.label.rule"></span></a> <a href="#" class="editor-button" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="change.label.rule"></span></a>
</div> </div>
</script> </script>
@ -101,12 +101,12 @@
var regex = this._("change.label.regex"); var regex = this._("change.label.regex");
if (this.reg === null) { $("#node-input-reg").prop('checked', true); } if (this.reg === null) { $("#node-input-reg").prop('checked', true); }
$("#node-input-action").change(); $("#node-input-action").change();
function generateRule(rule) { function generateRule(rule) {
var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"}); var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"});
var row1 = $('<div/>').appendTo(container); var row1 = $('<div/>').appendTo(container);
var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container); var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container); var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
@ -115,36 +115,36 @@
for (var i=0;i<3;i++) { for (var i=0;i<3;i++) {
selectField.append($("<option></option>").val(selectOptions[i].v).text(selectOptions[i].l)); selectField.append($("<option></option>").val(selectOptions[i].v).text(selectOptions[i].l));
} }
$('<div/>',{style:"display:inline-block; width: 50px; text-align: right;"}).text("msg.").appendTo(row1); $('<div/>',{style:"display:inline-block; width: 50px; text-align: right;"}).text("msg.").appendTo(row1);
var propertyName = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-name",type:"text"}).appendTo(row1); var propertyName = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-name",type:"text"}).appendTo(row1);
var finalspan = $('<span/>',{style:"float: right; margin-top: 3px;margin-right: 10px;"}).appendTo(row1); var finalspan = $('<span/>',{style:"float: right; margin-right: 10px;"}).appendTo(row1);
var deleteButton = $('<a/>',{href:"#",class:"btn btn-mini", style:"margin-left: 5px;"}).appendTo(finalspan); var deleteButton = $('<a/>',{href:"#",class:"editor-button", style:"margin-left: 5px;"}).appendTo(finalspan);
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton); $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
$('<div/>',{style:"display: inline-block;text-align:right; width:150px;padding-right: 10px; box-sizing: border-box;"}).text(to).appendTo(row2); $('<div/>',{style:"display: inline-block;text-align:right; width:150px;padding-right: 10px; box-sizing: border-box;"}).text(to).appendTo(row2);
var propertyValue = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-value",type:"text"}).appendTo(row2); var propertyValue = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-value",type:"text"}).appendTo(row2);
var row3_1 = $('<div/>').appendTo(row3); var row3_1 = $('<div/>').appendTo(row3);
$('<div/>',{style:"display: inline-block;text-align:right; width:150px;padding-right: 10px; box-sizing: border-box;"}).text(search).appendTo(row3_1); $('<div/>',{style:"display: inline-block;text-align:right; width:150px;padding-right: 10px; box-sizing: border-box;"}).text(search).appendTo(row3_1);
var fromValue = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-search-value",type:"text"}).appendTo(row3_1); var fromValue = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-search-value",type:"text"}).appendTo(row3_1);
var row3_2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3); var row3_2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3);
$('<div/>',{style:"display: inline-block;text-align:right; width:150px;padding-right: 10px; box-sizing: border-box;"}).text(replace).appendTo(row3_2); $('<div/>',{style:"display: inline-block;text-align:right; width:150px;padding-right: 10px; box-sizing: border-box;"}).text(replace).appendTo(row3_2);
var toValue = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-replace-value",type:"text"}).appendTo(row3_2); var toValue = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-replace-value",type:"text"}).appendTo(row3_2);
var row3_3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3); var row3_3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3);
var id = "node-input-rule-property-regex-"+Math.floor(Math.random()*10000); var id = "node-input-rule-property-regex-"+Math.floor(Math.random()*10000);
var useRegExp = $('<input/>',{id:id,class:"node-input-rule-property-re",type:"checkbox", style:"margin-left: 150px; margin-right: 10px; display: inline-block; width: auto; vertical-align: top;"}).appendTo(row3_3); var useRegExp = $('<input/>',{id:id,class:"node-input-rule-property-re",type:"checkbox", style:"margin-left: 150px; margin-right: 10px; display: inline-block; width: auto; vertical-align: top;"}).appendTo(row3_3);
$('<label/>',{for:id,style:"width: auto;"}).text(regex).appendTo(row3_3); $('<label/>',{for:id,style:"width: auto;"}).text(regex).appendTo(row3_3);
selectField.change(function() { selectField.change(function() {
var type = $(this).val(); var type = $(this).val();
if (type == "set") { if (type == "set") {
row2.show(); row2.show();
row3.hide(); row3.hide();
@ -162,7 +162,7 @@
$(this).remove(); $(this).remove();
}); });
}); });
selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true); selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
propertyName.val(rule.p); propertyName.val(rule.p);
propertyValue.val(rule.to); propertyValue.val(rule.to);
@ -170,19 +170,19 @@
toValue.val(rule.to); toValue.val(rule.to);
useRegExp.prop('checked', rule.re); useRegExp.prop('checked', rule.re);
selectField.change(); selectField.change();
$("#node-input-rule-container").append(container); $("#node-input-rule-container").append(container);
} }
$("#node-input-add-rule").click(function() { $("#node-input-add-rule").click(function() {
generateRule({t:"replace",p:"payload"}); generateRule({t:"replace",p:"payload"});
}); });
if (!this.rules) { if (!this.rules) {
var rule = { var rule = {
t:(this.action=="replace"?"set":this.action), t:(this.action=="replace"?"set":this.action),
p:this.property p:this.property
} }
if (rule.t === "set") { if (rule.t === "set") {
rule.to = this.to; rule.to = this.to;
} else if (rule.t === "change") { } else if (rule.t === "change") {
@ -190,20 +190,20 @@
rule.to = this.to; rule.to = this.to;
rule.re = this.reg; rule.re = this.reg;
} }
delete this.to; delete this.to;
delete this.from; delete this.from;
delete this.reg; delete this.reg;
delete this.action; delete this.action;
delete this.property; delete this.property;
this.rules = [rule]; this.rules = [rule];
} }
for (var i=0;i<this.rules.length;i++) { for (var i=0;i<this.rules.length;i++) {
generateRule(this.rules[i]); generateRule(this.rules[i]);
} }
function changeDialogResize() { function changeDialogResize() {
var rows = $("#dialog-form>div:not(.node-input-rule-container-row)"); var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");
var height = $("#dialog-form").height(); var height = $("#dialog-form").height();