diff --git a/editor/js/ui/editor.js b/editor/js/ui/editor.js
index d6644da66..392044430 100644
--- a/editor/js/ui/editor.js
+++ b/editor/js/ui/editor.js
@@ -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({
diff --git a/editor/js/ui/tray.js b/editor/js/ui/tray.js
index d6943d4c2..8c0dffecb 100644
--- a/editor/js/ui/tray.js
+++ b/editor/js/ui/tray.js
@@ -25,6 +25,7 @@ RED.tray = (function() {
var header = $('
').appendTo(el);
var body = $('').appendTo(el);
var footer = $('').appendTo(el);
+ var resizer = $('').appendTo(el);
if (options.buttons) {
for (var i=0;i -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()});
}
}
});
diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss
index e93c01ba2..35d1018ce 100644
--- a/editor/sass/editor.scss
+++ b/editor/sass/editor.scss
@@ -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%;
diff --git a/editor/sass/workspace.scss b/editor/sass/workspace.scss
index 9fcbe0f61..ac0ef65b3 100644
--- a/editor/sass/workspace.scss
+++ b/editor/sass/workspace.scss
@@ -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 {