aboutsummaryrefslogtreecommitdiff
path: root/js/panels/binding
diff options
context:
space:
mode:
authorArmen Kesablyan2012-06-13 11:37:11 -0700
committerArmen Kesablyan2012-06-13 11:37:11 -0700
commitd2e2a39feeba51e976d139eddf6f1cf331457f4f (patch)
tree7616fb59b5210d0d0128f1fd5dde34a43eb13f11 /js/panels/binding
parentcfa2d42f6ca65eb3ce1bea92db5f4af87dd68bb5 (diff)
parentd57ab6509805ba4e97d6c74be913a2c1b324af3a (diff)
downloadninja-d2e2a39feeba51e976d139eddf6f1cf331457f4f.tar.gz
Merge pull request #12 from ericguzman/binding
Binding Panel update
Diffstat (limited to 'js/panels/binding')
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.css87
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.html59
-rw-r--r--js/panels/binding/edit-binding-view.reel/edit-binding-view.js2
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 },