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

Make tray resizble and remember size per-node-type

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

76
editor/sass/editor.scss
View File

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

63
editor/sass/workspace.scss
View File

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