From 2cdefe05cdc058160093d7ab9d50a4fadd1c45fc Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Mon, 14 May 2012 12:41:47 -0700 Subject: -updated images for tag and zoom tool -made tag and zoom tool radio group button styles consistent and removed duplicate classes --- css/ninja.css | 48 +++---- images/optionsbar/pen/penMinus.png | Bin 0 -> 392 bytes images/optionsbar/pen/penPlus.png | Bin 0 -> 403 bytes images/optionsbar/tag/canvas-tag.png | Bin 0 -> 1529 bytes images/optionsbar/tag/custom-tag.png | Bin 0 -> 738 bytes images/optionsbar/tag/div-tag.png | Bin 0 -> 637 bytes images/optionsbar/tag/img-tag.png | Bin 0 -> 715 bytes images/optionsbar/tag/vid-tag.png | Bin 0 -> 389 bytes images/optionsbar/zoom/zoom_minus.png | Bin 3102 -> 648 bytes images/optionsbar/zoom/zoom_plus.png | Bin 3103 -> 691 bytes images/tools/sprite-toolbar-tag.png | Bin 6403 -> 0 bytes .../tag-properties.reel/tag-properties.html | 12 +- .../zoom-properties.reel/zoom-properties.html | 6 +- scss/imports/scss/_Tools.scss | 138 +++++++-------------- 14 files changed, 70 insertions(+), 134 deletions(-) create mode 100644 images/optionsbar/pen/penMinus.png create mode 100644 images/optionsbar/pen/penPlus.png create mode 100644 images/optionsbar/tag/canvas-tag.png create mode 100644 images/optionsbar/tag/custom-tag.png create mode 100644 images/optionsbar/tag/div-tag.png create mode 100644 images/optionsbar/tag/img-tag.png create mode 100644 images/optionsbar/tag/vid-tag.png delete mode 100755 images/tools/sprite-toolbar-tag.png diff --git a/css/ninja.css b/css/ninja.css index 309c3ccd..34a29362 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -679,6 +679,14 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul .toolColorChipIcon { width: 20px; height: 20px; margin-top: 1px; -webkit-transform: scale(0.8); background-color: #282828; } +.subToolHolderPanel input.toolOptsRadioButton { background: none; width: 20px; height: 20px; display: block; 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; background-position: 1px 1px; } + +.subToolHolderPanel input.toolOptsRadioButton:active { border: 1px solid transparent; } + +.subToolHolderPanel input.toolOptsRadioButton:hover { opacity: 1.0; -webkit-box-shadow: 0px 0px 4px #fff; } + +.subToolHolderPanel input.toolOptsRadioButton:checked { background-color: #b2b2b2; opacity: 1.0; cursor: default; -webkit-box-shadow: none; background-repeat: no-repeat; background-position: 1px 1px; } + .textBox { padding-top: 3px; min-width: 10em; margin-left: 5px; position: relative; margin-top: 0px; } .selectBox { width: 10em; opacity: 0.9; margin-left: 10px; float: left; display: block; background-color: #666666; border: 1px solid black; color: white; outline: none; } @@ -743,35 +751,15 @@ 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: 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"); } - -.tagRadioButtons input.tag-type:active { border: 1px solid transparent; } - -.tagRadioButtons input.tag-type:hover { opacity: 1.0; -webkit-box-shadow: 0px 0px 4px #fff; } - -.tagRadioButtons input.tag-type:checked { background-color: transparent; opacity: 1.0; cursor: default; -webkit-box-shadow: none; } - -.tagRadioButtons input.divTool { margin-left: 8px; background-position: -40px 0px; } +.tagRadioButtons input.divTool { background-image: url("../images/optionsbar/tag/div-tag.png"); } -.tagRadioButtons input.divTool:checked { background-position: -40px -20px; } +.tagRadioButtons input.imageTool { background-image: url("../images/optionsbar/tag/img-tag.png"); } -.tagRadioButtons input.imageTool { background-position: -60px 0px; } +.tagRadioButtons input.videoTool { background-image: url("../images/optionsbar/tag/vid-tag.png"); } -.tagRadioButtons input.imageTool:checked { background-position: -60px -20px; } +.tagRadioButtons input.canvasTool { background-image: url("../images/optionsbar/tag/canvas-tag.png"); } -.tagRadioButtons input.videoTool { background-position: -100px 0px; } - -.tagRadioButtons input.videoTool:checked { background-position: -100px -20px; } - -.tagRadioButtons input.canvasTool { background-position: -20px 0px; } - -.tagRadioButtons input.canvasTool:checked { background-position: -20px -20px; } - -.tagRadioButtons input.customTool { background-position: 0px 0px; } - -.tagRadioButtons input.customTool:checked { background-position: 0px -20px; } +.tagRadioButtons input.customTool { background-image: url("../images/optionsbar/tag/custom-tag.png"); } .tagRadioButtons .nj-divider { height: 100%; float: left; position: relative; } @@ -779,15 +767,9 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1 .tagRadioButtons select[disabled="true"].nj-skinned, .tagRadioButtons select[disabled].nj-skinned { visibility: hidden; } -#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; } - -#zoomToolOptionHolder input#zoomInTool { border-style: solid; border-width: 1px; background-image: url("../images/optionsbar/zoom/zoom_plus.png"); background-repeat: no-repeat; background-position: 4px 3px; } - -#zoomToolOptionHolder input#zoomOutTool { border-style: solid; border-width: 1px; background-image: url("../images/optionsbar/zoom/zoom_minus.png"); background-repeat: no-repeat; background-position: 4px 3px; } +#zoomToolOptionHolder .zoomOutToolIcon { background-image: url("../images/optionsbar/zoom/zoom_minus.png"); } -#zoomToolOptionHolder input.zoom-option { background: none; } +#zoomToolOptionHolder .zoomInToolIcon { background-image: url("../images/optionsbar/zoom/zoom_plus.png"); } .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; } diff --git a/images/optionsbar/pen/penMinus.png b/images/optionsbar/pen/penMinus.png new file mode 100644 index 00000000..eac4a742 Binary files /dev/null and b/images/optionsbar/pen/penMinus.png differ diff --git a/images/optionsbar/pen/penPlus.png b/images/optionsbar/pen/penPlus.png new file mode 100644 index 00000000..e7dd565f Binary files /dev/null and b/images/optionsbar/pen/penPlus.png differ diff --git a/images/optionsbar/tag/canvas-tag.png b/images/optionsbar/tag/canvas-tag.png new file mode 100644 index 00000000..daf6036e Binary files /dev/null and b/images/optionsbar/tag/canvas-tag.png differ diff --git a/images/optionsbar/tag/custom-tag.png b/images/optionsbar/tag/custom-tag.png new file mode 100644 index 00000000..98c560ad Binary files /dev/null and b/images/optionsbar/tag/custom-tag.png differ diff --git a/images/optionsbar/tag/div-tag.png b/images/optionsbar/tag/div-tag.png new file mode 100644 index 00000000..2a2bac2e Binary files /dev/null and b/images/optionsbar/tag/div-tag.png differ diff --git a/images/optionsbar/tag/img-tag.png b/images/optionsbar/tag/img-tag.png new file mode 100644 index 00000000..7a1c6e79 Binary files /dev/null and b/images/optionsbar/tag/img-tag.png differ diff --git a/images/optionsbar/tag/vid-tag.png b/images/optionsbar/tag/vid-tag.png new file mode 100644 index 00000000..e72bac5a Binary files /dev/null and b/images/optionsbar/tag/vid-tag.png differ diff --git a/images/optionsbar/zoom/zoom_minus.png b/images/optionsbar/zoom/zoom_minus.png index 666cc85c..530c89d5 100755 Binary files a/images/optionsbar/zoom/zoom_minus.png and b/images/optionsbar/zoom/zoom_minus.png differ diff --git a/images/optionsbar/zoom/zoom_plus.png b/images/optionsbar/zoom/zoom_plus.png index 005dc969..de47235c 100755 Binary files a/images/optionsbar/zoom/zoom_plus.png and b/images/optionsbar/zoom/zoom_plus.png differ diff --git a/images/tools/sprite-toolbar-tag.png b/images/tools/sprite-toolbar-tag.png deleted file mode 100755 index 69b13ec3..00000000 Binary files a/images/tools/sprite-toolbar-tag.png and /dev/null differ 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 f92665a7..e9c15d22 100755 --- a/js/components/tools-properties/tag-properties.reel/tag-properties.html +++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html @@ -41,13 +41,13 @@
-
 
+
 
- - - - - + + + + +
 
diff --git a/js/components/tools-properties/zoom-properties.reel/zoom-properties.html b/js/components/tools-properties/zoom-properties.reel/zoom-properties.html index cf22b775..7a830f2a 100755 --- a/js/components/tools-properties/zoom-properties.reel/zoom-properties.html +++ b/js/components/tools-properties/zoom-properties.reel/zoom-properties.html @@ -27,9 +27,9 @@
-
- - +
+ +
diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index c2d2498a..1813fb14 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -31,11 +31,6 @@ float:left; } -// .toolOptionsFloatChildren select.nj-skinned { -// margin-top: 2px; -// } - - .toolOptionsSpacer { margin-right: 9px; } @@ -57,6 +52,45 @@ background-color: rgb(40, 40, 40); } +// generic styles for image radio button groups used in the tool options bar +.subToolHolderPanel input.toolOptsRadioButton { + background: none; + width: 20px; + height: 20px; + display: block; + 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; + background-position: 1px 1px; +} + +.subToolHolderPanel input.toolOptsRadioButton:active { + border: 1px solid transparent; +} + +.subToolHolderPanel input.toolOptsRadioButton:hover { + opacity: 1.0; + -webkit-box-shadow: 0px 0px 4px #fff; +} + +.subToolHolderPanel input.toolOptsRadioButton:checked { + background-color: $color-tool-bg-active; + opacity: 1.0; + cursor: default; + -webkit-box-shadow: none; + background-repeat: no-repeat; + background-position: 1px 1px; +} + + // Added new styling Sub Tool Shape Options .textBox { @@ -270,70 +304,20 @@ input[type="radio"]:disabled { } // Begin: styles for tag toolbar -.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"); -} -.tagRadioButtons input.tag-type:active { - border: 1px solid transparent; -} -.tagRadioButtons input.tag-type:hover { - opacity: 1.0; - -webkit-box-shadow: 0px 0px 4px #fff; -} -.tagRadioButtons input.tag-type:checked { - background-color: transparent; - opacity: 1.0; - cursor: default; - -webkit-box-shadow: none; -} .tagRadioButtons input.divTool { - margin-left: 8px; - background-position: -40px 0px; -} -.tagRadioButtons input.divTool:checked { - background-position: -40px -20px; + background-image: url("../images/optionsbar/tag/div-tag.png"); } .tagRadioButtons input.imageTool { - background-position: -60px 0px; -} -.tagRadioButtons input.imageTool:checked { - background-position: -60px -20px; + background-image: url("../images/optionsbar/tag/img-tag.png"); } .tagRadioButtons input.videoTool { - background-position: -100px 0px; -} -.tagRadioButtons input.videoTool:checked { - background-position: -100px -20px; + background-image: url("../images/optionsbar/tag/vid-tag.png"); } .tagRadioButtons input.canvasTool { - background-position: -20px 0px; -} -.tagRadioButtons input.canvasTool:checked { - background-position: -20px -20px; + background-image: url("../images/optionsbar/tag/canvas-tag.png"); } .tagRadioButtons input.customTool { - background-position: 0px 0px; -} -.tagRadioButtons input.customTool:checked { - background-position: 0px -20px; + background-image: url("../images/optionsbar/tag/custom-tag.png"); } .tagRadioButtons .nj-divider { @@ -354,42 +338,12 @@ input[type="radio"]:disabled { } // End: styles for tag toolbar -#zoomToolOptionHolder input#zoomInTool:checked{ - border-style:solid; - border-width:1px ; - border-color: $color-input; - 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: $color-input; +#zoomToolOptionHolder .zoomOutToolIcon { background-image:url("../images/optionsbar/zoom/zoom_minus.png"); - background-repeat: no-repeat; - background-position:4px 3px; } -#zoomToolOptionHolder input#zoomInTool{ - border-style:solid; - border-width:1px ; +#zoomToolOptionHolder .zoomInToolIcon { background-image:url("../images/optionsbar/zoom/zoom_plus.png"); - background-repeat: no-repeat; - background-position:4px 3px; -} - -#zoomToolOptionHolder input#zoomOutTool{ - border-style:solid; - border-width:1px ; - background-image:url("../images/optionsbar/zoom/zoom_minus.png"); - background-repeat: no-repeat; - background-position:4px 3px; - -} -#zoomToolOptionHolder input.zoom-option { - background:none; } // object 3D container styles -- cgit v1.2.3