mirror of https://github.com/node-red/node-red.git
Make tray resizble and remember size per-node-type
This commit is contained in:
Nick O'Leary
parent
f9c869f521
commit
a9feeaa1c9
|
|
@ -19,6 +19,8 @@ RED.editor = (function() {
|
|||
var editing_config_node = null;
|
||||
var subflowEditor;
|
||||
|
||||
var editTrayWidthCache = {};
|
||||
|
||||
function getCredentialsURL(nodeType, nodeID) {
|
||||
var dashedType = nodeType.replace(/\s+/g, '-');
|
||||
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) {
|
||||
var form = $("#dialog-form");
|
||||
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') {
|
||||
var id = editing_node.type.substring(8);
|
||||
trayOptions.buttons.unshift({
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ RED.tray = (function() {
|
|||
var header = $('<div class="editor-tray-header">'+(options.title||"")+'</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);
|
||||
if (options.buttons) {
|
||||
for (var i=0;i<options.buttons.length;i++) {
|
||||
var button = options.buttons[i];
|
||||
|
|
@ -52,12 +53,39 @@ RED.tray = (function() {
|
|||
footer: footer,
|
||||
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) {
|
||||
options.open(el);
|
||||
}
|
||||
|
||||
$("#header-shade").show();
|
||||
$("#editor-shade").show();
|
||||
if (options.width) {
|
||||
el.width(options.width);
|
||||
}
|
||||
el.css({
|
||||
right: -(el.width()+10)+"px",
|
||||
transition: "right 0.2s ease"
|
||||
|
|
@ -72,7 +100,7 @@ RED.tray = (function() {
|
|||
setTimeout(function() {
|
||||
setTimeout(function() {
|
||||
if (options.resize) {
|
||||
options.resize();
|
||||
options.resize({width:el.width()});
|
||||
}
|
||||
if (options.show) {
|
||||
options.show();
|
||||
|
|
@ -83,7 +111,7 @@ RED.tray = (function() {
|
|||
}
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
init: function init() {
|
||||
$( window ).resize(function() {
|
||||
if (stack.length > 0) {
|
||||
var tray = stack[stack.length-1];
|
||||
|
|
@ -91,7 +119,7 @@ RED.tray = (function() {
|
|||
tray.body.height(trayHeight-40);
|
||||
|
||||
if (tray.options.resize) {
|
||||
tray.options.resize();
|
||||
tray.options.resize({width:tray.tray.width()});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,6 +14,82 @@
|
|||
* 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 {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -50,69 +50,6 @@
|
|||
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue