diff options
author | John Mayhew | 2012-05-09 11:36:13 -0700 |
---|---|---|
committer | John Mayhew | 2012-05-09 11:36:13 -0700 |
commit | 0088f8e5f3a0be4b6e5e497afbe34de11211493c (patch) | |
tree | 648a1e6454d102fd17609c1122c5c433f106bc4a | |
parent | 9f0754eb0c619e9e33df707f24eed1dd6ae95096 (diff) | |
download | ninja-0088f8e5f3a0be4b6e5e497afbe34de11211493c.tar.gz |
-Put new selection tool icons in the options bar
-Styled the selection tool options bar
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  </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 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"> </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"> </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 |