aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJohn Mayhew2012-05-08 14:48:28 -0700
committerJohn Mayhew2012-05-08 14:48:28 -0700
commit9f0754eb0c619e9e33df707f24eed1dd6ae95096 (patch)
tree117518819c4ef0529052de8f124017cd7d010b93
parent3ae45590d320b4e13367f78f821b7abcd9dbc53a (diff)
downloadninja-9f0754eb0c619e9e33df707f24eed1dd6ae95096.tar.gz
implemented proper styling for shape, inkbottle and fill tools
make all icons for fill and stroke use the proper classes/images
-rwxr-xr-xcss/ninja.css54
-rwxr-xr-xjs/components/tools-properties/fill-properties.reel/fill-properties.css26
-rwxr-xr-xjs/components/tools-properties/fill-properties.reel/fill-properties.html9
-rwxr-xr-xjs/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css31
-rwxr-xr-xjs/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html24
-rwxr-xr-xjs/components/tools-properties/shape-properties.reel/shape-properties.html4
6 files changed, 92 insertions, 56 deletions
diff --git a/css/ninja.css b/css/ninja.css
index 24600b49..0a74acf8 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -831,6 +831,34 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
831 831
832.object3DToolContainer input.rotateGlobally:checked { background-position: 0px -20px; } 832.object3DToolContainer input.rotateGlobally:checked { background-position: 0px -20px; }
833 833
834.optionsSelectionTool { padding: 6px; }
835
836.optionsSelectionTool > * { float: left; }
837
838.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
839
840.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
841
842.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
843
844.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
845
846.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
847
848.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
849
850.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
851
852.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
853
854.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
855
856.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
857
858.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
859
860.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
861
834#toolsPanelContent { width: 40px; } 862#toolsPanelContent { width: 40px; }
835 863
836.toolsList { width: 29px; margin: auto; } 864.toolsList { width: 29px; margin: auto; }
@@ -883,32 +911,6 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
883 911
884.InkBottleTool { background-image: url("../images/tools/Tool-FillColor.png"); } 912.InkBottleTool { background-image: url("../images/tools/Tool-FillColor.png"); }
885 913
886.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
887
888.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
889
890.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
891
892.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
893
894.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
895
896.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
897
898.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
899
900.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
901
902.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
903
904.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
905
906.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
907
908.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
909
910.bucketToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px 0px; background-repeat: no-repeat; height: 23px; width: 26px; }
911
912.blueDiv { background: blue; opacity: 0.2; } 914.blueDiv { background: blue; opacity: 0.2; }
913 915
914::-webkit-scrollbar { width: 11px; height: 11px; } 916::-webkit-scrollbar { width: 11px; height: 11px; }
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.css b/js/components/tools-properties/fill-properties.reel/fill-properties.css
index 58b1c1e8..fa2e75e6 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.css
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.css
@@ -7,7 +7,29 @@
7.optionsFillTool { 7.optionsFillTool {
8 padding: 6px; 8 padding: 6px;
9} 9}
10 10.optionsFillTool > * {
11 .optionsFillTool > * { 11 float:left;
12}
13.optionsFillTool > * > *{
12 float:left; 14 float:left;
15}
16
17.optionsFillTool label {
18 margin-right: 8px;
19}
20.optionsFillTool .colorCtrlIcon {
21 width: 20px;
22 height: 20px;
23 margin-top: 0px;
24 margin-left: 10px;
25 -webkit-transform: scale(0.8);
26 background-color: rgb(40, 40, 40);
27}
28
29.materialsContainerOptions select {
30 margin-top: 2px;
31}
32
33.materialsContainerOptions label {
34 margin-right: 0px;
13} \ No newline at end of file 35} \ No newline at end of file
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html
index fb59e2a8..9fb84a1b 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -35,10 +35,11 @@
35 35
36 <body> 36 <body>
37 <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool"> 37 <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool">
38 <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label> 38 <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
39 <div data-montage-id="materialsContainer" class="leftLabel" style="padding-top: 3px;"> 39 <label class="label">Use WebGL</label>
40 <label class="label"> Materials:</label> 40 <div data-montage-id="materialsContainer" class="materialsContainerOptions">
41 <div data-montage-id="fillIcon" class="bucketToolUp" style="float: left;"></div> 41 <label class="label">Material:</label>
42 <div data-montage-id="fillIcon" class="colorCtrlIcon FillTool"></div>
42 <select data-montage-id="fillMaterialCB" class="nj-skinned"> 43 <select data-montage-id="fillMaterialCB" class="nj-skinned">
43 </select> 44 </select>
44 </div> 45 </div>
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
index a926a0b4..4136339c 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
@@ -4,27 +4,42 @@
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.inkBottleProperties input[type="checkbox"].nj-skinned { 7.toolOptionsFloatChildren > * {
8 float:left; 8 float:left;
9 margin-top:5px;
10} 9}
11 10
12.inkBottleProperties select.nj-skinned { 11.inkBottleOptions {
13 float:left; 12 padding: 6px;
14 margin:2px 5px 0 0; 13}
14
15.inkBottleOptions .nj-divider {
16 margin-left: 16px;
17 margin-right: 16px;
15} 18}
16 19
17.inkBottleProperties label.disabled { 20.toolOptionsFloatChildren select.nj-skinned {
21 margin-top: 2px;
22}
23
24.inkBottleOptions label.disabled {
18 color:#999999; 25 color:#999999;
19} 26}
20 27
21.inkBottleProperties label.disabled:hover { 28.inkBottleOptions label.disabled:hover {
22 color:#999999; 29 color:#999999;
23 background-color: transparent; 30 background-color: transparent;
24 cursor:default; 31 cursor:default;
25} 32}
26 33
27.inkBottleProperties div.disabled:hover { 34.inkBottleOptions div.disabled:hover {
28 background-color: transparent; 35 background-color: transparent;
29 cursor:default; 36 cursor:default;
37}
38
39.inkBottleOptions .colorCtrlIcon {
40 width: 20px;
41 height: 20px;
42 margin-top: 2px;
43 -webkit-transform: scale(0.8);
44 background-color: rgb(40, 40, 40);
30} \ No newline at end of file 45} \ No newline at end of file
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
index 010e77b2..148c71e3 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
@@ -159,9 +159,8 @@
159 </head> 159 </head>
160 160