diff options
author | Armen Kesablyan | 2012-06-13 11:37:11 -0700 |
---|---|---|
committer | Armen Kesablyan | 2012-06-13 11:37:11 -0700 |
commit | d2e2a39feeba51e976d139eddf6f1cf331457f4f (patch) | |
tree | 7616fb59b5210d0d0128f1fd5dde34a43eb13f11 /js/panels/binding | |
parent | cfa2d42f6ca65eb3ce1bea92db5f4af87dd68bb5 (diff) | |
parent | d57ab6509805ba4e97d6c74be913a2c1b324af3a (diff) | |
download | ninja-d2e2a39feeba51e976d139eddf6f1cf331457f4f.tar.gz |
Merge pull request #12 from ericguzman/binding
Binding Panel update
Diffstat (limited to 'js/panels/binding')
3 files changed, 117 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 aa539cd6..23585aca 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 | |||
@@ -13,12 +13,60 @@ | |||
13 | position: absolute; | 13 | position: absolute; |
14 | top: 0; | 14 | top: 0; |
15 | width: 100%; | 15 | width: 100%; |
16 | -webkit-transition-property: -webkit-transform, box-shadow; | 16 | -webkit-transition-property: -webkit-transform; |
17 | -webkit-transition-duration: .55s, .2s; | 17 | -webkit-transition-duration: .55s; |
18 | -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99); | 18 | -webkit-transition-timing-function: cubic-bezier(.44,.19,0,.99); |
19 | -webkit-user-select: text; | 19 | -webkit-user-select: text; |
20 | } | 20 | } |
21 | 21 | ||
22 | /* ------------------- | ||
23 | Object Editing Section | ||
24 | --------------------- */ | ||
25 | .edit-object-binding { | ||
26 | border-bottom: 1px solid #505050; | ||
27 | display: -webkit-box; | ||
28 | margin: 5px; | ||
29 | padding-bottom: 5px; | ||
30 | -webkit-box-orient: horizontal; | ||
31 | } | ||
32 | .object-container { | ||
33 | display: -webkit-box; | ||
34 | -webkit-box-orient: horizontal; | ||
35 | -webkit-box-flex: 1; | ||
36 | overflow: hidden; | ||
37 | } | ||
38 | .object-container:first-child { | ||
39 | margin-right: 5px; | ||
40 | } | ||
41 | .object-icon-container { | ||
42 | background-color: #414141; | ||
43 | border-radius: 5px; | ||
44 | border: 1px solid #333; | ||
45 | box-shadow: inset 0 0 5px 0px #333, 0 1px 0 #585858; | ||
46 | height: 40px; | ||
47 | width: 40px; | ||
48 | -webkit-box-flex: 0; | ||
49 | } | ||
50 | .object-icon-container > div { | ||
51 | height: 100%; | ||
52 | width: 100%; | ||
53 | } | ||
54 | .edit-object-binding .object-icon { | ||
55 | -webkit-transform: scale(.75); | ||
56 | height: 100%; | ||
57 | margin: 0; | ||
58 | width: 100%; | ||
59 | position:relative; | ||
60 | top: -1px; | ||
61 | left: -1px; | ||
62 | } | ||
63 | .object-fields-container { | ||
64 | -webkit-box-flex: 1; | ||
65 | padding-top: 1px; | ||
66 | width: 1px; | ||
67 | } | ||
68 | |||
69 | |||
22 | .edit-binding-view ul { | 70 | .edit-binding-view ul { |
23 | padding: 0; | 71 | padding: 0; |
24 | margin: 0; | 72 | margin: 0; |
@@ -34,14 +82,43 @@ | |||
34 | width: 50%; | 82 | width: 50%; |
35 | } | 83 | } |
36 | 84 | ||
85 | .checkbox-container { | ||
86 | position: absolute; | ||
87 | left: 50%; | ||
88 | } | ||
89 | .checkbox-container label { | ||
90 | position: relative; | ||
91 | top: -3px; | ||
92 | } | ||
93 | |||
94 | .buttons-container { | ||
95 | background-color: #474747; | ||
96 | position: absolute; | ||
97 | bottom: 5px; | ||
98 | width: 100%; | ||
99 | } | ||
100 | |||
101 | .edit-binding-view .btn-delete, .edit-binding-view .btn-cancel, .edit-binding-view .btn-save { | ||
102 | width: 72px; | ||
103 | display: inline-block; | ||
104 | margin: 0 5px; | ||
105 | } | ||
106 | .edit-binding-view .btn-cancel, .edit-binding-view .btn-save { | ||
107 | float:right; | ||
108 | margin: 0 5px 0 0; | ||
109 | } | ||
37 | /* hintable fields */ | 110 | /* hintable fields */ |
38 | 111 | ||
39 | .hintable-field { | 112 | .hintable-field { |
40 | background-color: #444; | 113 | background-color: #444; |
41 | border: 1px solid #313131; | 114 | border: 1px solid #313131; |
42 | display: inline-block; | 115 | display: block; |
43 | height: 13px; | 116 | height: 13px; |
44 | margin-left: 5px; | 117 | margin: 0 0 5px 5px; |
45 | padding: 1px 4px; | 118 | padding: 1px 4px; |
46 | width: 45%; | 119 | width: 80%; |
120 | } | ||
121 | |||
122 | .hintable-field:focus { | ||
123 | border: 1px solid #313131; | ||
47 | } \ No newline at end of file | 124 | } \ 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 604d4871..e2cbdd1d 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 | |||
@@ -148,33 +148,44 @@ | |||
148 | <body> | 148 | <body> |
149 | <div data-montage-id="edit-binding" class="edit-binding-view"> | 149 | <div data-montage-id="edit-binding" class="edit-binding-view"> |
150 | 150 | ||
151 | <ul> | ||
152 | <h3>Source Object</h3> | ||
153 | <li class="edit-source-object"> | ||
154 | <label>Identifier:</label><span data-montage-id="sourceObjectField" class="hintable-field">Test</span> | ||
155 | <br> | ||
156 | <label>Property Path:</label><span data-montage-id="so-pp" class="hintable-field so-pp">Test</span> | ||
157 | </li> | ||
158 | <h3>Bound Object</h3> | ||
159 | <li class="edit-bound-object"> | ||
160 | <label>Identifier:</label><span data-montage-id="boundObjectField" class="hintable-field">Test</span> | ||
161 | <br> | ||
162 | <label>Property Path:</label><span data-montage-id="bo-pp" class="hintable-field bo-pp">Test</span> | ||
163 | </li> | ||
164 | 151 | ||
165 | <h3>Configuration</h3> | 152 | <section class="edit-object-binding"> |
166 | <li class="edit-general-properties"> | 153 | <div data-montage-id="source-object-container" class="object-container"> |
167 | <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label> | 154 | <div data-montage-id="source-object-icon-container" class="object-icon-container"> |
168 | </li> | 155 | <div> |
169 | <li> | 156 | <div class="object-icon"></div> |
170 | <label>Converter</label><span>Test</span> | 157 | </div> |
171 | </li> | 158 | </div> |
172 | </ul> | 159 | <div class="object-fields-container"> |
160 | <span data-montage-id="sourceObjectField" class="hintable-field">Test</span> | ||
161 | <span data-montage-id="so-pp" class="hintable-field so-pp"></span> | ||
162 | </div> | ||
163 | </div> | ||
173 | 164 | ||
174 | <button data-montage-id="delete-button" class="nj-skinned .btn-delete">Delete</button> | 165 | <div data-montage-id="bound-object-container" class="object-container"> |
175 | <button data-montage-id="cancel-button" class="nj-skinned">Cancel</button> | 166 | <div data-montage-id="bound-object-icon-container" class="object-icon-container"> |
176 | <button data-montage-id="save-button" class="nj-skinned">Save</button> | 167 | <div> |
168 | <div class="object-icon"></div> | ||
169 | </div> | ||
170 | </div> | ||
171 | <div class="object-fields-container"> | ||
172 | <span data-montage-id="boundObjectField" class="hintable-field">Test</span> | ||
173 | <span data-montage-id="bo-pp" class="hintable-field bo-pp"></span> | ||
174 | </div> | ||
175 | </div> | ||
176 | </section> | ||
177 | 177 | ||
178 | |||
179 | <div class="checkbox-container"> | ||
180 | <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label> | ||
181 | </div> | ||
182 | |||
183 | |||
184 | <div class="buttons-container"> | ||
185 | <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> | ||
187 | <button data-montage-id="cancel-button" class="nj-skinned btn-cancel">Cancel</button> | ||
188 | </div> | ||
178 | </div> | 189 | </div> |
179 | </body> | 190 | </body> |
180 | </html> \ No newline at end of file | 191 | </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 c9f946f5..10f427af 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 | |||
@@ -145,7 +145,6 @@ exports.EditBindingView = Montage.create(Component, { | |||
145 | controller.editBinding(this.bindingArgs, newBindingArgs); | 145 | controller.editBinding(this.bindingArgs, newBindingArgs); |
146 | } | 146 | } |
147 | 147 | ||
148 | controller.currentObject = controller.currentObject; | ||
149 | } | 148 | } |
150 | }, | 149 | }, |
151 |