1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Make tray resizble and remember size per-node-type

This commit is contained in:
Nick O'Leary 2016-04-13 18:07:49 -07:00
parent f9c869f521
commit a9feeaa1c9
4 changed files with 115 additions and 67 deletions

View File

@ -19,6 +19,8 @@ RED.editor = (function() {
var editing_config_node = null; var editing_config_node = null;
var subflowEditor; var subflowEditor;
var editTrayWidthCache = {};
function getCredentialsURL(nodeType, nodeID) { function getCredentialsURL(nodeType, nodeID) {
var dashedType = nodeType.replace(/\s+/g, '-'); var dashedType = nodeType.replace(/\s+/g, '-');
return 'credentials/' + dashedType + "/" + nodeID; return 'credentials/' + dashedType + "/" + nodeID;
@ -560,7 +562,8 @@ RED.editor = (function() {
} }
} }
], ],
resize: function() { resize: function(dimensions) {
editTrayWidthCache[type] = dimensions.width;
if (editing_node && editing_node._def.oneditresize) { if (editing_node && editing_node._def.oneditresize) {
var form = $("#dialog-form"); var form = $("#dialog-form");
editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()}); editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
@ -645,6 +648,10 @@ RED.editor = (function() {
} }
}); });
*/ */
if (editTrayWidthCache[type]) {
trayOptions.width = editTrayWidthCache[type];
}
if (type === 'subflow') { if (type === 'subflow') {
var id = editing_node.type.substring(8); var id = editing_node.type.substring(8);
trayOptions.buttons.unshift({ trayOptions.buttons.unshift({

View File

@ -25,6 +25,7 @@ RED.tray = (function() {
var header = $('<div class="editor-tray-header">'+(options.title||"")+'</div>').appendTo(el); var header = $('<div class="editor-tray-header">'+(options.title||"")+'</div>').appendTo(el);
var body = $('<div class="editor-tray-body"></div>').appendTo(el); var body = $('<div class="editor-tray-body"></div>').appendTo(el);
var footer = $('<div class="editor-tray-footer"></div>').appendTo(el); var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
var resizer = $('<div class="editor-tray-resize-handle"></div>').appendTo(el);
if (options.buttons) { if (options.buttons) {
for (var i=0;i<options.buttons.length;i++) { for (var i=0;i<options.buttons.length;i++) {
var button = options.buttons[i]; var button = options.buttons[i];
@ -52,12 +53,39 @@ RED.tray = (function() {
footer: footer, footer: footer,
options: options options: options
}; };
el.draggable({
handle: resizer,
axis: "x",
start:function(event,ui) {
el.width('auto');
},
drag: function(event,ui) {
if (ui.position.left > -501) {
ui.position.left = -501;
} else if (tray.options.resize) {
setTimeout(function() {
tray.options.resize({width: -ui.position.left});
},0);
}
},
stop:function(event,ui) {
el.width(-ui.position.left);
el.css({left:''});
if (tray.options.resize) {
tray.options.resize({width: -ui.position.left});
}
}
});
if (options.open) { if (options.open) {
options.open(el); options.open(el);
} }
$("#header-shade").show(); $("#header-shade").show();
$("#editor-shade").show(); $("#editor-shade").show();
if (options.width) {
el.width(options.width);
}
el.css({ el.css({
right: -(el.width()+10)+"px", right: -(el.width()+10)+"px",
transition: "right 0.2s ease" transition: "right 0.2s ease"
@ -72,7 +100,7 @@ RED.tray = (function() {
setTimeout(function() { setTimeout(function() {
setTimeout(function() { setTimeout(function() {
if (options.resize) { if (options.resize) {
options.resize(); options.resize({width:el.width()});
} }
if (options.show) { if (options.show) {
options.show(); options.show();
@ -83,7 +111,7 @@ RED.tray = (function() {
} }
return { return {
init: function() { init: function init() {
$( window ).resize(function() { $( window ).resize(function() {
if (stack.length > 0) { if (stack.length > 0) {
var tray = stack[stack.length-1]; var tray = stack[stack.length-1];
@ -91,7 +119,7 @@ RED.tray = (function() {
tray.body.height(trayHeight-40); tray.body.height(trayHeight-40);
if (tray.options.resize) { if (tray.options.resize) {
tray.options.resize(); tray.options.resize({width:tray.tray.width()});
} }
} }
}); });

View File

@ -14,6 +14,82 @@
* limitations under the License. * limitations under the License.
**/ **/
#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;
&.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-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 { .dialog-form,#dialog-form, #dialog-config-form {
margin: 0; margin: 0;
height: 100%; height: 100%;

View File

@ -50,69 +50,6 @@
margin-right: 35px; margin-right: 35px;
} }
#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 $primary-border-color;
border-bottom: 1px solid $primary-border-color;
box-sizing: content-box;
box-shadow: -1px 0 10px rgba(0,0,0,0.1);
}
.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;
&.leftButton {
margin-right: 40px;
}
}
}
#editor-shade, #header-shade {
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
background: rgba(220,220,220,0.5);
}
#workspace-add-tab { #workspace-add-tab {