aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.css21
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.html77
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.js73
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
11exports.EditBindingView = Montage.create(Component, { 11exports.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: "",
31 distinct: true