3 files changed, 313 insertions, 35 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 b0249c6c..aa539cd6 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
@@ -9,11 +9,14 @@
    color: #FFF;
    font-size: 11px;
    height: 100%;
-    /*left: 100%;*/
+    left: 100%;
-    /*position: absolute;*/
+    position: absolute;
-    /*top: 0;*/
+    top: 0;
    width: 100%;
-    -webkit-transition: -webkit-transform 140ms ease-in;
+    -webkit-transition-property: -webkit-transform, box-shadow;
+    -webkit-transition-duration: .55s, .2s;
+    -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99);
+    -webkit-user-select: text;
 }
 .edit-binding-view ul {
@@ -26,11 +29,19 @@
    list-style-type: none;
 }
+.edit-binding-view label {
+    display: inline-block;
+    width: 50%;
+}
 /* hintable fields */
-.so-pp, .bo-pp {
+.hintable-field {
-    border: 1px solid #313131;
-    padding: 1px 4px;
    background-color: #444;
+    border: 1px solid #313131;
+    display: inline-block;
+    height: 13px;
    margin-left: 5px;
+    padding: 1px 4px;
+    width: 45%;
 }
 \ 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 1d502a3e..604d4871 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
@@ -13,34 +13,53 @@
            "owner": {
                "prototype": "js/panels/binding/edit-binding-view.reel",
                "properties": {
-                    "element": {"#": "edit-binding"}
+                    "element": {"#": "edit-binding"},
+                    "sourceObjectField" : {"@": "sourceObjectField" },
+                    "boundObjectField"  : {"@": "boundObjectField" },
+                    "sourceObjectPropertyPathField" : {"@": "sourceObjectPropertyPathField" },
+                    "boundObjectPropertyPathField"  : {"@": "boundObjectPropertyPathField" },
+                    "directionCheckbox"  : {"@": "directionCheckbox" },
+                    "saveButton":{ "@": "saveButton" },
+                    "cancelButton":{ "@": "cancelButton" },
+                    "deleteButton":{ "@": "deleteButton" }
                }
            },
-            "objectsList" : {
+            "sourceObjectField": {
-                "prototype": "montage/ui/controller/array-controller",
+                "prototype": "js/components/hintable.reel",
-                "bindings" : {
-                    "content": {"<-": "@owner.objectsList"}
-                }
-            },
-            "sourceObjectSelect": {
-                "prototype": "montage/ui/select-input.reel",
                "properties": {
-                    "element": {"#": "sourceObjectSelect"},
+                    "startOnEvent": "click",
-                    "contentController": {"@": "objectsList"}
+                    "element": {"#": "sourceObjectField"}
+                },
-                }
+                "bindings": {
+                    "value": {"<-": "@owner.sourceObjectIdentifier"}
+                },
+                "listeners" : [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
-            "boundObjectSelect": {
+            "boundObjectField": {
-                "prototype": "montage/ui/select-input.reel",
+                "prototype": "js/components/hintable.reel",
                "properties": {
-                    "element": {"#": "boundObjectSelect"},
+                    "startOnEvent": "click",
-                    "contentController": {"@": "objectsList"}
+                    "element": {"#": "boundObjectField"}
+                },
-                }
+                "bindings": {
+                    "value": {"<-": "@owner.boundObjectIdentifier"}
+                },
+                "listeners" : [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
            },
            "sourceObjectPropertyPathField": {
                "prototype": "js/components/hintable.reel",
                "properties": {
+                    "startOnEvent": "click",
                    "element": {"#": "so-pp"},
                    "identifier": "sourceProperty"
                },
@@ -57,6 +76,7 @@
            "boundObjectPropertyPathField": {
                "prototype": "js/components/hintable.reel",
                "properties": {
+                    "startOnEvent": "click",
                    "element": {"#": "bo-pp"},
                    "identifier": "boundProperty"
                },
@@ -69,6 +89,57 @@
                        "listener": {"@": "owner"}
                    }
                ]
+            },
+            "directionCheckbox": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "direction-checkbox"}
+                },
+                "bindings": {
+                    "checked": {"<-": "@owner.oneway"}
+                }
+            },
+            "cancelButton" : {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "cancel-button" },
+                    "identifier": "cancelButton"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner" }
+                    }
+                ]
+            },
+            "deleteButton" : {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "delete-button" },
+                    "identifier": "deleteButton"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner" }
+                    }
+                ]
+            },
+            "saveButton" : {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "save-button" },
+                    "identifier": "saveButton"
+                },
+                "bindings" : {
+                    "enabled": {"<<->": "@owner.dirty"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner" }
+                    }
+                ]
            }
        }
@@ -78,26 +149,32 @@
 <div data-montage-id="edit-binding" class="edit-binding-view">
    <ul>
+        <h3>Source Object</h3>
        <li class="edit-source-object">
-

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 b0249c6c..aa539cd6 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
@@ -9,11 +9,14 @@
9	color: #FFF;	9	color: #FFF;
10	font-size: 11px;	10	font-size: 11px;
11	height: 100%;	11	height: 100%;
12	/left: 100%;/	12	left: 100%;
13	/position: absolute;/	13	position: absolute;
14	/top: 0;/	14	top: 0;
15	width: 100%;	15	width: 100%;
16	-webkit-transition: -webkit-transform 140ms ease-in;	16	-webkit-transition-property: -webkit-transform, box-shadow;
		17	-webkit-transition-duration: .55s, .2s;
		18	-webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99);
		19	-webkit-user-select: text;
17	}	20	}
18		21
19	.edit-binding-view ul {	22	.edit-binding-view ul {
@@ -26,11 +29,19 @@
26	list-style-type: none;	29	list-style-type: none;
27	}	30	}
28		31
		32	.edit-binding-view label {
		33	display: inline-block;
		34	width: 50%;
		35	}
		36
29	/* hintable fields */	37	/* hintable fields */
30		38
31	.so-pp, .bo-pp {	39	.hintable-field {
32	border: 1px solid #313131;
33	padding: 1px 4px;
34	background-color: #444;	40	background-color: #444;
		41	border: 1px solid #313131;
		42	display: inline-block;
		43	height: 13px;
35	margin-left: 5px;	44	margin-left: 5px;
		45	padding: 1px 4px;
		46	width: 45%;
36	} \ No newline at end of file	47	} \ 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 1d502a3e..604d4871 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
@@ -13,34 +13,53 @@
13	"owner": {	13	"owner": {
14	"prototype": "js/panels/binding/edit-binding-view.reel",	14	"prototype": "js/panels/binding/edit-binding-view.reel",
15	"properties": {	15	"properties": {
16	"element": {"#": "edit-binding"}	16	"element": {"#": "edit-binding"},
		17	"sourceObjectField" : {"@": "sourceObjectField" },
		18	"boundObjectField" : {"@": "boundObjectField" },
		19	"sourceObjectPropertyPathField" : {"@": "sourceObjectPropertyPathField" },
		20	"boundObjectPropertyPathField" : {"@": "boundObjectPropertyPathField" },
		21	"directionCheckbox" : {"@": "directionCheckbox" },
		22	"saveButton":{ "@": "saveButton" },
		23	"cancelButton":{ "@": "cancelButton" },
		24	"deleteButton":{ "@": "deleteButton" }
17	}	25	}
18	},	26	},
19	"objectsList" : {	27	"sourceObjectField": {
20	"prototype": "montage/ui/controller/array-controller",	28	"prototype": "js/components/hintable.reel",
21	"bindings" : {
22	"content": {"<-": "@owner.objectsList"}
23	}
24	},
25	"sourceObjectSelect": {
26	"prototype": "montage/ui/select-input.reel",
27	"properties": {	29	"properties": {
28	"element": {"#": "sourceObjectSelect"},	30	"startOnEvent": "click",
29	"contentController": {"@": "objectsList"}	31	"element": {"#": "sourceObjectField"}
30		32	},
31	}	33	"bindings": {
		34	"value": {"<-": "@owner.sourceObjectIdentifier"}
		35	},
		36	"listeners" : [
		37	{
		38	"type": "change",
		39	"listener": {"@": "owner"}
		40	}
		41	]
32	},	42	},
33	"boundObjectSelect": {	43	"boundObjectField": {
34	"prototype": "montage/ui/select-input.reel",	44	"prototype": "js/components/hintable.reel",
35	"properties": {	45	"properties": {
36	"element": {"#": "boundObjectSelect"},	46	"startOnEvent": "click",
37	"contentController": {"@": "objectsList"}	47	"element": {"#": "boundObjectField"}
38		48	},
39	}	49	"bindings": {
		50	"value": {"<-": "@owner.boundObjectIdentifier"}
		51	},
		52	"listeners" : [
		53	{
		54	"type": "change",
		55	"listener": {"@": "owner"}
		56	}
		57	]
40	},	58	},
41	"sourceObjectPropertyPathField": {	59	"sourceObjectPropertyPathField": {
42	"prototype": "js/components/hintable.reel",	60	"prototype": "js/components/hintable.reel",
43	"properties": {	61	"properties": {
		62	"startOnEvent": "click",
44	"element": {"#": "so-pp"},	63	"element": {"#": "so-pp"},
45	"identifier": "sourceProperty"	64	"identifier": "sourceProperty"
46	},	65	},
@@ -57,6 +76,7 @@
57	"boundObjectPropertyPathField": {	76	"boundObjectPropertyPathField": {
58	"prototype": "js/components/hintable.reel",	77	"prototype": "js/components/hintable.reel",
59	"properties": {	78	"properties": {
		79	"startOnEvent": "click",
60	"element": {"#": "bo-pp"},	80	"element": {"#": "bo-pp"},
61	"identifier": "boundProperty"	81	"identifier": "boundProperty"
62	},	82	},
@@ -69,6 +89,57 @@
69	"listener": {"@": "owner"}	89	"listener": {"@": "owner"}
70	}	90	}
71	]	91	]
		92	},
		93	"directionCheckbox": {
		94	"prototype": "montage/ui/checkbox.reel",
		95	"properties": {
		96	"element": {"#": "direction-checkbox"}
		97	},
		98	"bindings": {
		99	"checked": {"<-": "@owner.oneway"}
		100	}
		101	},
		102	"cancelButton" : {
		103	"prototype": "montage/ui/button.reel",
		104	"properties": {
		105	"element": {"#": "cancel-button" },
		106	"identifier": "cancelButton"
		107	},
		108	"listeners": [
		109	{
		110	"type": "action",
		111	"listener": {"@": "owner" }
		112	}
		113	]
		114	},
		115	"deleteButton" : {
		116	"prototype": "montage/ui/button.reel",
		117	"properties": {
		118	"element": {"#": "delete-button" },
		119	"identifier": "deleteButton"
		120	},
		121	"listeners": [
		122	{
		123	"type": "action",
		124	"listener": {"@": "owner" }
		125	}
		126	]
		127	},
		128	"saveButton" : {
		129	"prototype": "montage/ui/button.reel",
		130	"properties": {
		131	"element": {"#": "save-button" },
		132	"identifier": "saveButton"
		133	},
		134	"bindings" : {
		135	"enabled": {"<<->": "@owner.dirty"}
		136	},
		137	"listeners": [
		138	{
		139	"type": "action",
		140	"listener": {"@": "owner" }
		141	}
		142	]
72	}	143	}
73		144
74	}	145	}
@@ -78,26 +149,32 @@
78	<div data-montage-id="edit-binding" class="edit-binding-view">	149	<div data-montage-id="edit-binding" class="edit-binding-view">
79		150
80	<ul>	151	<ul>
		152	<h3>Source Object</h3>
81	<li class="edit-source-object">	153	<li class="edit-source-object">
82