Objects Tray - Add hiding based on workspace mode.

2 files changed, 49 insertions, 3 deletions

diff --git a/js/stage/objects-tray.reel/objects-tray.css b/js/stage/objects-tray.reel/objects-tray.css
index 422d6a8f..61d9ff1e 100644
--- a/js/stage/objects-tray.reel/objects-tray.css
+++ b/js/stage/objects-tray.reel/objects-tray.css
@@ -30,4 +30,12 @@
     margin: 0 auto;
     overflow: hidden;
     -webkit-box-flex: 0;
+    -webkit-transition: -webkit-transform .5s cubic-bezier(.44,.19,0,.99);
+    -webkit-transform-origin: center bottom;
+
+}
+
+.hide-objects-tray {
+    /*-webkit-transform: scale(0);*/
+    -webkit-transform: translate3d(0, 100px, 0) scale(.5);
 }
\ No newline at end of file
diff --git a/js/stage/objects-tray.reel/objects-tray.js b/js/stage/objects-tray.reel/objects-tray.js
index ee1ecd06..c046a3bb 100644
--- a/js/stage/objects-tray.reel/objects-tray.js
+++ b/js/stage/objects-tray.reel/objects-tray.js
@@ -12,6 +12,25 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
 exports.ObjectsTray = Montage.create(Component, {
+    hideClass : { value: 'hide-objects-tray'},
+    _workspaceMode : { value: null },
+    workspaceMode : {
+        get : function() { return this._workspaceMode; },
+        set : function(value) {
+            if(value === this._workspaceMode) { return; }
+
+            var toHide = (value !== 'binding');
+
+            setTimeout(function() {
+                this.hide = toHide;
+            }.bind(this), 200);
+
+            this._workspaceMode = value;
+
+            this.needsDraw = true;
+        }
+    },
+
     _objects: { value: null },
     objects: {
         get: function() {
@@ -23,6 +42,18 @@ exports.ObjectsTray = Montage.create(Component, {
         }
     },
 
+    _hide : { value: null },
+    hide : {
+        get : function() { return this._hide; },
+        set : function(value) {
+            if(value === this._hide) { return; }
+
+            this._hide = value;
+
+            this.needsDraw = true;
+        }
+    },
+
 
     templateDidLoad: { 
         value: function() {
@@ -33,6 +64,12 @@ exports.ObjectsTray = Montage.create(Component, {
     prepareForDraw : {
         value: function() {
 
+            Object.defineBinding(this, 'workspaceMode', {
+                "boundObject": this.application.ninja,
+                "boundObjectPropertyPath": "workspaceMode",
+                "oneway": true
+            });
+
             Object.defineBinding(this, 'objects', {
                 "boundObject": this.application.ninja.objectsController,
                 "boundObjectPropertyPath": "objects",
@@ -43,9 +80,10 @@ exports.ObjectsTray = Montage.create(Component, {
     },
     draw : {
         value: function() {
-            console.log("objects panel draw");
-            if(this.objects) {
-
+            if(this.hide) {
+                this.element.classList.add(this.hideClass);
+            } else {
+                this.element.classList.remove(this.hideClass);
             }
         }
     }