From 9f0754eb0c619e9e33df707f24eed1dd6ae95096 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 8 May 2012 14:48:28 -0700 Subject: implemented proper styling for shape, inkbottle and fill tools make all icons for fill and stroke use the proper classes/images --- css/ninja.css | 54 +++++++++++----------- .../fill-properties.reel/fill-properties.css | 26 ++++++++++- .../fill-properties.reel/fill-properties.html | 9 ++-- .../ink-bottle-properties.css | 31 +++++++++---- .../ink-bottle-properties.html | 24 ++++------ .../shape-properties.reel/shape-properties.html | 4 +- 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 .object3DToolContainer input.rotateGlobally:checked { background-position: 0px -20px; } +.optionsSelectionTool { padding: 6px; } + +.optionsSelectionTool > * { float: left; } + +.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } + +.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } + +.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } + +.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } + +.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } + +.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } + +.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } + +.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } + +.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } + +.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } + +.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } + +.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } + #toolsPanelContent { width: 40px; } .toolsList { width: 29px; margin: auto; } @@ -883,32 +911,6 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 .InkBottleTool { background-image: url("../images/tools/Tool-FillColor.png"); } -.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; } - -.bucketToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px 0px; background-repeat: no-repeat; height: 23px; width: 26px; } - .blueDiv { background: blue; opacity: 0.2; } ::-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 @@ .optionsFillTool { padding: 6px; } - - .optionsFillTool > * { +.optionsFillTool > * { + float:left; +} +.optionsFillTool > * > *{ float:left; +} + +.optionsFillTool label { + margin-right: 8px; +} +.optionsFillTool .colorCtrlIcon { + width: 20px; + height: 20px; + margin-top: 0px; + margin-left: 10px; + -webkit-transform: scale(0.8); + background-color: rgb(40, 40, 40); +} + +.materialsContainerOptions select { + margin-top: 2px; +} + +.materialsContainerOptions label { + margin-right: 0px; } \ 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 @@
- -
- -
+ + +
+ +
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 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -.inkBottleProperties input[type="checkbox"].nj-skinned { +.toolOptionsFloatChildren > * { float:left; - margin-top:5px; } -.inkBottleProperties select.nj-skinned { - float:left; - margin:2px 5px 0 0; +.inkBottleOptions { + padding: 6px; +} + +.inkBottleOptions .nj-divider { + margin-left: 16px; + margin-right: 16px; } -.inkBottleProperties label.disabled { +.toolOptionsFloatChildren select.nj-skinned { + margin-top: 2px; +} + +.inkBottleOptions label.disabled { color:#999999; } -.inkBottleProperties label.disabled:hover { +.inkBottleOptions label.disabled:hover { color:#999999; background-color: transparent; cursor:default; } -.inkBottleProperties div.disabled:hover { +.inkBottleOptions div.disabled:hover { background-color: transparent; cursor:default; +} + +.inkBottleOptions .colorCtrlIcon { + width: 20px; + height: 20px; + margin-top: 2px; + -webkit-transform: scale(0.8); + background-color: rgb(40, 40, 40); } \ 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 @@ -
- -
+
+
@@ -181,25 +180,22 @@
-
 
+
 
-
+
-
- +
+ + -
+
-
- +
+
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html index e84f8092..9363365e 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -152,12 +152,12 @@ -
+
-
+
-- cgit v1.2.3