diff options
3 files changed, 140 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 b0249c6c..6e2ca31c 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,11 @@ | |||
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: -webkit-transform .55s cubic-bezier(.44,.19,0,.99); |
17 | } | 17 | } |
18 | 18 | ||
19 | .edit-binding-view ul { | 19 | .edit-binding-view ul { |
@@ -26,11 +26,18 @@ | |||
26 | list-style-type: none; | 26 | list-style-type: none; |
27 | } | 27 | } |
28 | 28 | ||
29 | .edit-binding-view label { | ||
30 | display: inline-block; | ||
31 | width: 50%; | ||
32 | } | ||
33 | |||
29 | /* hintable fields */ | 34 | /* hintable fields */ |
30 | 35 | ||
31 | .so-pp, .bo-pp { | 36 | .hintable-field { |
32 | border: 1px solid #313131; | ||
33 | padding: 1px 4px; | ||
34 | background-color: #444; | 37 | background-color: #444; |
38 | border: 1px solid #313131; | ||
39 | display: inline-block; | ||
35 | margin-left: 5px; | 40 | margin-left: 5px; |
41 | padding: 1px 4px; | ||
42 | width: 45%; | ||
36 | } \ No newline at end of file | 43 | } \ 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..0c1abcee 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 | |||
@@ -16,27 +16,36 @@ | |||
16 | "element": {"#": "edit-binding"} | 16 | "element": {"#": "edit-binding"} |
17 | } | 17 | } |
18 | }, | 18 | }, |
19 | "objectsList" : { | 19 | "sourceObjectField": { |
20 | "prototype": "montage/ui/controller/array-controller", | 20 | "prototype": "js/components/hintable.reel", |
21 | "bindings" : { | ||
22 | "content": {"<-": "@owner.objectsList"} | ||
23 | } | ||
24 | }, | ||
25 | "sourceObjectSelect": { | ||
26 | "prototype": "montage/ui/select-input.reel", | ||
27 | "properties": { | 21 | "properties": { |
28 | "element": {"#": "sourceObjectSelect"}, | 22 | "element": {"#": "sourceObjectField"} |
29 | "contentController": {"@": "objectsList"} | ||
30 | 23 | ||
31 | } | 24 | }, |
25 | "bindings": { | ||
26 | "value": {"<-": "@owner.sourceObjectIdentifier"} | ||
27 | }, | ||
28 | "listeners" : [ | ||
29 | { | ||
30 | "type": "change", | ||
31 | "listener": {"@": "owner"} | ||
32 | } | ||
33 | ] | ||
32 | }, | 34 | }, |
33 | "boundObjectSelect": { | 35 | "boundObjectField": { |
34 | "prototype": "montage/ui/select-input.reel", | 36 | "prototype": "js/components/hintable.reel", |
35 | "properties": { | 37 | "properties": { |
36 | "element": {"#": "boundObjectSelect"}, | 38 | "element": {"#": "boundObjectField"} |
37 | "contentController": {"@": "objectsList"} | 39 | }, |
38 | 40 | "bindings": { | |
39 | } | 41 | "value": {"<-": "@owner.boundObjectIdentifier"} |
42 | }, | ||
43 | "listeners" : [ | ||
44 | { | ||
45 | "type": "change", | ||
46 | "listener": {"@": "owner"} | ||
47 | } | ||
48 | ] | ||
40 | }, | 49 | }, |
41 | "sourceObjectPropertyPathField": { | 50 | "sourceObjectPropertyPathField": { |
42 | "prototype": "js/components/hintable.reel", | 51 | "prototype": "js/components/hintable.reel", |
@@ -69,6 +78,28 @@ | |||
69 | "listener": {"@": "owner"} | 78 | "listener": {"@": "owner"} |
70 | } | 79 | } |
71 | ] | 80 | ] |
81 | }, | ||
82 | "directionCheckbox": { | ||
83 | "prototype": "montage/ui/checkbox.reel", | ||
84 | "properties": { | ||
85 | "element": {"#": "direction-checkbox"} | ||
86 | }, | ||
87 | "bindings": { | ||
88 | "checked": {"<-": "@owner.oneway"} | ||
89 | } | ||
90 | }, | ||
91 | "closeButton" : { | ||
92 | "prototype": "montage/ui/button.reel", | ||
93 | "properties": { | ||
94 | "element": {"#": "close-button" }, | ||
95 | "identifier": "closeButton" | ||
96 | }, | ||
97 | "listeners": [ | ||
98 | { | ||
99 | "type": "action", | ||
100 | "listener": {"@": "owner" } | ||
101 | } | ||
102 | ] | ||
72 | } | 103 | } |
73 | 104 | ||
74 | } | 105 | } |
@@ -79,25 +110,27 @@ | |||
79 | 110 | ||
80 | <ul> | 111 | <ul> |
81 | <li class="edit-source-object"> | 112 | <li class="edit-source-object"> |
82 | <label>Source Object:</label><select data-montage-id="sourceObjectSelect" class="nj-skinned"></select> | 113 | <label>Source Object:</label><span data-montage-id="sourceObjectField" class="hintable-field">Test</span> |
83 | <br> | 114 | <br> |
84 | <label>Source Object Property Path:</label><span data-montage-id="so-pp" class="so-pp">Test</span> | 115 | <label>Source Object Property Path:</label><span data-montage-id="so-pp" class="hintable-field so-pp">Test</span> |
85 | </li> | 116 | </li> |
86 | 117 | ||
87 | <li class="edit-bound-object"> | 118 | <li class="edit-bound-object"> |
88 | <label>Bound Object:</label><select data-montage-id="boundObjectSelect" class="nj-skinned"></select> | 119 | <label>Bound Object:</label><span data-montage-id="boundObjectField" class="hintable-field">Test</span> |
89 | <br> | 120 | <br> |
90 | <label>Bound Object Property Path:</label><span data-montage-id="bo-pp" class="bo-pp">Test</span> | 121 | <label>Bound Object Property Path:</label><span data-montage-id="bo-pp" class="hintable-field bo-pp">Test</span> |
91 | </li> | 122 | </li> |
92 | 123 | ||
93 | <li class="edit-general-properties"> | 124 | <li class="edit-general-properties"> |
94 | <input data-montage-id="oneway-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label> | 125 | <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label> |
95 | </li> | 126 | </li> |
96 | <li> | 127 | <li> |
97 | <label>Converter</label><span>Test</span> | 128 | <label>Converter</label><span>Test</span> |
98 | </li> | 129 | </li> |
99 | </ul> | 130 | </ul> |
100 | 131 | ||
132 | <button data-montage-id="close-button" class="nj-skinned">Close</button> | ||
133 | |||
101 | </div> | 134 | </div> |
102 | </body> | 135 | </body> |
103 | </html> \ No newline at end of file | 136 | </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 700f3024..1cef8f5e 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 | |||
@@ -9,8 +9,77 @@ var Montage = require("montage/core/core").Montage, | |||
9 | 9 | ||
10 | 10 | ||
11 | exports.EditBindingView = Montage.create(Component, { | 11 | exports.EditBindingView = Montage.create(Component, { |
12 | objectsList : { | 12 | |
13 | value: ["Object1", "Object2", "Object3"] | 13 | /* ------------------- |
14 | Binding Properties | ||
15 | ------------------- */ | ||
16 | |||
17 | sourceObjectIdentifier : { | ||
18 | value: "", | ||
19 | distinct: true | ||
20 | }, | ||
21 | sourceObjectPropertyPath : { | ||
22 | value: "", | ||
23 | distinct: true | ||
24 | }, | ||
25 | boundObjectIdentifier : { | ||
26 | value: "", | ||
27 | distinct: true | ||
28 | }, | ||
29 | boundObjectPropertyPath : { | ||
30 | value: "", | ||