aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJohn Mayhew2012-05-09 11:36:13 -0700
committerJohn Mayhew2012-05-09 11:36:13 -0700
commit0088f8e5f3a0be4b6e5e497afbe34de11211493c (patch)
tree648a1e6454d102fd17609c1122c5c433f106bc4a
parent9f0754eb0c619e9e33df707f24eed1dd6ae95096 (diff)
downloadninja-0088f8e5f3a0be4b6e5e497afbe34de11211493c.tar.gz
-Put new selection tool icons in the options bar
-Styled the selection tool options bar
-rwxr-xr-xcss/ninja.css40
-rw-r--r--images/tools/AlignBottom.pngbin0 -> 2887 bytes
-rw-r--r--images/tools/AlignCenter.pngbin0 -> 2859 bytes
-rw-r--r--images/tools/AlignLeft.pngbin0 -> 2847 bytes
-rw-r--r--images/tools/AlignMiddle.pngbin0 -> 2864 bytes
-rw-r--r--images/tools/AlignRight.pngbin0 -> 2851 bytes
-rw-r--r--images/tools/AlignTop.pngbin0 -> 2856 bytes
-rw-r--r--images/tools/ArrangeBringForward.pngbin0 -> 2877 bytes
-rw-r--r--images/tools/ArrangeBringToFront.pngbin0 -> 2877 bytes
-rw-r--r--images/tools/ArrangeSendBackward.pngbin0 -> 2873 bytes
-rw-r--r--images/tools/ArrangeSendToBack.pngbin0 -> 2877 bytes
-rw-r--r--images/tools/DistBottom.pngbin0 -> 2888 bytes
-rw-r--r--images/tools/DistCenter.pngbin0 -> 2868 bytes
-rw-r--r--images/tools/DistLeft.pngbin0 -> 2856 bytes
-rw-r--r--images/tools/DistMiddle.pngbin0 -> 2868 bytes
-rw-r--r--images/tools/DistRight.pngbin0 -> 2851 bytes
-rw-r--r--images/tools/DistTop.pngbin0 -> 2856 bytes
-rwxr-xr-xjs/components/tools-properties/selection-properties.reel/selection-properties.html69
-rwxr-xr-xjs/components/tools-properties/selection-properties.reel/selection-properties.js30
-rwxr-xr-xscss/imports/scss/_Tools.scss87
20 files changed, 151 insertions, 75 deletions
diff --git a/css/ninja.css b/css/ninja.css
index 0a74acf8..d309b34e 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -681,9 +681,7 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul
681 681
682.subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { -webkit-transform: scale(0.75); } 682.subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { -webkit-transform: scale(0.75); }
683 683
684.subOption { float: left; margin-top: 0px; margin-left: 1px; margin-right: 0px; } 684.toolOptionsSpacer { margin-right: 9px; }
685
686.subOptionSpacer { margin-right: 16px; }
687 685
688.toolSeparator { height: 1px; width: 30px; } 686.toolSeparator { height: 1px; width: 30px; }
689 687
@@ -835,29 +833,41 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
835 833
836.optionsSelectionTool > * { float: left; } 834.optionsSelectionTool > * { float: left; }
837 835
838.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } 836.optionsSelectionTool button { padding-top: 0px; }
837
838.selectionToolIcon { width: 16px; height: 16px; background-repeat: no-repeat; background-position: 1px 2px; }
839
840.alignTopIcon { background-image: url("../images/tools/AlignTop.png"); }
841
842.alignMiddleIcon { background-image: url("../images/tools/AlignMiddle.png"); }
843
844.alignBottomIcon { background-image: url("../images/tools/AlignBottom.png"); }
845
846.alignLeftIcon { background-image: url("../images/tools/AlignLeft.png"); }
847
848.alignCenterIcon { background-image: url("../images/tools/AlignCenter.png"); }
839 849
840.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } 850.alignRightIcon { background-image: url("../images/tools/AlignRight.png"); }
841 851
842.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } 852.arrangeBringForwardIcon { background-image: url("../images/tools/ArrangeBringForward.png"); }
843 853
844.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } 854.arrangeSendBackwardIcon { background-image: url("../images/tools/ArrangeSendBackward.png"); }
845 855
846.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } 856.arrangeBringToFrontIcon { background-image: url("../images/tools/ArrangeBringToFront.png"); }
847 857
848.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } 858.arrangeSendToBackIcon { background-image: url("../images/tools/ArrangeSendToBack.png"); }
849 859
850.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } 860.distTopIcon { background-image: url("../images/tools/DistTop.png"); }
851 861
852.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } 862.distMiddleIcon { background-image: url("../images/tools/DistMiddle.png"); }
853 863
854.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } 864.distBottomIcon { background-image: url("../images/tools/DistBottom.png"); }
855 865
856.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } 866.distLeftIcon { background-image: url("../images/tools/DistLeft.png"); }
857 867
858.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } 868.distCenterIcon { background-image: url("../images/tools/DistCenter.png"); }
859 869
860.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } 870.distRightIcon { background-image: url("../images/tools/DistRight.png"); }
861 871
862#toolsPanelContent { width: 40px; } 872#toolsPanelContent { width: 40px; }
863 873
diff --git a/images/tools/AlignBottom.png b/images/tools/AlignBottom.png
new file mode 100644
index 00000000..f68d62c8
--- /dev/null
+++ b/images/tools/AlignBottom.png
Binary files differ
diff --git a/images/tools/AlignCenter.png b/images/tools/AlignCenter.png
new file mode 100644
index 00000000..64bb4014
--- /dev/null
+++ b/images/tools/AlignCenter.png
Binary files differ
diff --git a/images/tools/AlignLeft.png b/images/tools/AlignLeft.png
new file mode 100644
index 00000000..822c5243
--- /dev/null
+++ b/images/tools/AlignLeft.png
Binary files differ
diff --git a/images/tools/AlignMiddle.png b/images/tools/AlignMiddle.png
new file mode 100644
index 00000000..03dffad5
--- /dev/null
+++ b/images/tools/AlignMiddle.png
Binary files differ
diff --git a/images/tools/AlignRight.png b/images/tools/AlignRight.png
new file mode 100644
index 00000000..07d6d7ef
--- /dev/null
+++ b/images/tools/AlignRight.png
Binary files differ
diff --git a/images/tools/AlignTop.png b/images/tools/AlignTop.png
new file mode 100644
index 00000000..378d8aab
--- /dev/null
+++ b/images/tools/AlignTop.png
Binary files differ
diff --git a/images/tools/ArrangeBringForward.png b/images/tools/ArrangeBringForward.png
new file mode 100644
index 00000000..55861b5a
--- /dev/null
+++ b/images/tools/ArrangeBringForward.png
Binary files differ
diff --git a/images/tools/ArrangeBringToFront.png b/images/tools/ArrangeBringToFront.png
new file mode 100644
index 00000000..1344e618
--- /dev/null
+++ b/images/tools/ArrangeBringToFront.png
Binary files differ
diff --git a/images/tools/ArrangeSendBackward.png b/images/tools/ArrangeSendBackward.png
new file mode 100644
index 00000000..2e8ea0ad
--- /dev/null
+++ b/images/tools/ArrangeSendBackward.png
Binary files differ
diff --git a/images/tools/ArrangeSendToBack.png b/images/tools/ArrangeSendToBack.png
new file mode 100644
index 00000000..699ae5ba
--- /dev/null
+++ b/images/tools/ArrangeSendToBack.png
Binary files differ
diff --git a/images/tools/DistBottom.png b/images/tools/DistBottom.png
new file mode 100644
index 00000000..c7ed75ce
--- /dev/null
+++ b/images/tools/DistBottom.png
Binary files differ
diff --git a/images/tools/DistCenter.png b/images/tools/DistCenter.png
new file mode 100644
index 00000000..cf8f2bf5
--- /dev/null
+++ b/images/tools/DistCenter.png
Binary files differ
diff --git a/images/tools/DistLeft.png b/images/tools/DistLeft.png
new file mode 100644
index 00000000..3849e9e6
--- /dev/null
+++ b/images/tools/DistLeft.png
Binary files differ
diff --git a/images/tools/DistMiddle.png b/images/tools/DistMiddle.png
new file mode 100644
index 00000000..bb32a441
--- /dev/null
+++ b/images/tools/DistMiddle.png
Binary files differ
diff --git a/images/tools/DistRight.png b/images/tools/DistRight.png
new file mode 100644
index 00000000..e350b53e
--- /dev/null
+++ b/images/tools/DistRight.png
Binary files differ
diff --git a/images/tools/DistTop.png b/images/tools/DistTop.png
new file mode 100644
index 00000000..1d474b3c
--- /dev/null
+++ b/images/tools/DistTop.png
Binary files differ
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