implemented proper styling for shape, inkbottle and fill tools

make all icons for fill and stroke use the proper classes/images
author: John Mayhew 2012-05-08 14:48:28 -0700
committer: John Mayhew 2012-05-08 14:48:28 -0700
commit: 9f0754eb0c619e9e33df707f24eed1dd6ae95096 (patch)
tree: 117518819c4ef0529052de8f124017cd7d010b93 /js/components/tools-properties/ink-bottle-properties.reel
parent: 3ae45590d320b4e13367f78f821b7abcd9dbc53a (diff)
download: ninja-9f0754eb0c619e9e33df707f24eed1dd6ae95096.tar.gz
2 files changed, 33 insertions, 22 deletions
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.
 </copyright> */
-.inkBottleProperties input[type="checkbox"].nj-skinned {
+.toolOptionsFloatChildren > * {
    float:left;
-    margin-top:5px;
 }
-.inkBottleProperties select.nj-skinned {
+.inkBottleOptions {    
-    float:left;
+    padding: 6px;
-    margin:2px 5px 0 0;
+}
+.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 @@
    </head>
    <body>
-        <div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleProperties">
+        <div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleOptions toolOptionsFloatChildren">
+            <div data-montage-id="elementInkOptions" class="toolOptionsFloatChildren">
-            <div data-montage-id="elementInkOptions" class="leftLabel" style="padding-top: 3px;">
                <input data-montage-id="useBorderWidthCh" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/>
                <label data-montage-id="borderWidthLabel" class="label"> Border:</label>
                <div data-montage-id="borderWidth" class="label"></div>
@@ -181,25 +180,22 @@
                </select>
            </div>
-            <div class="nj-divider divider-vertical" style="margin:8px 20px; float: left;">&nbsp;</div>
+            <div class="nj-divider divider-vertical">&nbsp;</div>
-            <div data-montage-id="shapeInkOptions" class="leftLabel" style="margin-top: 5px;">
+            <div data-montage-id="shapeInkOptions" class="toolOptionsFloatChildren">
                <input data-montage-id="useStrokeSizeCh" type="checkbox" name="useStrokeControl" class="nj-skinned" title="Apply stroke size"/>
                <label data-montage-id="strokeSizeLabel" class="label"> Stroke:</label>
                <div data-montage-id="strokeSize" class="label"></div>
            </div>
-            <div data-montage-id="webGLInkOptions" class="leftLabel">
+            <div data-montage-id="webGLInkOptions" class="toolOptionsFloatChildren">
-                <label class="label">
+                <input data-montage-id="useWebGLCHIB" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
-                    <input data-montage-id="useWebGLCHIB" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
+                <label class="label"> Use WebGL</label>
-                    <label class="label"> Use WebGL</label>
-                </label>
-                <div data-montage-id="materialsContainerIB" class="leftLabel">
+                <div data-montage-id="materialsContainerIB" class="toolOptionsFloatChildren">
                    <label class="label"> Materials:</label>
-                    <div data-montage-id="strokeIconIB" class="pencilToolUp" style="float: left; margin: 0 2px 0 5px;"></div>
+                    <div data-montage-id="strokeIconIB" class="colorCtrlIcon PencilTool"></div>
-                    <select data-montage-id="strokeMaterialIBCB" class="nj-skinned">
+                    <select data-montage-id="strokeMaterialIBCB" class="nj-skinned"></select>
-                    </select>
                </div>
            </div>
        </div>
author	John Mayhew	2012-05-08 14:48:28 -0700
committer	John Mayhew	2012-05-08 14:48:28 -0700
commit	9f0754eb0c619e9e33df707f24eed1dd6ae95096 (patch)
tree	117518819c4ef0529052de8f124017cd7d010b93 /js/components/tools-properties/ink-bottle-properties.reel
parent	3ae45590d320b4e13367f78f821b7abcd9dbc53a (diff)
download	ninja-9f0754eb0c619e9e33df707f24eed1dd6ae95096.tar.gz

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
161	<body>	161	<body>
162	<div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleProperties">	162	<div data-montage-id="inkBottleProperties" class="subToolHolderPanel inkBottleOptions toolOptionsFloatChildren">
163		163	<div data-montage-id="elementInkOptions" class="toolOptionsFloatChildren">
164	<div data-montage-id="elementInkOptions" class="leftLabel" style="padding-top: 3px;">
165	<input data-montage-id="useBorderWidthCh" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/>	164	<input data-montage-id="useBorderWidthCh" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/>
166	<label data-montage-id="borderWidthLabel" class="label"> Border:</label>	165	<label data-montage-id="borderWidthLabel" class="label"> Border:</label>
167	<div data-montage-id="borderWidth" class="label"></div>	166	<div data-montage-id="borderWidth" class="label"></div>
@@ -181,25 +180,22 @@
181	</select>	180	</select>
182	</div>	181	</div>
183		182
184	<div class="nj-divider divider-vertical" style="margin:8px 20px; float: left;"> </div>	183	<div class="nj-divider divider-vertical"> </div>
185		184
186	<div data-montage-id="shapeInkOptions" class="leftLabel" style="margin-top: 5px;">	185	<div data-montage-id="shapeInkOptions" class="toolOptionsFloatChildren">
187	<input data-montage-id="useStrokeSizeCh" type="checkbox" name="useStrokeControl" class="nj-skinned" title="Apply stroke size"/>	186	<input data-montage-id="useStrokeSizeCh" type="checkbox" name="useStrokeControl" class="nj-skinned" title="Apply stroke size"/>
188	<label data-montage-id="strokeSizeLabel" class="label"> Stroke:</label>	187	<label data-montage-id="strokeSizeLabel" class="label"> Stroke:</label>
189	<div data-montage-id="strokeSize" class="label"></div>	188	<div data-montage-id="strokeSize" class="label"></div>
190	</div>	189	</div>
191		190
192	<div data-montage-id="webGLInkOptions" class="leftLabel">	191	<div data-montage-id="webGLInkOptions" class="toolOptionsFloatChildren">
193	<label class="label">	192	<input data-montage-id="useWebGLCHIB" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
194	<input data-montage-id="useWebGLCHIB" type="checkbox" name="useWebGLControl" class="nj-skinned"/>	193	<label class="label"> Use WebGL</label>
195	<label class="label"> Use WebGL</label>
196	</label>
197		194
198	<div data-montage-id="materialsContainerIB" class="leftLabel">	195	<div data-montage-id="materialsContainerIB" class="toolOptionsFloatChildren">
199	<label class="label"> Materials:</label>	196	<label class="label"> Materials:</label>
200	<div data-montage-id="strokeIconIB" class="pencilToolUp" style="float: left; margin: 0 2px 0 5px;"></div>	197	<div data-montage-id="strokeIconIB" class="colorCtrlIcon PencilTool"></div>
201	<select data-montage-id="strokeMaterialIBCB" class="nj-skinned">	198	<select data-montage-id="strokeMaterialIBCB" class="nj-skinned"></select>
202	</select>
203	</div>	199	</div>
204	</div>	200	</div>
205	</div>	201	</div>