Make tray resizble and remember size per-node-type

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

editor/js/ui/tray.js

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

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

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 {