From 0efccc475822b41e550410f2711190bb4750d64a Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 18 Apr 2016 16:41:58 +0100
Subject: [PATCH] Add quick resize buttons to tray

---
 editor/js/ui/tray.js    | 67 ++++++++++++++++++++++++++++++++---------
 editor/sass/editor.scss | 11 ++++++-
 2 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/editor/js/ui/tray.js b/editor/js/ui/tray.js
index 8c0dffecb..c7b2a1bdc 100644
--- a/editor/js/ui/tray.js
+++ b/editor/js/ui/tray.js
@@ -26,6 +26,9 @@ RED.tray = (function() {
         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);
+        var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
+        var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
+
         if (options.buttons) {
             for (var i=0;i<options.buttons.length;i++) {
                 var button = options.buttons[i];
@@ -60,13 +63,14 @@ RED.tray = (function() {
                     el.width('auto');
                 },
                 drag: function(event,ui) {
-                    if (ui.position.left > -501) {
-                        ui.position.left = -501;
+                    if (ui.position.left > -tray.preferredWidth-1) {
+                        ui.position.left = -tray.preferredWidth-1;
                     } else if (tray.options.resize) {
                         setTimeout(function() {
                             tray.options.resize({width: -ui.position.left});
                         },0);
                     }
+                    tray.width = -ui.position.left;
                 },
                 stop:function(event,ui) {
                     el.width(-ui.position.left);
@@ -74,6 +78,7 @@ RED.tray = (function() {
                     if (tray.options.resize) {
                         tray.options.resize({width: -ui.position.left});
                     }
+                    tray.width = -ui.position.left;
                 }
             });
 
@@ -83,9 +88,12 @@ RED.tray = (function() {
 
         $("#header-shade").show();
         $("#editor-shade").show();
+
+        tray.preferredWidth = el.width();
         if (options.width) {
             el.width(options.width);
         }
+        tray.width = el.width();
         el.css({
             right: -(el.width()+10)+"px",
             transition: "right 0.2s ease"
@@ -99,6 +107,7 @@ RED.tray = (function() {
 
         setTimeout(function() {
             setTimeout(function() {
+                el.width(tray.preferredWidth);
                 if (options.resize) {
                     options.resize({width:el.width()});
                 }
@@ -108,22 +117,51 @@ RED.tray = (function() {
             },150);
             el.css({right:0});
         },0);
+
+        growButton.click(function(e) {
+            e.preventDefault();
+            tray.lastWidth = tray.width;
+            tray.width = $("#editor-stack").position().left-8;
+            el.width(tray.width);
+            if (options.resize) {
+                options.resize({width:tray.width});
+            }
+        });
+        shrinkButton.click(function(e) {
+            e.preventDefault();
+            if (tray.lastWidth && tray.width > tray.lastWidth) {
+                tray.width = tray.lastWidth;
+            } else if (tray.width > tray.preferredWidth) {
+                tray.width = tray.preferredWidth;
+            }
+            el.width(tray.width);
+            if (options.resize) {
+                options.resize({width:tray.width});
+            }
+        });
+
+    }
+
+    function handleWindowResize() {
+        if (stack.length > 0) {
+            var tray = stack[stack.length-1];
+            var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
+            tray.body.height(trayHeight-40);
+
+            if (tray.width > $("#editor-stack").position().left-8) {
+                tray.width = Math.max(tray.preferredWidth,$("#editor-stack").position().left-8);
+                tray.tray.width(tray.width);
+            }
+            if (tray.options.resize) {
+                tray.options.resize({width:tray.width});
+            }
+        }
     }
 
     return {
         init: function init() {
-            $( window ).resize(function() {
-                if (stack.length > 0) {
-                    var tray = stack[stack.length-1];
-                    var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
-                    tray.body.height(trayHeight-40);
-
-                    if (tray.options.resize) {
-                        tray.options.resize({width:tray.tray.width()});
-                    }
-                }
-            });
-
+            $(window).resize(handleWindowResize);
+            RED.events.on("sidebar:resize",handleWindowResize);
         },
         show: function show(options) {
             if (stack.length > 0) {
@@ -155,6 +193,7 @@ RED.tray = (function() {
                         var oldTray = stack[stack.length-1];
                         oldTray.tray.appendTo("#editor-stack");
                         setTimeout(function() {
+                            handleWindowResize();
                             oldTray.tray.css({right:0});
                             if (oldTray.options.show) {
                                 oldTray.options.show();
diff --git a/editor/sass/editor.scss b/editor/sass/editor.scss
index 35d1018ce..c6c427608 100644
--- a/editor/sass/editor.scss
+++ b/editor/sass/editor.scss
@@ -79,7 +79,16 @@
      border-left: 1px solid $primary-border-color;
      box-shadow: -1px 0 6px rgba(0,0,0,0.1);
  }
-
+.editor-tray-resize-button {
+    @include workspace-button;
+    display: block;
+    height: 20px;
+    border: none;
+    border-bottom: 1px solid $secondary-border-color;
+    margin: 0;
+    background: $background-color;
+    color: $workspace-button-color-disabled;
+}
  #editor-shade, #header-shade  {
      position: absolute;
      top:0;