diff options
Diffstat (limited to 'js/components/tools-properties/selection-properties.reel')
3 files changed, 80 insertions, 24 deletions
diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.css b/js/components/tools-properties/selection-properties.reel/selection-properties.css index e3fe1755..7f1b0f7f 100755 --- a/js/components/tools-properties/selection-properties.reel/selection-properties.css +++ b/js/components/tools-properties/selection-properties.reel/selection-properties.css | |||
@@ -4,6 +4,3 @@ | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | .selectionProperties { | ||
8 | margin-top: -6px; | ||
9 | } \ No newline at end of file | ||
diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.html b/js/components/tools-properties/selection-properties.reel/selection-properties.html index b93aacd0..3dd04f2c 100755 --- a/js/components/tools-properties/selection-properties.reel/selection-properties.html +++ b/js/components/tools-properties/selection-properties.reel/selection-properties.html | |||
@@ -16,31 +16,66 @@ | |||
16 | "prototype": "js/components/tools-properties/selection-properties.reel", | 16 | "prototype": "js/components/tools-properties/selection-properties.reel", |
17 | "properties": { | 17 | "properties": { |
18 | "element": {"#": "selectionProperties"}, | 18 | "element": {"#": "selectionProperties"}, |
19 | "transform": {"#": "transformCheck"} | 19 | "transform": {"#": "transformCheck"}, |
20 | |||
21 | "topAlign": {"#": "topAlignBtn"}, | ||
22 | "middleAlign": {"#": "middleAlignBtn"}, | ||
23 | "bottomAlign": {"#": "bottomAlignBtn"}, | ||
24 | |||
25 | "leftAlign": {"#": "leftAlignBtn"}, | ||
26 | "centerAlign": {"#": "centerAlignBtn"}, | ||
27 | "rightAlign": {"#": "rightAlignBtn"}, | ||
28 | |||
29 | "distTop": {"#": "distTopBtn"}, | ||
30 | "distMiddle": {"#": "distMiddleBtn"}, | ||
31 | "distBottom": {"#": "distBottomBtn"}, | ||
32 | |||
33 | "distLeft": {"#": "distLeftBtn"}, | ||
34 | "distCenter": {"#": "distCenterBtn"}, | ||
35 | "distRight": {"#": "distRightBtn"}, | ||
36 | |||
37 | "arrangeBringForward": {"#": "arrangeBringForwardBtn"}, | ||
38 | "arrangeSendBackward": {"#": "arrangeSendBackwardBtn"}, | ||
39 | "arrangeBringToFront": {"#": "arrangeBringToFrontBtn"}, | ||
40 | "arrangeSendToBack": {"#": "arrangeSendToBackBtn"} | ||
20 | } | 41 | } |
21 | } | 42 | } |
22 | } | 43 | } |
23 | </script> | 44 | </script> |
24 | 45 | ||
25 | </head> | 46 | </head> |
26 | 47 | ||
27 | <body> | 48 | <body> |
28 | <div data-montage-id="selectionProperties" class="subToolHolderPanel"> | 49 | <div data-montage-id="selectionProperties" class="subToolHolderPanel optionsSelectionTool toolOptionsFloatChildren"> |
29 | <label class="label subOption optionLabel"><input data-montage-id="transformCheck" type="checkbox" name="transformControl" class="checkBoxAlign"/>Transform Controls</label> | 50 | <input data-montage-id="transformCheck" type="checkbox" name="transformControl" class="nj-skinned"/> |
30 | <div id="toolPropertiesPanel-selectionDivOptions"> | 51 | <label class="label">Transform Control</label> |
31 | <div class="subOption"><div id="topAlign" class="topAlignUp" title="Top Align"></div></div> | 52 | <div class="toolOptionsSpacer"> </div> |
32 | <div class="subOption"><div id="rightAlign" class="rightAlignUp" title="Right Align"></div></div> | 53 | |
33 | <div class="subOption"><div id="bottomAlign" class="bottomAlignUp" title="Bottom Align"></div></div> | 54 | <button data-montage-id="topAlignBtn" class="nj-skinned" role="button"><div id="topAlign" class="selectionToolIcon alignTopIcon" title="Align Top"/></button> |
34 | <div class="subOption"><div id="vLeft" class="verticalLeftUp" title="Vertical Left"></div></div> | 55 | <button data-montage-id="middleAlignBtn" class="nj-skinned" role="button"><div id="middleAlign" class="selectionToolIcon alignMiddleIcon" title="Align Vertical Center"/></button> |
35 | <div class="subOption"><div id="vRight" class="verticalRightUp" title="Vertical Right"></div></div> | 56 | <button data-montage-id="bottomAlignBtn" class="nj-skinned" role="button"><div id="bottomAlign" class="selectionToolIcon alignBottomIcon" title="Align Bottom"></button> |
36 | <div class="subOption"><div id="vCenter" class="verticalCenterUp" title="Vertical Center"></div></div> | 57 | <div class="toolOptionsSpacer"> </div> |
37 | <div class="subOption"><div id="distTop" class="distTopUp" title="Distance Top"></div></div> | 58 | |
38 | <div class="subOption"><div id="distCenter" class="distCenterUp" title="Distance Center"></div></div> | 59 | <button data-montage-id="leftAlignBtn" class="nj-skinned" role="button"><div id="leftAlign" class="selectionToolIcon alignLeftIcon" title="Align Left"/></button> |
39 | <div class="subOption"><div id="distBottom" class="distBottomUp" title="Distance Bottom"></div></div> | 60 | <button data-montage-id="centerAlignBtn" class="nj-skinned" role="button"><div id="centerAlign" class="selectionToolIcon alignCenterIcon" title="Align Horizontal Center"/></button> |
40 | <div class="subOption"><div id="distLeft" class="distLeftUp" title="Distance Left"></div></div> | 61 | <button data-montage-id="rightAlignBtn" class="nj-skinned" role="button"><div id="rightAlign" class="selectionToolIcon alignRightIcon" title="Align Right"/></button> |
41 | <div class="subOption"><div id="distVCenter" class="distVCenterUp" title="Distance Center"></div></div> | 62 | <div class="toolOptionsSpacer"> </div> |
42 | <div class="subOption"><div id="distRight" class="distRightUp" title="Distance Right"></div></div> | 63 | |
43 | </div> | 64 | <button data-montage-id="distTopBtn" class="nj-skinned" role="button"><div id="distTop" class="selectionToolIcon distTopIcon" title="Distribute Top"/></button> |
65 | <button data-montage-id="distMiddleBtn" class="nj-skinned" role="button"><div id="distMiddle" class="selectionToolIcon distMiddleIcon" title="Distribute Vertical Center"/></button> | ||
66 | <button data-montage-id="distBottomBtn" class="nj-skinned" role="button"><div id="distBottom" class="selectionToolIcon distBottomIcon" title="Distribute Bottom"/></button> | ||
67 | <div class="toolOptionsSpacer"> </div> | ||
68 | |||
69 | <button data-montage-id="distLeftBtn" class="nj-skinned" role="button"><div id="distLeft" class="selectionToolIcon distLeftIcon" title="Distribute Left"/></button> | ||
70 | <button data-montage-id="distCenterBtn" class="nj-skinned" role="button"><div id="distCenter" class="selectionToolIcon distCenterIcon" title="Distribute Horizontal Center"/></button> | ||
71 | <button data-montage-id="distRightBtn" class="nj-skinned" role="button"><div id="distRight" class="selectionToolIcon distRightIcon" title="Distribute Right"/></button> | ||
72 | <div class="toolOptionsSpacer"> </div> | ||
73 | |||
74 | <button data-montage-id="arrangeBringForwardBtn" class="nj-skinned" role="button"><div id="arrangeBringForward" class="selectionToolIcon arrangeBringForwardIcon" title="Bring Forward"/></button> | ||
75 | <button data-montage-id="arrangeSendBackwardBtn" class="nj-skinned" role="button"><div id="arrangeSendBackward" class="selectionToolIcon arrangeSendBackwardIcon" title="Send Backward"/></button> | ||
76 | <button data-montage-id="arrangeBringToFrontBtn" class="nj-skinned" role="button"><div id="arrangeBringToFront" class="selectionToolIcon arrangeBringToFrontIcon" title="Bring To Front"/></button> | ||
77 | <button data-montage-id="arrangeSendToBackBtn" class="nj-skinned" role="button"><div id="arrangeSendToBack" class="selectionToolIcon arrangeSendToBackIcon" title="Send To Back"/></button> | ||
78 | |||
44 | </div> | 79 | </div> |
45 | </body> | 80 | </body> |
46 | 81 | ||
diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.js b/js/components/tools-properties/selection-properties.reel/selection-properties.js index c25e96d1..43622960 100755 --- a/js/components/tools-properties/selection-properties.reel/selection-properties.js +++ b/js/components/tools-properties/selection-properties.reel/selection-properties.js | |||
@@ -14,15 +14,39 @@ exports.SelectionProperties = Montage.create(ToolProperties, { | |||
14 | _controls: { value: false }, | 14 | _controls: { value: false }, |
15 | 15 | ||
16 | _subPrepare: { | 16 | _subPrepare: { |
17 | value: function() { | 17 | value: function () { |
18 | this.transform.addEventListener("change", this, false); | 18 | this.transform.addEventListener("change", this, false); |
19 | |||
20 | // The functionality for these buttons is not currently implemented | ||
21 | // Until it is we will make them all disabled by default. | ||
22 | this.topAlign.disabled = true; | ||
23 | |||
24 | this.middleAlign.disabled = true; | ||
25 | this.bottomAlign.disabled = true; | ||
26 | |||
27 | this.leftAlign.disabled = true; | ||
28 | this.centerAlign.disabled = true; | ||
29 | this.rightAlign.disabled = true; | ||
30 | |||
31 | this.distTop.disabled = true; | ||
32 | this.distMiddle.disabled = true; | ||
33 | this.distBottom.disabled = true; | ||
34 | |||
35 | this.distLeft.disabled = true; | ||
36 | this.distCenter.disabled = true; | ||
37 | this.distRight.disabled = true; | ||
38 | |||
39 | this.arrangeBringForward.disabled = true; | ||
40 | this.arrangeSendBackward.disabled = true; | ||
41 | this.arrangeBringToFront.disabled = true; | ||
42 | this.arrangeSendToBack.disabled = true; | ||
19 | } | 43 | } |
20 | }, | 44 | }, |
21 | 45 | ||
22 | handleChange: { | 46 | handleChange: { |
23 | value: function(event) { | 47 | value: function (event) { |
24 | this._controls = this.transform.checked; | 48 | this._controls = this.transform.checked; |
25 | NJevent("toolOptionsChange", {source: "SelectionProperties", inTransformMode: this.transform.checked}); | 49 | NJevent("toolOptionsChange", { source: "SelectionProperties", inTransformMode: this.transform.checked }); |
26 | } | 50 | } |
27 | } | 51 | } |
28 | 52 | ||