diff options
Diffstat (limited to 'js/panels/binding')
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 | ||
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 }, | ||
36 | boundObjectIden |