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
parent: 3ae45590d320b4e13367f78f821b7abcd9dbc53a (diff)
download: ninja-9f0754eb0c619e9e33df707f24eed1dd6ae95096.tar.gz
5 files changed, 64 insertions, 30 deletions
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 @@
    <body>
        <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool">
-            <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label>
+            <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
-            <div data-montage-id="materialsContainer" class="leftLabel" style="padding-top: 3px;">
+            <label class="label">Use WebGL</label>
-                <label class="label"> Materials:</label>
+            <div data-montage-id="materialsContainer" class="materialsContainerOptions">
-                <div data-montage-id="fillIcon" class="bucketToolUp" style="float: left;"></div>
+                <label class="label">Material:</label>
+                <div data-montage-id="fillIcon" class="colorCtrlIcon FillTool"></div>
                <select data-montage-id="fillMaterialCB" class="nj-skinned">
                </select>
            </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 @@
 (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>
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 @@
            <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label>
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
parent	3ae45590d320b4e13367f78f821b7abcd9dbc53a (diff)
download	ninja-9f0754eb0c619e9e33df707f24eed1dd6ae95096.tar.gz

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
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>


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 @@
152	<input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label>	152	<input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label>
153		153
154	<label data-montage-id="materialLabel" class="label">Material:</label>