6 files changed, 176 insertions, 66 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 23585aca..01feb5cc 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
@@ -33,7 +33,6 @@
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-flex: 1;
-    overflow: hidden;
 }
 .object-container:first-child {
    margin-right: 5px;
@@ -47,10 +46,7 @@
    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%;
@@ -93,8 +89,9 @@
 .buttons-container {
    background-color: #474747;
+    padding: 5px 0;
    position: absolute;
-    bottom: 5px;
+    bottom: 0;
    width: 100%;
 }
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 e2cbdd1d..91a5426f 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
@@ -21,7 +21,9 @@
                    "directionCheckbox"  : {"@": "directionCheckbox" },
                    "saveButton":{ "@": "saveButton" },
                    "cancelButton":{ "@": "cancelButton" },
-                    "deleteButton":{ "@": "deleteButton" }
+                    "deleteButton":{ "@": "deleteButton" },
+                    "sourceObjectIconElement": {"#": "source-object-icon"},
+                    "boundObjectIconElement": {"#": "bound-object-icon"}
                }
            },
            "sourceObjectField": {
@@ -31,7 +33,7 @@
                    "element": {"#": "sourceObjectField"}
                },
                "bindings": {
-                    "value": {"<-": "@owner.sourceObjectIdentifier"}
+                    "value": {"<<->": "@owner.sourceObjectIdentifier"}
                },
                "listeners" : [
                    {
@@ -47,7 +49,7 @@
                    "element": {"#": "boundObjectField"}
                },
                "bindings": {
-                    "value": {"<-": "@owner.boundObjectIdentifier"}
+                    "value": {"<<->": "@owner.boundObjectIdentifier"}
                },
                "listeners" : [
                    {
@@ -64,7 +66,7 @@
                    "identifier": "sourceProperty"
                },
                "bindings": {
-                    "value": {"<-": "@owner.sourceObjectPropertyPath"}
+                    "value": {"<<->": "@owner.sourceObjectPropertyPath"}
                },
                "listeners" : [
                    {
@@ -81,7 +83,7 @@
                    "identifier": "boundProperty"
                },
                "bindings": {
-                    "value": {"<-": "@owner.boundObjectPropertyPath"}
+                    "value": {"<<->": "@owner.boundObjectPropertyPath"}
                },
                "listeners" : [
                    {
@@ -147,14 +149,10 @@
 </head>
 <body>
 <div data-montage-id="edit-binding" class="edit-binding-view">
    <section class="edit-object-binding">
        <div data-montage-id="source-object-container" class="object-container">
            <div data-montage-id="source-object-icon-container" class="object-icon-container">
-                <div>
+                <div data-montage-id="source-object-icon" class="object-icon"></div>
-                    <div class="object-icon"></div>
-                </div>
            </div>
            <div class="object-fields-container">
                <span data-montage-id="sourceObjectField" class="hintable-field">Test</span>
@@ -164,9 +162,7 @@
        <div data-montage-id="bound-object-container" class="object-container">
            <div data-montage-id="bound-object-icon-container" class="object-icon-container">
-                <div>
+                <div data-montage-id="bound-object-icon" class="object-icon"></div>
-                    <div class="object-icon"></div>
-                </div>
            </div>
            <div class="object-fields-container">
                <span data-montage-id="boundObjectField" class="hintable-field">Test</span>
@@ -175,12 +171,10 @@
        </div>
    </section>
    <div class="checkbox-container">
        <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>
    </div>
    <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>
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 10f427af..62a47aaf 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
@@ -5,10 +5,13 @@
 </copyright> */
 var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
+    Component = require("montage/ui/component").Component,
+    Converter = require("montage/core/converter/converter").Converter;
-exports.EditBindingView = Montage.create(Component, {
+var editBindingView = exports.EditBindingView = Montage.create(Component, {
+    sourceObjectIconElement : { value: null },
+    boundObjectIconElement  : { value: null },
    objectIdentifiers : {
        value: null
@@ -22,25 +25,90 @@ exports.EditBindingView = Montage.create(Component, {
    },
    /* -------------------
-       Binding Properties
+     Object Identifier (for associating with object)
     ------------------- */
+    _sourceObjectIdentifier : { value: null },
    sourceObjectIdentifier : {
-        value: "",
+        get : function() { return this._sourceObjectIdentifier; },
-        distinct: true
+        set : function(value) {
-    },
+            if(value === this._sourceObjectIdentifier) { return; }
-    sourceObjectPropertyPath : {
-        value: "",
+            this._sourceObjectIdentifier = value;
-        distinct: true
+            this.needsDraw = true;
+        }
    },
+    _boundObjectIdentifier : { value: null },

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 23585aca..01feb5cc 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
@@ -33,7 +33,6 @@
33	display: -webkit-box;	33	display: -webkit-box;
34	-webkit-box-orient: horizontal;	34	-webkit-box-orient: horizontal;
35	-webkit-box-flex: 1;	35	-webkit-box-flex: 1;
36	overflow: hidden;
37	}	36	}
38	.object-container:first-child {	37	.object-container:first-child {
39	margin-right: 5px;	38	margin-right: 5px;
@@ -47,10 +46,7 @@
47	width: 40px;	46	width: 40px;
48	-webkit-box-flex: 0;	47	-webkit-box-flex: 0;
49	}	48	}
50	.object-icon-container > div {	49
51	height: 100%;
52	width: 100%;
53	}
54	.edit-object-binding .object-icon {	50	.edit-object-binding .object-icon {
55	-webkit-transform: scale(.75);	51	-webkit-transform: scale(.75);
56	height: 100%;	52	height: 100%;
@@ -93,8 +89,9 @@
93		89
94	.buttons-container {	90	.buttons-container {
95	background-color: #474747;	91	background-color: #474747;
		92	padding: 5px 0;
96	position: absolute;	93	position: absolute;
97	bottom: 5px;	94	bottom: 0;
98	width: 100%;	95	width: 100%;
99	}	96	}
100		97


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 e2cbdd1d..91a5426f 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
@@ -21,7 +21,9 @@
21	"directionCheckbox" : {"@": "directionCheckbox" },	21	"directionCheckbox" : {"@": "directionCheckbox" },
22	"saveButton":{ "@": "saveButton" },	22	"saveButton":{ "@": "saveButton" },
23	"cancelButton":{ "@": "cancelButton" },	23	"cancelButton":{ "@": "cancelButton" },
24	"deleteButton":{ "@": "deleteButton" }	24	"deleteButton":{ "@": "deleteButton" },
		25	"sourceObjectIconElement": {"#": "source-object-icon"},
		26	"boundObjectIconElement": {"#": "bound-object-icon"}
25	}	27	}
26	},	28	},
27	"sourceObjectField": {	29	"sourceObjectField": {
@@ -31,7 +33,7 @@
31	"element": {"#": "sourceObjectField"}	33	"element": {"#": "sourceObjectField"}
32	},	34	},
33	"bindings": {	35	"bindings": {
34	"value": {"<-": "@owner.sourceObjectIdentifier"}	36	"value": {"<<->": "@owner.sourceObjectIdentifier"}
35	},	37	},
36	"listeners" : [	38	"listeners" : [
37	{	39	{
@@ -47,7 +49,7 @@
47	"element": {"#": "boundObjectField"}	49	"element": {"#": "boundObjectField"}
48	},	50	},
49	"bindings": {	51	"bindings": {
50	"value": {"<-": "@owner.boundObjectIdentifier"}	52	"value": {"<<->": "@owner.boundObjectIdentifier"}
51	},	53	},
52	"listeners" : [	54	"listeners" : [
53	{	55	{
@@ -64,7 +66,7 @@
64	"identifier": "sourceProperty"	66	"identifier": "sourceProperty"
65	},	67	},
66	"bindings": {	68	"bindings": {
67	"value": {"<-": "@owner.sourceObjectPropertyPath"}	69	"value": {"<<->": "@owner.sourceObjectPropertyPath"}
68	},	70	},
69	"listeners" : [	71	"listeners" : [
70	{	72	{
@@ -81,7 +83,7 @@
81	"identifier": "boundProperty"	83	"identifier": "boundProperty"
82	},	84	},
83	"bindings": {	85	"bindings": {
84	"value": {"<-": "@owner.boundObjectPropertyPath"}	86	"value": {"<<->": "@owner.boundObjectPropertyPath"}
85	},	87	},
86	"listeners" : [	88	"listeners" : [
87	{	89	{
@@ -147,14 +149,10 @@
147	</head>	149	</head>
148	<body>	150	<body>
149	<div data-montage-id="edit-binding" class="edit-binding-view">	151	<div data-montage-id="edit-binding" class="edit-binding-view">
150
151
152	<section class="edit-object-binding">	152	<section class="edit-object-binding">
153	<div data-montage-id="source-object-container" class="object-container">	153	<div data-montage-id="source-object-container" class="object-container">
154	<div data-montage-id="source-object-icon-container" class="object-icon-container">	154	<div data-montage-id="source-object-icon-container" class="object-icon-container">
155	<div>	155	<div data-montage-id="source-object-icon" class="object-icon"></div>
156	<div class="object-icon"></div>
157	</div>
158	</div>	156	</div>
159	<div class="object-fields-container">	157	<div class="object-fields-container">
160	<span data-montage-id="sourceObjectField" class="hintable-field">Test</span>	158	<span data-montage-id="sourceObjectField" class="hintable-field">Test</span>
@@ -164,9 +162,7 @@
164		162
165	<div data-montage-id="bound-object-container" class="object-container">	163	<div data-montage-id="bound-object-container" class="object-container">
166	<div data-montage-id="bound-object-icon-container" class="object-icon-container">	164	<div data-montage-id="bound-object-icon-container" class="object-icon-container">
167	<div>	165	<div data-montage-id="bound-object-icon" class="object-icon"></div>
168	<div class="object-icon"></div>
169	</div>
170	</div>	166	</div>
171	<div class="object-fields-container">	167	<div class="object-fields-container">
172	<span data-montage-id="boundObjectField" class="hintable-field">Test</span>	168	<span data-montage-id="boundObjectField" class="hintable-field">Test</span>
@@ -175,12 +171,10 @@
175	</div>	171	</div>
176	</section>	172	</section>
177		173
178
179	<div class="checkbox-container">	174	<div class="checkbox-container">
180	<input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>	175	<input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label>
181	</div>	176	</div>
182		177
183
184	<div class="buttons-container">	178	<div class="buttons-container">
185	<button data-montage-id="delete-button" class="nj-skinned btn-delete">Delete</button>	179	<button data-montage-id="delete-button" class="nj-skinned btn-delete">Delete</button>
186	<button data-montage-id="save-button" class="nj-skinned btn-save">Save</button>	180	<button data-montage-id="save-button" class="nj-skinned btn-save">Save</button>


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 10f427af..62a47aaf 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
@@ -5,10 +5,13 @@
5	</copyright> */	5	</copyright> */
6		6
7	var Montage = require("montage/core/core").Montage,	7	var Montage = require("montage/core/core").Montage,
8	Component = require("montage/ui/component").Component;	8	Component = require("montage/ui/component").Component,
		9	Converter = require("montage/core/converter/converter").Converter;
9		10
10		11
11	exports.EditBindingView = Montage.create(Component, {	12	var editBindingView = exports.EditBindingView = Montage.create(Component, {
		13	sourceObjectIconElement : { value: null },
		14	boundObjectIconElement : { value: null },
12		15
13	objectIdentifiers : {	16	objectIdentifiers : {
14	value: null	17	value: null
@@ -22,25 +25,90 @@ exports.EditBindingView = Montage.create(Component, {
22	},	25	},
23		26
24	/* -------------------	27	/* -------------------
25	Binding Properties	28	Object Identifier (for associating with object)
26	------------------- */	29	------------------- */
27		30
		31	_sourceObjectIdentifier : { value: null },
28	sourceObjectIdentifier : {	32	sourceObjectIdentifier : {
29	value: "",	33	get : function() { return this._sourceObjectIdentifier; },
30	distinct: true	34	set : function(value) {
31	},	35	if(value === this._sourceObjectIdentifier) { return; }
32	sourceObjectPropertyPath : {	36
33	value: "",	37	this._sourceObjectIdentifier = value;
34	distinct: true	38
		39	this.needsDraw = true;
		40	}
35	},	41	},
		42
		43	_boundObjectIdentifier : { value: null },