Merge pull request #12 from ericguzman/binding

Binding Panel update

10 files changed, 244 insertions, 75 deletions

diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css
index a1d5be0f..787cf114 100644
--- a/js/panels/binding-panel.reel/binding-panel.css
+++ b/js/panels/binding-panel.reel/binding-panel.css
@@ -20,3 +20,8 @@
 .binding-panel-toolbar-container {
     -webkit-box-flex: 0;
 }
+
+.binding-panel .edit-view-docked {
+    left: 0;
+    -webkit-transition-duration: 0;
+}
\ No newline at end of file
diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js
index 0641ecf5..45fa4005 100644
--- a/js/panels/binding-panel.reel/binding-panel.js
+++ b/js/panels/binding-panel.reel/binding-panel.js
@@ -6,6 +6,19 @@ exports.BindingPanel = Montage.create(Component, {
 
     bindings : { value: null },
     editView : { value: null },
+
+    _dockEditView : { value: null },
+    dockEditView : {
+        get : function() { return this._dockEditView; },
+        set : function(value) {
+            if(value === this._dockEditView) { return; }
+
+            this._dockEditView = value;
+
+            this.needsDraw = true;
+        }
+    },
+
     _editing: { value: null },
     editing: {
         get: function() {
@@ -14,6 +27,11 @@ exports.BindingPanel = Montage.create(Component, {
         set: function(value) {
             if(value === this._editing) { return; }
             this._editing = value;
+
+            if(!value) {
+                this.dockEditView = false;
+            }
+
             this.needsDraw = true;
         }
     },
@@ -29,6 +47,18 @@ exports.BindingPanel = Montage.create(Component, {
     },
 
     /* -------------------------
+       Event handlers
+     ------------------------- */
+
+    handleWebkitTransitionEnd : {
+        value: function(e) {
+            console.log("trans end");
+
+            this.dockEditView = this.editing;
+        }
+    },
+
+    /* -------------------------
      Toolbar Button Actions
      ------------------------- */
 
@@ -54,8 +84,16 @@ exports.BindingPanel = Montage.create(Component, {
         }
     },
 
+    prepareForDraw : {
+        value: function() {
+
+        }
+    },
+
     willDraw: {
         value: function() {
+            this.editView.element.addEventListener('webkitTransitionEnd', this, false);
+
             if(this.editing) {
                 this._translateDistance = this.element.offsetWidth;
             }
@@ -64,15 +102,21 @@ exports.BindingPanel = Montage.create(Component, {
 
     draw : {
         value: function() {
-            var transStr = '-webkit-transform';
+            var transStr = '-webkit-transform',
+                editViewEl = this.editView.element;
 
-            if(this.editing) {
-                this.editView.element.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)');
-                this.editView.element.style.setProperty('box-shadow', '0 0 10px rgba(0,0,0,0.2)')
+            if(this.dockEditView) {
+                editViewEl.classList.add('edit-view-docked');
+                editViewEl.style.removeProperty(transStr);
             } else {
-                this.editView.element.style.removeProperty(transStr);
-                this.editView.element.style.removeProperty('box-shadow');
+                editViewEl.classList.remove('edit-view-docked');
+                if(this.editing) {
+                    editViewEl.style.setProperty(transStr, 'translate3d(-'+ this._translateDistance + 'px,0,0)');
+                } else {
+                    editViewEl.style.removeProperty(transStr);
+                }
             }
+            
         }
     }
 });
\ No newline at end of file
diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.css b/js/panels/binding/edit-binding-view.reel/edit-binding-view.css
index aa539cd6..23585aca 100644
--- a/js/panels/binding/edit-binding-view.reel/edit-binding-view.css
+++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.css
@@ -13,12 +13,60 @@
     position: absolute;
     top: 0;
     width: 100%;
-    -webkit-transition-property: -webkit-transform, box-shadow;
-    -webkit-transition-duration: .55s, .2s;
+    -webkit-transition-property: -webkit-transform;
+    -webkit-transition-duration: .55s;
     -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99);
     -webkit-user-select: text;
 }
 
+/* -------------------
+    Object Editing Section
+ --------------------- */
+.edit-object-binding {
+    border-bottom: 1px solid #505050;
+    display: -webkit-box;
+    margin: 5px;
+    padding-bottom: 5px;
+    -webkit-box-orient: horizontal;
+}
+.object-container {
+    display: -webkit-box;
+    -webkit-box-orient: horizontal;
+    -webkit-box-flex: 1;
+    overflow: hidden;
+}
+.object-container:first-child {
+    margin-right: 5px;
+}
+.object-icon-container {
+    background-color: #414141;
+    border-radius: 5px;
+    border: 1px solid #333;
+    box-shadow: inset 0 0 5px 0px #333, 0 1px 0 #585858;
+    height: 40px;
+    width: 40px;
+    -webkit-box-flex: 0;
+}
+.object-icon-container > div {
+    height: 100%;
+    width: 100%;
+}
+.edit-object-binding .object-icon {
+    -webkit-transform: scale(.75);
+    height: 100%;
+    margin: 0;
+    width: 100%;
+    position:relative;
+    top: -1px;
+    left: -1px;
+}
+.object-fields-container {
+    -webkit-box-flex: 1;
+    padding-top: 1px;
+    width: 1px;
+}
+
+
 .edit-binding-view ul {
     padding: 0;
     margin: 0;
@@ -34,14 +82,43 @@
     width: 50%;
 }
 
+.checkbox-container {
+    position: absolute;
+    left: 50%;
+}
+.checkbox-container label {
+    position: relative;
+    top: -3px;