diff options
author | Eric Guzman | 2012-06-13 11:28:58 -0700 |
---|---|---|
committer | Eric Guzman | 2012-06-13 11:28:58 -0700 |
commit | b5bf8292effae7b56f5dc8733ced4e799c22de44 (patch) | |
tree | 4c403b316fe18b4de1be523b43d71a08808faf76 /js | |
parent | bb1ab90e9ad1814f4e26f820bcdf5e54fa838a18 (diff) | |
download | ninja-b5bf8292effae7b56f5dc8733ced4e799c22de44.tar.gz |
Edit Binding - Update Layout
Diffstat (limited to 'js')
3 files changed, 101 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 37e27309..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,25 +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 | --------------------- */ | ||
22 | .edit-object-binding { | 25 | .edit-object-binding { |
26 | border-bottom: 1px solid #505050; | ||
23 | display: -webkit-box; | 27 | display: -webkit-box; |
24 | -webkit-box-orient: horizontal | 28 | margin: 5px; |
29 | padding-bottom: 5px; | ||
30 | -webkit-box-orient: horizontal; | ||
25 | } | 31 | } |
26 | .edit-object-binding > div { | 32 | .object-container { |
33 | display: -webkit-box; | ||
34 | -webkit-box-orient: horizontal; | ||
27 | -webkit-box-flex: 1; | 35 | -webkit-box-flex: 1; |
28 | overflow: hidden; | 36 | overflow: hidden; |
29 | } | 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 | } | ||
30 | .edit-object-binding .object-icon { | 54 | .edit-object-binding .object-icon { |
31 | -webkit-transform: scale(.75); | 55 | -webkit-transform: scale(.75); |
32 | float: left; | 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; | ||
33 | } | 67 | } |
34 | 68 | ||
69 | |||
35 | .edit-binding-view ul { | 70 | .edit-binding-view ul { |
36 | padding: 0; | 71 | padding: 0; |
37 | margin: 0; | 72 | margin: 0; |
@@ -47,14 +82,43 @@ | |||
47 | width: 50%; | 82 | width: 50%; |
48 | } | 83 | } |
49 | 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 | } | ||
50 | /* hintable fields */ | 110 | /* hintable fields */ |
51 | 111 | ||
52 | .hintable-field { | 112 | .hintable-field { |
53 | background-color: #444; | 113 | background-color: #444; |
54 | border: 1px solid #313131; | 114 | border: 1px solid #313131; |
55 | display: inline-block; | 115 | display: block; |
56 | height: 13px; | 116 | height: 13px; |
57 | margin-left: 5px; | 117 | margin: 0 0 5px 5px; |
58 | padding: 1px 4px; | 118 | padding: 1px 4px; |
59 | width: 45%; | 119 | width: 80%; |
120 | } | ||
121 | |||
122 | .hintable-field:focus { | ||
123 | border: 1px solid #313131; | ||
60 | } \ 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 c13e4587..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 | |||
@@ -150,34 +150,42 @@ | |||
150 | 150 | ||
151 | 151 | ||
152 | <section class="edit-object-binding"> | 152 | <section class="edit-object-binding"> |
153 | <div> | 153 | <div data-montage-id="source-object-container" class="object-container"> |
154 | <div class="object-icon"></div> | 154 | <div data-montage-id="source-object-icon-container" class="object-icon-container"> |
155 | <div> | ||
156 | <div class="object-icon"></div> | ||
157 | </div> | ||
158 | </div> | ||
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> | ||
155 | </div> | 163 | </div> |
156 | <span data-montage-id="sourceObjectField" class="hintable-field">Test</span> | 164 | |
157 | <span data-montage-id="so-pp" class="hintable-field so-pp"></span> | 165 | <div data-montage-id="bound-object-container" class="object-container"> |
158 | <div> | 166 | <div data-montage-id="bound-object-icon-container" class="object-icon-container"> |
159 | <div class="object-icon"></div> | 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> | ||
160 | </div> | 175 | </div> |
161 | <span data-montage-id="boundObjectField" class="hintable-field">Test</span> | ||
162 | <span data-montage-id="bo-pp" class="hintable-field po-pp"></span> | ||
163 | </section> | 176 | </section> |
164 | 177 | ||
165 | <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label> | ||
166 | |||
167 | <ul> | ||
168 | <h3>Configuration</h3> | ||
169 | <li class="edit-general-properties"> | ||
170 | 178 | ||
171 | </li> | 179 | <div class="checkbox-container"> |
172 | <li> | 180 | <input data-montage-id="direction-checkbox" type="checkbox" class="nj-skinned"><label>Oneway</label> |
173 | <label>Converter</label><span>Test</span> | 181 | </div> |
174 | </li> | ||
175 | </ul> | ||
176 | 182 | ||
177 | <button data-montage-id="delete-button" class="nj-skinned .btn-delete">Delete</button> | ||
178 | <button data-montage-id="cancel-button" class="nj-skinned">Cancel</button> | ||
179 | <button data-montage-id="save-button" class="nj-skinned">Save</button> | ||
180 | 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> | ||
181 | </div> | 189 | </div> |
182 | </body> | 190 | </body> |
183 | </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 | } |