aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJohn Mayhew2012-05-09 11:36:13 -0700
committerJohn Mayhew2012-05-09 11:36:13 -0700
commit0088f8e5f3a0be4b6e5e497afbe34de11211493c (patch)
tree648a1e6454d102fd17609c1122c5c433f106bc4a /js
parent9f0754eb0c619e9e33df707f24eed1dd6ae95096 (diff)
downloadninja-0088f8e5f3a0be4b6e5e497afbe34de11211493c.tar.gz
-Put new selection tool icons in the options bar
-Styled the selection tool options bar
Diffstat (limited to 'js')
-rwxr-xr-xjs/components/tools-properties/selection-properties.reel/selection-properties.html69
-rwxr-xr-xjs/components/tools-properties/selection-properties.reel/selection-properties.js30
2 files changed, 79 insertions, 20 deletions
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 2a791542..a05bb7a1 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 optionsSelectionTool"> 49 <div data-montage-id="selectionProperties" class="subToolHolderPanel optionsSelectionTool">
29 <input data-montage-id="transformCheck" type="checkbox" name="transformControl" class="nj-skinned"/><label class="label">Transform Controls&nbsp&nbsp</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">&nbsp</div>
32 <div class="subOption"><div id="rightAlign" class="rightAlignUp" title="Right Align"></div></div> 53
33 <div class="subOption subOptionSpacer"><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 subOptionSpacer"><div id="vCenter" class="verticalCenterUp" title="Vertical Center"></div></div> 57 <div class="toolOptionsSpacer">&nbsp</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 subOptionSpacer"><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">&nbsp</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">&nbsp</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">&nbsp</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
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-02 19:09:45 +0000