Edit Binding - Update Layout

3 files changed, 101 insertions, 31 deletions

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 37e27309..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,25 +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;
-    -webkit-box-orient: horizontal
+    margin: 5px;
+    padding-bottom: 5px;
+    -webkit-box-orient: horizontal;
 }
-.edit-object-binding > div {
+.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);
-    float: left;
+    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;
@@ -47,14 +82,43 @@
     width: 50%;
 }
 
+.checkbox-container {
+    position: absolute;
+    left: 50%;
+}
+.checkbox-container label {
+    position: relative;
+    top: -3px;
+}
+
+.buttons-container {
+    background-color: #474747;
+    position: absolute;
+    bottom: 5px;
+    width: 100%;
+}
+
+.edit-binding-view .btn-delete, .edit-binding-view .btn-cancel, .edit-binding-view .btn-save {
+    width: 72px;
+    display: inline-block;
+    margin: 0 5px;
+}
+.edit-binding-view .btn-cancel, .edit-binding-view .btn-save {
+    float:right;
+    margin: 0 5px 0 0;
+}
 /* hintable fields */
 
 .hintable-field {
     background-color: #444;
     border: 1px solid #313131;
-    display: inline-block;
+    display: block;
     height: 13px;
-    margin-left: 5px;
+    margin: 0 0 5px 5px;
     padding: 1px 4px;
-    width: 45%;
+    width: 80%;
+}
+
+.hintable-field:focus {
+    border: 1px solid #313131;
 }
\ No newline at end of file
diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.html b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
index c13e4587..e2cbdd1d 100644
--- a/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
+++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.html
@@ -150,34 +150,42 @@
 
 
     <section class="edit-object-binding">
-        <div>
-            <div class="object-icon"></div>
+        <div data-montage-id="source-object-container" class="object-container">
+            <div data-montage-id="source-object-icon-container" class="object-icon-container">
+                <div>
+                    <div class="object-icon"></div>
+                </div>
+            </div>
+            <div class="object-fields-container">
+                <span data-montage-id="sourceObjectField" class="hintable-field">Test</span>
+                <span data-montage-id="so-pp" class="hintable-field so-pp"></span>
+            </div>
         </div>
-        <span data-montage-id="sourceObjectField" class="hintable-field">Test</span>
-        <span data-montage-id="so-pp" class="hintable-field so-pp"></span>
-        <div>
-            <div class="object-icon"></div>
+
+        <div data-montage-id="bound-object-container" class="object-container">
+            <div data-montage-id="bound-object-icon-container" class="object-icon-container">
+                <div>
+                    <div class="object-icon"></div>
+                </div>
+            </div>
+            <div class="object-fields-container">
+                <span data-montage-id="boundObjectField" class="hintable-field">Test</span>
+                <span data-montage-id="bo-pp" class="hintable-field bo-pp"></span>
+            </div>
         </div>
-        <span data-montage-id="boundObjectField" class="hintable-field">Test</span>
-        <span data-montage-id="bo-pp" class="hintable-field po-pp"></span>
     </section>
 
-    <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>
-
-    <ul>
-        <h3>Configuration</h3>
-        <li class="edit-general-properties">
 
-        </li>
-        <li>
-            <label>Converter</label><span>Test</span>
-        </li>
-    </ul>
+    <div class="checkbox-container">
+        <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>
+    </div>
 
-    <button data-montage-id="delete-button" class="nj-skinned .btn-delete">Delete</button>
-    <button data-montage-id="cancel-button" class="nj-skinned">Cancel</button>
-    <button data-montage-id="save-button" class="nj-skinned">Save</button>
 
+    <div class="buttons-container">
+        <button data-montage-id="delete-button" class="nj-skinned btn-delete">Delete</button>
+        <button data-montage-id="save-button" class="nj-skinned btn-save">Save</button>
+        <button data-montage-id="cancel-button" class="nj-skinned btn-cancel">Cancel</button>
+    </div>
 </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/panels/binding/edit-binding-view.reel/edit-binding-view.js b/js/panels/binding/edit-binding-view.reel/edit-binding-view.js
index c9f946f5..10f427af 100644
--- a/js/panels/binding/edit-binding-view.reel/edit-binding-view.js
+++ b/js/panels/binding/edit-binding-view.reel/edit-binding-view.js
@@ -145,7 +145,6 @@ exports.EditBindingView = Montage.create(Component, {
                 controller.editBinding(this.bindingArgs, newBindingArgs);
             }
 
-            controller.currentObject = controller.currentObject;