From 18370abcf406c6ab36d5c5f2613cb79e756ff6d2 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Wed, 9 May 2012 18:07:32 -0700 Subject: -Consolidated many redundant css classes used in the tool options bars --- css/ninja.css | 44 +++------ .../brush-properties.reel/brush-properties.css | 21 ---- .../brush-properties.reel/brush-properties.html | 6 +- .../fill-properties.reel/fill-properties.css | 23 +---- .../fill-properties.reel/fill-properties.html | 6 +- .../ink-bottle-properties.css | 24 +---- .../ink-bottle-properties.html | 4 +- .../pen-properties.reel/pen-properties.css | 16 --- .../pen-properties.reel/pen-properties.html | 8 +- .../rect-properties.reel/rect-properties.css | 2 +- .../rect-properties.reel/rect-properties.html | 10 +- .../selection-properties.html | 2 +- .../shape-properties.reel/shape-properties.css | 23 ----- .../shape-properties.reel/shape-properties.html | 14 +-- .../shape-properties.reel/shape-properties.js | 1 - .../tag-properties.reel/tag-properties.html | 26 ++--- .../text-properties.reel/text-properties.css | 1 - scss/imports/scss/_PanelUI.scss | 13 --- scss/imports/scss/_Tools.scss | 110 +++++++-------------- 19 files changed, 88 insertions(+), 266 deletions(-) diff --git a/css/ninja.css b/css/ninja.css index a65e826f..b281632e 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -526,10 +526,6 @@ div.pp-button.button-divider div { height: 1px; width: 24px; background-color: b #pp-container-assets input.inline-editor { height: 11px; width: 80%; background-color: #242424 !important; color: #b2b2b2 !important; top: -2px; border-width: 0px; font-size: 11px; } -.subToolHolderPanel { margin-left: 42px; } - -.subToolPanel { margin-top: -6px; } - .properties_panel { overflow-x: hidden; color: white; } .properties_panel select { -webkit-appearance: none; font-size: 9px; color: white; background-color: #444444; border: 1px solid #313131; width: 120px; height: 15px; outline: none; background-image: url("../images/dropdown-bg.png"); background-repeat: no-repeat; background-position: right center; } @@ -677,25 +673,19 @@ nav.menuBar ul ul, nav.menuBar ul li:hover ul ul, nav.menuBar ul ul li:hover ul nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul li:hover ul { display: block; } +.subToolHolderPanel { margin-left: 42px; padding: 6px; float: left; } + .subToolHolderPanel .toolbutton { float: left; -webkit-transform: scale(0.6); margin-top: -4px; } .subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { -webkit-transform: scale(0.75); } -.toolOptionsSpacer { margin-right: 9px; } - -.toolSeparator { height: 1px; width: 30px; } - -.toolSeparatorTop { margin-top: 3px; margin-bottom: 0px; } - -.toolSeparatorMiddle { margin-top: 0px; margin-bottom: 0px; } +.toolOptionsFloatChildren > * { float: left; } -.toolSeparatorBottom { margin-top: 0px; margin-bottom: 3px; } - -.toolImageBase { padding: 0px; width: 26px; height: 23px; opacity: 0.7; background-repeat: no-repeat; } +.toolOptionsSpacer { margin-right: 9px; } -.toolImageBase:hover { opacity: 1.0; } +.toolColorChipCtrl { width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; border: 1px black solid; } -.drawingMode { outline: blue solid thin; } +.toolColorChipIcon { width: 20px; height: 20px; margin-top: 1px; -webkit-transform: scale(0.8); background-color: #282828; } .textBox { padding-top: 3px; min-width: 10em; margin-left: 5px; position: relative; margin-top: 0px; } @@ -713,11 +703,11 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul .cornerRadius.topLeft { -webkit-transform: rotate(0deg); } -.cornerRadius.topRight { -webkit-transform: rotate(90deg); margin-right: -2px; } +.cornerRadius.topRight { -webkit-transform: rotate(90deg); } -.cornerRadius.bottomLeft { margin-top: 3px; -webkit-transform: rotate(270deg); } +.cornerRadius.bottomLeft { -webkit-transform: rotate(270deg); } -.cornerRadius.bottomRight { margin-top: 3px; -webkit-transform: rotate(180deg); margin-right: -2px; } +.cornerRadius.bottomRight { -webkit-transform: rotate(180deg); } #toolOptionsContainer { display: inline; float: left; } @@ -761,7 +751,7 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 .optionLabel { margin-top: 5px; } -.tagRadioButtons input.tag-type { background: none; width: 20px; height: 20px; display: block; float: left; margin: 0px; padding: 0px; margin-right: 5px; margin-top: 4px; background-repeat: no-repeat; opacity: 0.8; text-indent: -9999px; cursor: pointer; -webkit-border-radius: 3px; -webkit-user-select: none; border: 1px solid transparent; } +.tagRadioButtons input.tag-type { background: none; width: 20px; height: 20px; display: block; float: left; margin: 0px; padding: 0px; margin-right: 5px; margin-top: 0px; background-repeat: no-repeat; opacity: 0.8; text-indent: -9999px; cursor: pointer; -webkit-border-radius: 3px; -webkit-user-select: none; border: 1px solid transparent; } .tagRadioButtons input.tag-type { background-image: url("../images/tools/sprite-toolbar-tag.png"); } @@ -791,16 +781,12 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 .tagRadioButtons input.customTool:checked { background-position: 0px -20px; } -.tagRadioButtons .nj-divider { height: 100%; float: left; position: relative; top: 5px; } +.tagRadioButtons .nj-divider { height: 100%; float: left; position: relative; } -.tagRadioButtons select.nj-skinned { visibility: visible; position: relative; } +.tagRadioButtons select.nj-skinned { visibility: visible; position: relative; margin-top: 1px; } .tagRadioButtons select[disabled="true"].nj-skinned, .tagRadioButtons select[disabled].nj-skinned { visibility: hidden; } -.tagRadioButtons .fillColorCtrl { width: 18px; height: 18px; margin-top: 6px; margin-left: 3px; margin-right: 8px; border: 1px black solid; } - -.tagRadioButtons .colorCtrlIcon { width: 20px; height: 20px; margin-top: 6px; -webkit-transform: scale(0.8); background-color: #282828; } - #zoomToolOptionHolder input#zoomInTool:checked { border-style: solid; border-width: 1px; border-color: white; background-image: url("../images/optionsbar/zoom/zoom_plus.png"); background-repeat: no-repeat; background-position: 4px 3px; } #zoomToolOptionHolder input#zoomOutTool:checked { border-style: solid; border-width: 1px; border-color: white; background-image: url("../images/optionsbar/zoom/zoom_minus.png"); background-repeat: no-repeat; background-position: 4px 3px; } @@ -811,7 +797,7 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 #zoomToolOptionHolder input.zoom-option { background: none; } -.object3DToolContainer input.tag-type { background: none; width: 20px; height: 20px; display: block; float: left; margin: 0px; padding: 0px; margin-right: 5px; margin-top: 4px; background-repeat: no-repeat; opacity: 0.8; text-indent: -9999px; cursor: pointer; -webkit-border-radius: 3px; -webkit-user-select: none; border: 1px solid transparent; } +.object3DToolContainer input.tag-type { background: none; width: 20px; height: 20px; display: block; float: left; margin: 0px; margin-right: 5px; background-repeat: no-repeat; opacity: 0.8; text-indent: -9999px; cursor: pointer; -webkit-border-radius: 3px; -webkit-user-select: none; border: 1px solid transparent; } .object3DToolContainer input.tag-type { background-image: url("../images/tools/sprite-toolbar-3d.png"); } @@ -829,10 +815,6 @@ 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; } - .optionsSelectionTool button { padding-top: 0px; } .selectionToolIcon { width: 16px; height: 16px; background-repeat: no-repeat; background-position: 1px 2px; } diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.css b/js/components/tools-properties/brush-properties.reel/brush-properties.css index 0912dd7e..102a79db 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.css +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.css @@ -4,25 +4,4 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ - .optionsBrushTool { - padding: 6px; -} - .optionsBrushTool > * { - float:left; -} - - .optionsBrushTool .fillColorCtrl { - width: 20px; - height: 18px; - margin-left: 3px; - margin-right: 8px; - border: 1px black solid; -} - - .optionsBrushTool .colorCtrlIcon { - width: 20px; - height: 20px; - -webkit-transform: scale(0.8); - background-color: rgb(40, 40, 40); -} \ No newline at end of file diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html index a820dd04..7d99a42a 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.html +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html @@ -80,9 +80,9 @@ -
-
-
+
+
+
 
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 fa2e75e6..606e73b3 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.css +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.css @@ -4,32 +4,11 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -.optionsFillTool { - padding: 6px; -} -.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; + margin-right: 3px; } \ 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 9fb84a1b..975b4e6f 100755 --- a/js/components/tools-properties/fill-properties.reel/fill-properties.html +++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html @@ -34,12 +34,12 @@ -
+
-
+
-
+
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 4136339c..3dba17b6 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,21 +4,9 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -.toolOptionsFloatChildren > * { - float:left; -} - -.inkBottleOptions { - padding: 6px; -} -.inkBottleOptions .nj-divider { - margin-left: 16px; - margin-right: 16px; -} - -.toolOptionsFloatChildren select.nj-skinned { - margin-top: 2px; +.inkBottleOptions select.nj-skinned { + margin-top: 2px; } .inkBottleOptions label.disabled { @@ -35,11 +23,3 @@ 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 148c71e3..f5b1851f 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 @@ -180,7 +180,9 @@
+
 
 
+
 
@@ -194,7 +196,7 @@
-
+
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.css b/js/components/tools-properties/pen-properties.reel/pen-properties.css index d08d0abd..c6e68195 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.css +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.css @@ -5,24 +5,8 @@ */ .optionsPenTool { - padding: 6px; } .optionsPenTool > * { float:left; } - - .optionsPenTool .fillColorCtrl, .optionsPenTool .strokeColorCtrl { - width: 20px; - height: 18px; - margin-left: 3px; - margin-right: 8px; - border: 1px black solid; -} - - .optionsPenTool .colorCtrlIcon { - width: 20px; - height: 20px; - -webkit-transform: scale(0.8); - background-color: rgb(40, 40, 40); -} \ No newline at end of file diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html index 446b0a02..324d1070 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.html +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html @@ -40,10 +40,10 @@
-
-
-
-
+
+
+
+
 
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.css b/js/components/tools-properties/rect-properties.reel/rect-properties.css index cbd9dde8..c186d895 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.css +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.css @@ -16,7 +16,7 @@ } .rectProperties .subToolButton { - float:left; + margin-right: 7px; } .rectProperties .button:hover diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.html b/js/components/tools-properties/rect-properties.reel/rect-properties.html index 43dae547..6caef4b3 100755 --- a/js/components/tools-properties/rect-properties.reel/rect-properties.html +++ b/js/components/tools-properties/rect-properties.reel/rect-properties.html @@ -74,16 +74,16 @@ -
+
-
+
-
+
-
+
-
+
\ No newline at end of file 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 a05bb7a1..3dd04f2c 100755 --- a/js/components/tools-properties/selection-properties.reel/selection-properties.html +++ b/js/components/tools-properties/selection-properties.reel/selection-properties.html @@ -46,7 +46,7 @@ -
+
 
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css index 4dc64d66..c1f8a8ce 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.css +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css @@ -4,14 +4,6 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ - .optionsShapeTool { - padding: 6px; -} - - .optionsShapeTool > * { - float:left; -} - .optionsShapeTool select.nj-skinned { margin-top: 2px; } @@ -21,21 +13,6 @@ margin-left: -31px; } - .optionsShapeTool .fillColorCtrl, .optionsShapeTool .strokeColorCtrl { - width: 20px; - height: 18px; - margin: 1px 6px; - border: 1px black solid; -} - - .optionsShapeTool .colorCtrlIcon { - width: 20px; - height: 20px; - margin-top: 2px; - -webkit-transform: scale(0.8); - background-color: rgb(40, 40, 40); -} - .optionsShapeTool checkbox { padding: 6px; } 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 c54f8b25..c6aa0c94 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.html +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html @@ -132,15 +132,15 @@ -
+
 
-
-
-
-
+
+
+
+
 
@@ -153,12 +153,12 @@ -
+
-
+
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js index 74875544..23158493 100755 --- a/js/components/tools-properties/shape-properties.reel/shape-properties.js +++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js @@ -16,7 +16,6 @@ var ShapeProperties = exports.ShapeProperties = Montage.create(ToolProperties, { _fill: { enumerable: false, value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] } - //this._fillColorCtrl.color('nocolor', null); }, _stroke: { diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html index bd4590ce..f92665a7 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html @@ -37,10 +37,10 @@ -
-
-
-
+
+
+
+
 
@@ -51,15 +51,13 @@
 
-
- +
+ +
-
+
-
- - -
+
- -
- -
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css index f7bb8295..d34968e5 100755 --- a/js/components/tools-properties/text-properties.reel/text-properties.css +++ b/js/components/tools-properties/text-properties.reel/text-properties.css @@ -5,7 +5,6 @@ */ .optionsTextTool { - padding: 6px; } .optionsTextTool .btnGroup { diff --git a/scss/imports/scss/_PanelUI.scss b/scss/imports/scss/_PanelUI.scss index dd8cee04..8baffc95 100755 --- a/scss/imports/scss/_PanelUI.scss +++ b/scss/imports/scss/_PanelUI.scss @@ -855,20 +855,7 @@ div.pp-button.button-divider div { // End: Tree component for Project Panel - -.subToolHolderPanel{ - margin-left:42px -} - -.subToolPanel{ - margin-top:-6px -} - -// .marginposition{ - // margin-top:-26px -// } // Begin: Properties Panel styles - .properties_panel { overflow-x: hidden; color: $color-panel-text; diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index 637828a4..24846138 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -11,8 +11,11 @@ // _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss // - -// Made changes to toolButton } +.subToolHolderPanel { + margin-left: 42px; + padding: 6px; + float:left; +} .subToolHolderPanel .toolbutton { float:left; @@ -24,53 +27,37 @@ -webkit-transform: scale(0.75); } -.toolOptionsSpacer{ - margin-right: 9px; -} - -/* These appear to be unused -.toolSeparator { - height:1px; - width:30px; - // margin-left: 3px; - // margin-right: 3px; +.toolOptionsFloatChildren > * { + float:left; } -.toolSeparatorTop { - margin-top: 3px; - margin-bottom: 0px; -} +// .toolOptionsFloatChildren select.nj-skinned { +// margin-top: 2px; +// } -.toolSeparatorMiddle { - margin-top: 0px; - margin-bottom: 0px; -} -.toolSeparatorBottom { - margin-top: 0px; - margin-bottom: 3px; +.toolOptionsSpacer { + margin-right: 9px; } -.toolImageBase { - padding: 0px; - width: 26px; - height: 23px; - opacity: 0.7; - background-repeat:no-repeat; +.toolColorChipCtrl { + width: 18px; + height: 18px; + margin-top: 1px; + margin-left: 3px; + margin-right: 8px; + border: 1px black solid; } -.toolImageBase:hover { - opacity: 1.0; - } - -.drawingMode { - outline:blue solid thin; +.toolColorChipIcon { + width: 20px; + height: 20px; + margin-top: 1px; + -webkit-transform: scale(0.8); + background-color: rgb(40, 40, 40); } -*/ - // Added new styling Sub Tool Shape Options - .textBox { padding-top:3px; @@ -135,20 +122,20 @@ .cornerRadius.topRight { -webkit-transform: rotate(90deg); - margin-right : -2px; +// margin-right : -2px; } .cornerRadius.bottomLeft { - margin-top: 3px; +// margin-top: 3px; -webkit-transform: rotate(270deg); } .cornerRadius.bottomRight { - margin-top: 3px; +// margin-top: 3px; -webkit-transform: rotate(180deg); - margin-right : -2px; +// margin-right : -2px; } #toolOptionsContainer @@ -292,7 +279,7 @@ input[type="radio"]:disabled { margin: 0px; padding: 0px; margin-right: 5px; - margin-top: 4px; + margin-top: 0px; background-repeat: no-repeat; opacity: 0.8; text-indent: -9999px; @@ -353,35 +340,18 @@ input[type="radio"]:disabled { height: 100%; float: left; position: relative; - top: 5px; } .tagRadioButtons select.nj-skinned { visibility: visible; position: relative; + margin-top: 1px; } .tagRadioButtons select[disabled="true"].nj-skinned, .tagRadioButtons select[disabled].nj-skinned { visibility: hidden; } - -.tagRadioButtons .fillColorCtrl { - width: 18px; - height: 18px; - margin-top: 6px; - margin-left: 3px; - margin-right: 8px; - border: 1px black solid; -} - -.tagRadioButtons .colorCtrlIcon { - width: 20px; - height: 20px; - margin-top: 6px; - -webkit-transform: scale(0.8); - background-color: rgb(40, 40, 40); -} // End: styles for tag toolbar #zoomToolOptionHolder input#zoomInTool:checked{ @@ -430,9 +400,7 @@ input[type="radio"]:disabled { display: block; float: left; margin: 0px; - padding: 0px; - margin-right: 5px; - margin-top: 4px; + margin-right: 5px; background-repeat: no-repeat; opacity: 0.8; text-indent: -9999px; @@ -470,15 +438,7 @@ input[type="radio"]:disabled { background-position: 0px -20px; } -// Selection Tool Options -.optionsSelectionTool { - padding: 6px; -} - - .optionsSelectionTool > * { - float:left; -} - +// Selection Tool Options Styles .optionsSelectionTool button { padding-top: 0px; } @@ -489,6 +449,7 @@ input[type="radio"]:disabled { background-repeat:no-repeat; background-position: 1px 2px; } + .alignTopIcon { background-image: url("../images/tools/AlignTop.png"); } @@ -551,4 +512,5 @@ input[type="radio"]:disabled { .distRightIcon { background-image: url("../images/tools/DistRight.png"); -} \ No newline at end of file +} + -- cgit v1.2.3