From 29ad6355ef60cfb3b3fc7f780504f3ed30845883 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Mon, 7 May 2012 14:30:47 -0700 Subject: More implementation of moving color chips to the individual subtools. Removed the tool color bar Added new icons for inkbottle Removed Pencil tool Removed Inkbottle tool Added chips to the pen, brush and tag tools Aligned controls in several subtools --- scss/imports/scss/_toolbar.scss | 53 ----------------------------------------- 1 file changed, 53 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss index 9bf540cd..f47d0664 100755 --- a/scss/imports/scss/_toolbar.scss +++ b/scss/imports/scss/_toolbar.scss @@ -112,10 +112,6 @@ background-image:url("../images/tools/Tool-Fill.png"); } -.EyedropperTool { - background-image:url("../images/tools/Tool-EyeDropper.png"); -} - .EraserTool { background-image:url("../images/tools/Tool-Erase.png"); } @@ -140,52 +136,6 @@ background-image:url("../images/tools/Tool-FillColor.png"); } -.toolsList .colortoolbar { - padding-left: 1px; - padding-top:4px; -} - -.toolsList .colortoolbar button -{ - width: 27px; - height: 27px; - background: black; - border: 1px solid #000; - padding: 0; - margin: 0px; -} - -.toolsList .colortoolbar div -{ - width: 27px; - height: 27px; - margin: 0; - margin-top:3px; -} - -.toolsList .colortoolbar div.cpe_colortoolbar_container -{ - margin: 0; -} - - - -/*.InkBottleToolPressed {*/ - /*background-image: url("../images/tools/inkbottle_down.png");*/ - /*background-repeat: no-repeat;*/ - /*height: 23px;*/ - /*width: 26px;*/ - /*opacity: 1;*/ -/*}*/ - -/*.InkBottleToolUnpressed {*/ - /*background-image: url("../images/tools/inkbottle_down.png");*/ - /*background-repeat: no-repeat;*/ - /*height: 23px;*/ - /*width: 26px;*/ - /*opacity: 0.7;*/ -/*}*/ - // Selection Tool Options .topAlignUp { @@ -251,6 +201,3 @@ @include background-pos(11,0,26px,23px); } -.pencilToolUp { - @include background-pos(9,1,26px,23px); -} -- cgit v1.2.3 From 33bb9b7e97e9ec3bd664b3e1c3e7297ba8d07ede Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Mon, 7 May 2012 15:44:18 -0700 Subject: more work on making subtool styling/layout consistent --- scss/imports/scss/_Tools.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index 55c37d02..00655241 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -25,10 +25,13 @@ .subOption{ float:left; - // margin:10px; - margin-top: 5px; - margin-left: 10px; - margin-right: 10px; + margin-top: 0px; + margin-left: 1px; + margin-right: 0px; +} + +.subOptionSpacer{ + margin-right: 16px; } .toolSeparator { -- cgit v1.2.3 From dd663d8fe9191cc57c9cebe6d425562cb45982c2 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 8 May 2012 07:25:09 -0700 Subject: Removed unused SubSelect Tool --- scss/imports/scss/_toolbar.scss | 4 ---- 1 file changed, 4 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss index 11a69a79..a0e4f282 100755 --- a/scss/imports/scss/_toolbar.scss +++ b/scss/imports/scss/_toolbar.scss @@ -61,10 +61,6 @@ background-image:url("../images/tools/Tool-Selection.png"); } -.SubselectionTool { - background-image:url("../images/tools/Tool-Subselect.png"); -} - .RotateTool3D { background-image:url("../images/tools/Tool-3DRotate.png"); } -- cgit v1.2.3 From 7dedf0735eec1d227b21291e1bb43dcdec93cbf3 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 8 May 2012 09:55:02 -0700 Subject: -Removed id dependence of the tag tool options CSS -Separated the options3d CSS from the tag tool options css -Removed unused translateObjectToolContainer CSS class --- scss/imports/scss/_Tools.scss | 117 ++++++++++++++++++++++++------------------ 1 file changed, 67 insertions(+), 50 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index 00655241..fd75e189 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -288,9 +288,7 @@ input[type="radio"]:disabled { } // Begin: styles for tag toolbar -#tagToolContainer input.tag-type, -#rotateObjectToolContainer input.tag-type, -#translateObjectToolContainer input.tag-type { +.tagRadioButtons input.tag-type { background: none; width: 20px; height: 20px; @@ -308,95 +306,67 @@ input[type="radio"]:disabled { -webkit-user-select: none; border: 1px solid transparent; } -#tagToolContainer input.tag-type { +.tagRadioButtons input.tag-type { background-image: url("../images/tools/sprite-toolbar-tag.png"); } -#rotateObjectToolContainer input.tag-type { - background-image: url("../images/tools/sprite-toolbar-3d.png"); -} -#translateObjectToolContainer input.tag-type { - background-image: url("../images/tools/sprite-toolbar-3d.png"); -} - -#tagToolContainer input.tag-type:active, -#rotateObjectToolContainer input.tag-type:active, -#translateObjectToolContainer input.tag-type:active { +.tagRadioButtons input.tag-type:active { border: 1px solid transparent; } -#tagToolContainer input.tag-type:hover, -#rotateObjectToolContainer input.tag-type:hover, -#translateObjectToolContainer input.tag-type:hover { +.tagRadioButtons input.tag-type:hover { opacity: 1.0; -webkit-box-shadow: 0px 0px 4px #fff; } -#tagToolContainer input.tag-type:checked, -#rotateObjectToolContainer input.tag-type:checked, -#translateObjectToolContainer input.tag-type:checked { +.tagRadioButtons input.tag-type:checked { background-color: transparent; opacity: 1.0; cursor: default; -webkit-box-shadow: none; } -#tagToolContainer input#divTool { +.tagRadioButtons input.divTool { background-position: -40px 0px; } -#tagToolContainer input#divTool:checked { +.tagRadioButtons input.divTool:checked { background-position: -40px -20px; } -#tagToolContainer input#imageTool { +.tagRadioButtons input.imageTool { background-position: -60px 0px; } -#tagToolContainer input#imageTool:checked { +.tagRadioButtons input.imageTool:checked { background-position: -60px -20px; } -#tagToolContainer input#videoTool { +.tagRadioButtons input.videoTool { background-position: -100px 0px; } -#tagToolContainer input#videoTool:checked { +.tagRadioButtons input.videoTool:checked { background-position: -100px -20px; } -#tagToolContainer input#canvasTool, -#rotateObjectToolContainer input#rotateLocally, -#translateObjectToolContainer input#translateLocally { +.tagRadioButtons input.canvasTool { background-position: -20px 0px; } -#tagToolContainer input#canvasTool:checked, -#rotateObjectToolContainer input#rotateLocally:checked, -#translateObjectToolContainer input#translateLocally:checked { +.tagRadioButtons input.canvasTool:checked { background-position: -20px -20px; } -#tagToolContainer input#flashTool { - background-position: -80px 0px; -} -#tagToolContainer input#flashTool:checked { - background-position: -80px -20px; -} -#tagToolContainer input#customTool, -#rotateObjectToolContainer input#rotateGlobally, -#translateObjectToolContainer input#translateGlobally { +.tagRadioButtons input.customTool { background-position: 0px 0px; } -#tagToolContainer input#customTool:checked, -#rotateObjectToolContainer input#rotateGlobally:checked, -#translateObjectToolContainer input#translateGlobally:checked { +.tagRadioButtons input.customTool:checked { background-position: 0px -20px; } - -#tagToolContainer .nj-divider { +.tagRadioButtons .nj-divider { height: 100%; float: left; position: relative; top: 5px; } -#tagToolContainer select.nj-skinned { +.tagRadioButtons select.nj-skinned { visibility: visible; position: relative; } -#tagToolContainer select[disabled="true"].nj-skinned, -#tagToolContainer select[disabled].nj-skinned { +.tagRadioButtons select[disabled="true"].nj-skinned, +.tagRadioButtons select[disabled].nj-skinned { visibility: hidden; } @@ -442,5 +412,52 @@ input[type="radio"]:disabled { background:none; } +// End: styles for tag toolbar -// Endi: styles for tag toolbar \ No newline at end of file +// object 3D container styles +.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-image: url("../images/tools/sprite-toolbar-3d.png"); +} +.object3DToolContainer input.tag-type:active { + border: 1px solid transparent; +} +.object3DToolContainer input.tag-type:hover { + opacity: 1.0; + -webkit-box-shadow: 0px 0px 4px #fff; +} +.object3DToolContainer input.tag-type:checked { + background-color: transparent; + opacity: 1.0; + cursor: default; + -webkit-box-shadow: none; +} +.object3DToolContainer input.rotateLocally { + background-position: -20px 0px; +} +.object3DToolContainer input.rotateLocally:checked { + background-position: -20px -20px; +} +.object3DToolContainer input.rotateGlobally { + background-position: 0px 0px; +} +.object3DToolContainer input.rotateGlobally:checked { + background-position: 0px -20px; +} -- cgit v1.2.3 From e973618155eeca6b3608c9d303669e20baeaf0ff Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 8 May 2012 10:08:30 -0700 Subject: moved all tag tool css back into the scss file added extra padding before first input control --- scss/imports/scss/_Tools.scss | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index fd75e189..9f0489b4 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -323,6 +323,7 @@ input[type="radio"]:disabled { -webkit-box-shadow: none; } .tagRadioButtons input.divTool { + margin-left: 8px; background-position: -40px 0px; } .tagRadioButtons input.divTool:checked { @@ -370,6 +371,24 @@ input[type="radio"]:disabled { 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{ border-style:solid; border-width:1px ; @@ -377,7 +396,6 @@ input[type="radio"]:disabled { background-image:url("../images/optionsbar/zoom/zoom_plus.png"); background-repeat: no-repeat; background-position:4px 3px; - } #zoomToolOptionHolder input#zoomOutTool:checked{ @@ -387,8 +405,6 @@ input[type="radio"]:disabled { background-image:url("../images/optionsbar/zoom/zoom_minus.png"); background-repeat: no-repeat; background-position:4px 3px; - - } #zoomToolOptionHolder input#zoomInTool{ @@ -397,7 +413,6 @@ input[type="radio"]:disabled { background-image:url("../images/optionsbar/zoom/zoom_plus.png"); background-repeat: no-repeat; background-position:4px 3px; - } #zoomToolOptionHolder input#zoomOutTool{ @@ -410,9 +425,7 @@ input[type="radio"]:disabled { } #zoomToolOptionHolder input.zoom-option { background:none; - } -// End: styles for tag toolbar // object 3D container styles .object3DToolContainer input.tag-type { -- cgit v1.2.3 From f817f86b8fca14eba6259e40d011c5ad3b854d48 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 8 May 2012 14:47:15 -0700 Subject: Moved out old select tool image css classes into the proper css file. --- scss/imports/scss/_Tools.scss | 69 +++++++++++++++++++++++++++++++++++++++++ scss/imports/scss/_toolbar.scss | 65 -------------------------------------- 2 files changed, 69 insertions(+), 65 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index 9f0489b4..ab71e374 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -474,3 +474,72 @@ input[type="radio"]:disabled { .object3DToolContainer input.rotateGlobally:checked { background-position: 0px -20px; } + +// Selection Tool Options +.optionsSelectionTool { + padding: 6px; +} + + .optionsSelectionTool > * { + float:left; +} + +.topAlignUp { + + @include background-pos(8,2,26px,23px); +} + +.rightAlignUp { + + @include background-pos(9,2,26px,23px); +} + +.bottomAlignUp { + + @include background-pos(10,2,26px,23px); +} + +.verticalLeftUp { + + @include background-pos(11,2,26px,23px); +} + +.verticalCenterUp { + + @include background-pos(12,2,26px,23px); +} + +.verticalRightUp { + + @include background-pos(13,2,26px,23px); +} + +.distRightUp { + + @include background-pos(0,3,26px,23px); +} + +.distLeftUp { + + @include background-pos(14,2,26px,23px); +} + +.distCenterUp { + + @include background-pos(2,3,26px,23px); +} + +.distTopUp { + + @include background-pos(1,3,26px,23px); +} + +.distBottomUp { + + @include background-pos(3,3,26px,23px); +} + +.distVCenterUp { + + @include background-pos(15,2,26px,23px); +} \ No newline at end of file diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss index a0e4f282..d2e2f766 100755 --- a/scss/imports/scss/_toolbar.scss +++ b/scss/imports/scss/_toolbar.scss @@ -133,68 +133,3 @@ background-image:url("../images/tools/Tool-FillColor.png"); } -// Selection Tool Options -.topAlignUp { - - @include background-pos(8,2,26px,23px); -} - -.rightAlignUp { - - @include background-pos(9,2,26px,23px); -} - -.bottomAlignUp { - - @include background-pos(10,2,26px,23px); -} - -.verticalLeftUp { - - @include background-pos(11,2,26px,23px); -} - -.verticalCenterUp { - - @include background-pos(12,2,26px,23px); -} - -.verticalRightUp { - - @include background-pos(13,2,26px,23px); -} - -.distRightUp { - - @include background-pos(0,3,26px,23px); -} - -.distLeftUp { - - @include background-pos(14,2,26px,23px); -} - -.distCenterUp { - - @include background-pos(2,3,26px,23px); -} - -.distTopUp { - - @include background-pos(1,3,26px,23px); -} - -.distBottomUp { - - @include background-pos(3,3,26px,23px); -} - -.distVCenterUp { - - @include background-pos(15,2,26px,23px); -} - -.bucketToolUp { - @include background-pos(11,0,26px,23px); -} - -- cgit v1.2.3 From 0088f8e5f3a0be4b6e5e497afbe34de11211493c Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Wed, 9 May 2012 11:36:13 -0700 Subject: -Put new selection tool icons in the options bar -Styled the selection tool options bar --- scss/imports/scss/_Tools.scss | 87 +++++++++++++++++++++++-------------------- 1 file changed, 47 insertions(+), 40 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index ab71e374..57519043 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -23,15 +23,8 @@ -webkit-transform: scale(0.75); } -.subOption{ - float:left; - margin-top: 0px; - margin-left: 1px; - margin-right: 0px; -} - -.subOptionSpacer{ - margin-right: 16px; +.toolOptionsSpacer{ + margin-right: 9px; } .toolSeparator { @@ -484,62 +477,76 @@ input[type="radio"]:disabled { float:left; } -.topAlignUp { - - @include background-pos(8,2,26px,23px); +.optionsSelectionTool button { + padding-top: 0px; } -.rightAlignUp { - - @include background-pos(9,2,26px,23px); +.selectionToolIcon { + width: 16px; + height: 16px; + background-repeat:no-repeat; + background-position: 1px 2px; } - -.bottomAlignUp { - - @include background-pos(10,2,26px,23px); +.alignTopIcon { + background-image: url("../images/tools/AlignTop.png"); } -.verticalLeftUp { - - @include background-pos(11,2,26px,23px); +.alignMiddleIcon { + background-image: url("../images/tools/AlignMiddle.png"); } -.verticalCenterUp { - - @include background-pos(12,2,26px,23px); +.alignBottomIcon { + background-image: url("../images/tools/AlignBottom.png"); } -.verticalRightUp { - - @include background-pos(13,2,26px,23px); +.alignLeftIcon { + background-image: url("../images/tools/AlignLeft.png"); } -.distRightUp { +.alignCenterIcon { + background-image: url("../images/tools/AlignCenter.png"); +} - @include background-pos(0,3,26px,23px); +.alignRightIcon { + background-image: url("../images/tools/AlignRight.png"); } -.distLeftUp { +.arrangeBringForwardIcon { + background-image: url("../images/tools/ArrangeBringForward.png"); +} - @include background-pos(14,2,26px,23px); +.arrangeSendBackwardIcon { + background-image: url("../images/tools/ArrangeSendBackward.png"); } -.distCenterUp { +.arrangeBringToFrontIcon { + background-image: url("../images/tools/ArrangeBringToFront.png"); +} - @include background-pos(2,3,26px,23px); +.arrangeSendToBackIcon { + background-image: url("../images/tools/ArrangeSendToBack.png"); } -.distTopUp { +.distTopIcon { + background-image: url("../images/tools/DistTop.png"); +} - @include background-pos(1,3,26px,23px); +.distMiddleIcon { + background-image: url("../images/tools/DistMiddle.png"); } -.distBottomUp { +.distBottomIcon { + background-image: url("../images/tools/DistBottom.png"); +} - @include background-pos(3,3,26px,23px); +.distLeftIcon { + background-image: url("../images/tools/DistLeft.png"); } -.distVCenterUp { +.distCenterIcon { + background-image: url("../images/tools/DistCenter.png"); +} - @include background-pos(15,2,26px,23px); +.distRightIcon { + background-image: url("../images/tools/DistRight.png"); } \ No newline at end of file -- cgit v1.2.3 From 7dd942b6e19d2d7a779bc50e7bf4c8f8780b8f3a Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Wed, 9 May 2012 14:19:14 -0700 Subject: Correct layout and styling for the shape tool and its sub tools --- scss/imports/scss/_Tools.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index 57519043..637828a4 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -17,6 +17,7 @@ .subToolHolderPanel .toolbutton { float:left; -webkit-transform: scale(0.6); + margin-top: -4px; } .subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { @@ -27,6 +28,7 @@ margin-right: 9px; } +/* These appear to be unused .toolSeparator { height:1px; width:30px; @@ -61,10 +63,10 @@ opacity: 1.0; } - .drawingMode { outline:blue solid thin; } +*/ // Added new styling Sub Tool Shape Options -- cgit v1.2.3 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 --- scss/imports/scss/_PanelUI.scss | 13 ----- scss/imports/scss/_Tools.scss | 110 +++++++++++++--------------------------- 2 files changed, 36 insertions(+), 87 deletions(-) (limited to 'scss/imports') 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 From 3be15e2076f2d3d46862bbc0ea078b9bf2e161fe Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Thu, 10 May 2012 11:17:42 -0700 Subject: -moved sel tool images to proper folder -finished styling shape tool options -added new icons for shape tool --- scss/imports/scss/_Tools.scss | 56 +++++++++++++++++++++---------------------- 1 file changed, 28 insertions(+), 28 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index 24846138..c2d2498a 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -114,28 +114,28 @@ opacity:1; } -.cornerRadius.topLeft -{ +.cornerRadius.topLeft { -webkit-transform: rotate(0deg); + margin-top: 1px; + margin-right: 3px; } -.cornerRadius.topRight -{ +.cornerRadius.topRight { -webkit-transform: rotate(90deg); -// margin-right : -2px; + margin-right: 3px; + margin-top: 1px; } -.cornerRadius.bottomLeft -{ -// margin-top: 3px; +.cornerRadius.bottomLeft { -webkit-transform: rotate(270deg); + margin-right: 2px; + margin-top: -1px; } -.cornerRadius.bottomRight -{ -// margin-top: 3px; +.cornerRadius.bottomRight { -webkit-transform: rotate(180deg); -// margin-right : -2px; + margin-right: 4px; + margin-top: -1px; } #toolOptionsContainer @@ -451,66 +451,66 @@ input[type="radio"]:disabled { } .alignTopIcon { - background-image: url("../images/tools/AlignTop.png"); + background-image: url("../images/optionsbar/selection/AlignTop.png"); } .alignMiddleIcon { - background-image: url("../images/tools/AlignMiddle.png"); + background-image: url("../images/optionsbar/selection/AlignMiddle.png"); } .alignBottomIcon { - background-image: url("../images/tools/AlignBottom.png"); + background-image: url("../images/optionsbar/selection/AlignBottom.png"); } .alignLeftIcon { - background-image: url("../images/tools/AlignLeft.png"); + background-image: url("../images/optionsbar/selection/AlignLeft.png"); } .alignCenterIcon { - background-image: url("../images/tools/AlignCenter.png"); + background-image: url("../images/optionsbar/selection/AlignCenter.png"); } .alignRightIcon { - background-image: url("../images/tools/AlignRight.png"); + background-image: url("../images/optionsbar/selection/AlignRight.png"); } .arrangeBringForwardIcon { - background-image: url("../images/tools/ArrangeBringForward.png"); + background-image: url("../images/optionsbar/selection/ArrangeBringForward.png"); } .arrangeSendBackwardIcon { - background-image: url("../images/tools/ArrangeSendBackward.png"); + background-image: url("../images/optionsbar/selection/ArrangeSendBackward.png"); } .arrangeBringToFrontIcon { - background-image: url("../images/tools/ArrangeBringToFront.png"); + background-image: url("../images/optionsbar/selection/ArrangeBringToFront.png"); } .arrangeSendToBackIcon { - background-image: url("../images/tools/ArrangeSendToBack.png"); + background-image: url("../images/optionsbar/selection/ArrangeSendToBack.png"); } .distTopIcon { - background-image: url("../images/tools/DistTop.png"); + background-image: url("../images/optionsbar/selection/DistTop.png"); } .distMiddleIcon { - background-image: url("../images/tools/DistMiddle.png"); + background-image: url("../images/optionsbar/selection/DistMiddle.png"); } .distBottomIcon { - background-image: url("../images/tools/DistBottom.png"); + background-image: url("../images/optionsbar/selection/DistBottom.png"); } .distLeftIcon { - background-image: url("../images/tools/DistLeft.png"); + background-image: url("../images/optionsbar/selection/DistLeft.png"); } .distCenterIcon { - background-image: url("../images/tools/DistCenter.png"); + background-image: url("../images/optionsbar/selection/DistCenter.png"); } .distRightIcon { - background-image: url("../images/tools/DistRight.png"); + background-image: url("../images/optionsbar/selection/DistRight.png"); } -- cgit v1.2.3 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 --- scss/imports/scss/_Tools.scss | 138 ++++++++++++++---------------------------- 1 file changed, 46 insertions(+), 92 deletions(-) (limited to 'scss/imports') 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 From 52f63541065ce94fab8766b1b0db057eafcfccaa Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Mon, 14 May 2012 14:57:07 -0700 Subject: -changed tool options radio button class to match the styling of the shape options tool buttons -fixed bug injected in the tag tool caused by accidental removal of the value element attribute -moved color chip in the tag tool to the right of the element radio button group --- scss/imports/scss/_Tools.scss | 38 ++++++++++++++------------------------ scss/imports/scss/_toolbar.scss | 2 +- 2 files changed, 15 insertions(+), 25 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index 1813fb14..a4deb488 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -54,43 +54,33 @@ // 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; + width: 24px; + height: 24px; + margin: 0px 5px 0px 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; + border-radius: 3px; -webkit-user-select: none; border: 1px solid transparent; - background-position: 1px 1px; -} - -.subToolHolderPanel input.toolOptsRadioButton:active { - border: 1px solid transparent; + background: none; + background-repeat: no-repeat; + background-position: center center; + -webkit-transform: scale(0.9); } .subToolHolderPanel input.toolOptsRadioButton:hover { - opacity: 1.0; - -webkit-box-shadow: 0px 0px 4px #fff; + box-shadow: 0px 0px 2px 2px #999; + -webkit-transform: scale(1); } .subToolHolderPanel input.toolOptsRadioButton:checked { - background-color: $color-tool-bg-active; - opacity: 1.0; - cursor: default; - -webkit-box-shadow: none; + box-shadow: inset 0px 0px 2px 2px #999; + background-color:#363636; + background-position: center center; background-repeat: no-repeat; - background-position: 1px 1px; + -webkit-transform: scale(1); } - // Added new styling Sub Tool Shape Options .textBox { diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss index d2e2f766..9440fa85 100755 --- a/scss/imports/scss/_toolbar.scss +++ b/scss/imports/scss/_toolbar.scss @@ -53,7 +53,7 @@ } .toolbutton.active { - box-shadow: inset 0px 0px 2px 2px #555; + box-shadow: inset 0px 0px 2px 2px #999; background-color:#363636; } -- cgit v1.2.3 From 035c851a955952d0a1c89a7c8a646b674ab3f4f2 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 15 May 2012 10:42:41 -0700 Subject: -fixed spacing problem in the tag tool -implemented the new mode radio buttons for the pen tool --- scss/imports/scss/_Tools.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'scss/imports') diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index a4deb488..d068fd2e 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -458,3 +458,17 @@ input[type="radio"]:disabled { background-image: url("../images/optionsbar/selection/DistRight.png"); } +.optionsPenTool { +} + +.optionsPenTool input.penToolIcon { + background-image:url("../images/tools/Tool-Pen.png"); +} + +.optionsPenTool input.penPlusToolIcon { + background-image:url("../images/optionsbar/pen/penPlus.png"); +} + +.optionsPenTool input.penMinusToolIcon { + background-image:url("../images/optionsbar/pen/penMinus.png"); +} -- cgit v1.2.3 From 9539e778dd678cec90cf83528df69a189be3a192 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 15 May 2012 15:24:13 -0700 Subject: updated object 3D options bar to use the new radio styles removed its use of the sprite sheet --- scss/imports/scss/_Tools.scss | 42 ++---------------------------------------- 1 file changed, 2 insertions(+), 40 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index d068fd2e..c63e695d 100755 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -337,49 +337,11 @@ input[type="radio"]:disabled { } // object 3D container styles -.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"); -} -.object3DToolContainer input.tag-type:active { - border: 1px solid transparent; -} -.object3DToolContainer input.tag-type:hover { - opacity: 1.0; - -webkit-box-shadow: 0px 0px 4px #fff; -} -.object3DToolContainer input.tag-type:checked { - background-color: transparent; - opacity: 1.0; - cursor: default; - -webkit-box-shadow: none; -} .object3DToolContainer input.rotateLocally { - background-position: -20px 0px; -} -.object3DToolContainer input.rotateLocally:checked { - background-position: -20px -20px; + background-image: url("../images/optionsbar/options3D/rotate-locally.png"); } .object3DToolContainer input.rotateGlobally { - background-position: 0px 0px; -} -.object3DToolContainer input.rotateGlobally:checked { - background-position: 0px -20px; + background-image: url("../images/optionsbar/options3D/rotate-globally.png"); } // Selection Tool Options Styles -- cgit v1.2.3