diff options
Diffstat (limited to 'js/panels/properties.reel')
6 files changed, 104 insertions, 29 deletions
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css index f8d37984..f82d3660 100755 --- a/js/panels/properties.reel/properties.css +++ b/js/panels/properties.reel/properties.css | |||
@@ -230,23 +230,10 @@ padding-right:6px; | |||
230 | clear:none; | 230 | clear:none; |
231 | } | 231 | } |
232 | 232 | ||
233 | .propertiesPanel .LockToolUp, .propertiesPanel .UnLockToolUp { | ||
234 | position: absolute; | ||
235 | left: 105px; | ||
236 | border: none; | ||
237 | background-color: transparent; | ||
238 | top: 2px; | ||
239 | opacity: 0.7; | ||
240 | } | ||
241 | |||
242 | .propertiesPanel .button:active { | 233 | .propertiesPanel .button:active { |
243 | outline: none; | 234 | outline: none; |
244 | } | 235 | } |
245 | 236 | ||
246 | .propertiesPanel .LockToolUp:hover, .propertiesPanel .UnLockToolUp:hover { | ||
247 | opacity: 1; | ||
248 | } | ||
249 | |||
250 | .propertiesPanel input[type="checkbox"].nj-skinned, .propertiesPanel input[type="radio"].nj-skinned { | 237 | .propertiesPanel input[type="checkbox"].nj-skinned, .propertiesPanel input[type="radio"].nj-skinned { |
251 | position: relative; | 238 | position: relative; |
252 | overflow: visible; | 239 | overflow: visible; |
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js index 72d216ca..4c5c80d7 100755 --- a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js +++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js | |||
@@ -43,7 +43,13 @@ exports.DualRow = Montage.create(Component, { | |||
43 | this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":"; | 43 | this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":"; |
44 | } | 44 | } |
45 | if(this.label2 !== null) { | 45 | if(this.label2 !== null) { |
46 | this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":"; | 46 | if(this.content2.type === "button") { |
47 | this.content2.element = document.createElement("button"); | ||
48 | this.content2.element.classList.add("nj-skinned"); | ||
49 | this.element.getElementsByClassName("lbl")[1].style.display = "none"; | ||
50 | } else { | ||
51 | this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":"; | ||
52 | } | ||
47 | } else { | 53 | } else { |
48 | this.element.getElementsByClassName("lbl")[1].style.display = "none"; | 54 | this.element.getElementsByClassName("lbl")[1].style.display = "none"; |
49 | } | 55 | } |
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 3c595980..ac316907 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js | |||
@@ -20,6 +20,7 @@ var TextField = require("js/components/textfield.reel").TextField; | |||
20 | var FileInput = require("js/components/ui/file-input.reel").FileInput; | 20 | var FileInput = require("js/components/ui/file-input.reel").FileInput; |
21 | var Checkbox = require("js/components/checkbox.reel").Checkbox; | 21 | var Checkbox = require("js/components/checkbox.reel").Checkbox; |
22 | var ColorChip = require("js/components/ui/color-chip.reel").ColorChip; | 22 | var ColorChip = require("js/components/ui/color-chip.reel").ColorChip; |
23 | var Button = require("montage/ui/button.reel").Button; | ||
23 | 24 | ||
24 | exports.CustomSection = Montage.create(Component, { | 25 | exports.CustomSection = Montage.create(Component, { |
25 | 26 | ||
@@ -128,6 +129,15 @@ exports.CustomSection = Montage.create(Component, { | |||
128 | } | 129 | } |
129 | }, | 130 | }, |
130 | 131 | ||
132 | handleAction: { | ||
133 | value:function(event) { | ||
134 | if(event._event.wasSetByCode) return; | ||
135 | |||
136 | var obj = event.currentTarget; | ||
137 | this._dispatchPropEvent({"type": "change", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj}); | ||
138 | } | ||
139 | }, | ||
140 | |||
131 | _dispatchPropEvent: { | 141 | _dispatchPropEvent: { |
132 | value: function(event) { | 142 | value: function(event) { |
133 | // console.log(event); | 143 | // console.log(event); |
@@ -163,6 +173,7 @@ exports.CustomSection = Montage.create(Component, { | |||
163 | case "file" : return this.createFileInput(fields); | 173 | case "file" : return this.createFileInput(fields); |
164 | case "checkbox" : return this.createCheckbox(fields); | 174 | case "checkbox" : return this.createCheckbox(fields); |
165 | case "chip" : return this.createColorChip(fields); | 175 | case "chip" : return this.createColorChip(fields); |
176 | case "button" : return this.createButton(fields); | ||
166 | } | 177 | } |
167 | } | 178 | } |
168 | }, | 179 | }, |
@@ -317,6 +328,19 @@ exports.CustomSection = Montage.create(Component, { | |||
317 | if (aField.value) obj.label = aField.value; | 328 | if (aField.value) obj.label = aField.value; |
318 | if (aField.prop) obj.prop = aField.prop; | 329 | if (aField.prop) obj.prop = aField.prop; |
319 | 330 | ||
331 | if (aField.enabled) { | ||
332 | if(aField.enabled.boundObject) { | ||
333 | // TODO - For now, always bind to this.controls[someProperty] | ||
334 | Object.defineBinding(obj, "enabled", { | ||
335 | boundObject: this.controls, | ||
336 | boundObjectPropertyPath: aField.enabled.boundProperty, | ||
337 | oneway: false | ||
338 | }); | ||
339 | } else { | ||
340 | obj.enabled = aField.enabled; | ||
341 | } | ||
342 | } | ||
343 | |||
320 | //Initiate onChange Events | 344 | //Initiate onChange Events |
321 | obj.addEventListener("change", this, false); | 345 | obj.addEventListener("change", this, false); |
322 | 346 | ||
@@ -351,6 +375,39 @@ exports.CustomSection = Montage.create(Component, { | |||
351 | 375 | ||
352 | return obj; | 376 | return obj; |
353 | } | 377 | } |
378 | }, | ||
379 | |||
380 | createButton: { | ||
381 | value: function(aField) { | ||
382 | var obj = Button.create(); | ||
383 | |||
384 | // Set Values for Button | ||
385 | if (aField.id) obj.id = aField.id; | ||
386 | if (aField.label) obj.label = aField.label; | ||
387 | if (aField.prop) obj.prop = aField.prop; | ||
388 | |||
389 | // Special casing button so slot uses "button" tag instead of "div" | ||
390 | obj.type = "button"; | ||
391 | |||
392 | if (aField.enabled) { | ||
393 | if(aField.enabled.boundObject) { | ||
394 | // TODO - For now, always bind to this.controls[someProperty] | ||
395 | Object.defineBinding(obj, "enabled", { | ||
396 | boundObject: this.controls, | ||
397 | boundObjectPropertyPath: aField.enabled.boundProperty, | ||
398 | oneway: true | ||
399 | }); | ||
400 | } else { | ||
401 | obj.enabled = aField.enabled; | ||
402 | } | ||
403 | } | ||
404 | |||
405 | obj.addEventListener("action", this, false); | ||
406 | |||
407 | this.controls[aField.id] = obj; | ||
408 | |||
409 | return obj; | ||
410 | } | ||
354 | } | 411 | } |
355 | 412 | ||
356 | }); \ No newline at end of file | 413 | }); \ No newline at end of file |
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css index 227a232b..7f8fdbc2 100755 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css | |||
@@ -8,7 +8,33 @@ | |||
8 | display: none; | 8 | display: none; |
9 | } | 9 | } |
10 | 10 | ||
11 | .fieldCol .disabled | 11 | .fieldCol .disabled { |
12 | { | ||
13 | color:#999999; | 12 | color:#999999; |
14 | } \ No newline at end of file | 13 | } |
14 | |||
15 | |||
16 | #posBound { | ||
17 | position: absolute; | ||
18 | left: 105px; | ||
19 | border: none; | ||
20 | background-color: transparent; | ||
21 | top: 2px; | ||
22 | opacity: 0.7; | ||
23 | width: 17px; | ||
24 | height: 18px; | ||
25 | margin-right: 10px; | ||
26 | } | ||
27 | |||
28 | #posBound:hover { | ||
29 | opacity: 1; | ||
30 | } | ||
31 | |||
32 | .unlock{ | ||
33 | background: url("../../../../../images/optionsbar/unlinked.png") no-repeat; | ||
34 | |||
35 | } | ||
36 | |||
37 | .lockUp { | ||
38 | background: url("../../../../../images/optionsbar/link.png") no-repeat; | ||
39 | } | ||
40 | |||
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html index 6e355f31..f50724c5 100755 --- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html +++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html | |||
@@ -85,13 +85,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
85 | } | 85 | } |
86 | }, |