aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Guzman2012-06-13 11:28:58 -0700
committerEric Guzman2012-06-13 11:28:58 -0700
commitb5bf8292effae7b56f5dc8733ced4e799c22de44 (patch)
tree4c403b316fe18b4de1be523b43d71a08808faf76
parentbb1ab90e9ad1814f4e26f820bcdf5e54fa838a18 (diff)
downloadninja-b5bf8292effae7b56f5dc8733ced4e799c22de44.tar.gz
Edit Binding - Update Layout
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.css80
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.html50
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.js2
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 }
150 },