aboutsummaryrefslogtreecommitdiff
path: root/js/panels/binding
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/binding')
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.css9
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.html24
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.js173
3 files changed, 167 insertions, 39 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 @@
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
7var Montage = require("montage/core/core").Montage, 7var 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
11exports.EditBindingView = Montage.create(Component, { 12var 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 },
36 boundObjectIdentifier : { 44 boundObjectIdentifier : {
37