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 = $('
').appendTo(el);
var footer = $('').appendTo(el);
var resizer = $('').appendTo(el);
+ var growButton = $('').appendTo(resizer);
+ var shrinkButton = $('').appendTo(resizer);
+
if (options.buttons) {
for (var i=0;i -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;