From 8805307592c93e4ebe25913c5142f4ee49cb035c Mon Sep 17 00:00:00 2001 From: Jeff Schiller Date: Tue, 9 Feb 2010 06:44:12 +0000 Subject: [PATCH] Part of Issue 407: consistent styling of hover/pushed buttons git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1362 eee81c28-f429-11dd-99c0-75d572ba1ddd --- editor/svg-editor.css | 76 +++++++++++++++++------------------------- editor/svg-editor.html | 2 +- editor/svg-editor.js | 44 ++++++++++++++---------- 3 files changed, 57 insertions(+), 65 deletions(-) diff --git a/editor/svg-editor.css b/editor/svg-editor.css index 0d584919..da5dbfee 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -262,21 +262,26 @@ -webkit-border-radius: 8px; } -#svg_editor #main_icon:hover, -#svg_editor #main_icon.down { - border-left: 1px #fcd9ba solid; - border-top: 1px #fcd9ba solid; - border-right: 1px #e0a874 solid; - border-bottom: 1px #e0a874 solid; - background-color: #FFC; +#svg_editor .tool_button:hover, +#svg_editor .push_button:hover, +#svg_editor .buttonup:hover, +#svg_editor .buttondown, +#svg_editor .tool_button_current, +#svg_editor .push_button_pressed +{ + border-left: 1px #fcd9ba solid !important; + border-top: 1px #fcd9ba solid !important; + border-right: 1px #e0a874 solid !important; + border-bottom: 1px #e0a874 solid !important; + background-color: #FFC !important; } -#svg_editor #main_icon.down { - background-color: #f4e284; - border-top: 1px solid #630; - border-left: 1px solid #630; - top: -1px; - left: -1px; +#svg_editor .tool_button_current, +#svg_editor .push_button_pressed, +#svg_editor .buttondown { + background-color: #f4e284 !important; + border-top: 1px solid #630 !important; + border-left: 1px solid #630 !important; } #svg_editor #main_icon span { @@ -440,7 +445,8 @@ height: 15px; } -#svg_editor #tools_left .tool_button { +#svg_editor #tools_left .tool_button, +#svg_editor #tools_left .tool_button_current { position: relative; z-index: 11; } @@ -542,7 +548,9 @@ span.zoom_tool { #svg_editor .tool_button, #svg_editor .push_button, -#svg_editor .tool_button_current { +#svg_editor .tool_button_current, +#svg_editor .push_button_pressed +{ height: 24px; width: 24px; margin: 2px; @@ -553,6 +561,9 @@ span.zoom_tool { border-bottom: 1px solid #808080; background-color: #E8E8E8; cursor: pointer; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; } #svg_editor #main_menu li#tool_open { @@ -571,15 +582,6 @@ span.zoom_tool { cursor: pointer; /* Sadly doesn't appear to have an effect */ } -#svg_editor .tool_button_current, -#svg_editor .push_button_pressed { - border-left: 1px solid #808080; - border-top: 1px solid #808080; - border-right: 1px solid #FFFFFF; - border-bottom: 1px solid #FFFFFF; - background-color: #B0B0B0; -} - #svg_editor .disabled { opacity: 0.5; cursor: default; @@ -653,11 +655,6 @@ span.zoom_tool { width: 28px; } -#svg_editor .tool_button:hover, -#svg_editor .push_button:hover { - background-color: #FFF; -} - #svg_editor #tools_bottom { position: absolute; left: 40px; @@ -711,15 +708,6 @@ span.zoom_tool { z-index: 6; } -/* - top: 100px; - left: 80px; - right: 80px; - bottom: 100px; -*/ - - - #svg_docprops #svg_docprops_container { position: absolute; top: 50px; @@ -957,19 +945,15 @@ button#tool_docprops_cancel { border: 1px solid #000; } -/* Possibly not necessary */ +/* Necessary to keep the flyouts sized properly */ #svg_editor .tools_flyout .tool_button, #svg_editor .tools_flyout .tool_flyout { padding: 2px; width: 24px; height: 24px; margin: 0; + border-radius: 0px; + -moz-border-radius: 0px; + -webkit-border-radius: 0px; } -#svg_editor .tools_flyout .tool_button:hover { - border-left: 1px solid #808080; - border-top: 1px solid #808080; - border-right: 1px solid #FFFFFF; - border-bottom: 1px solid #FFFFFF; - background-color: #B0B0B0; -} \ No newline at end of file diff --git a/editor/svg-editor.html b/editor/svg-editor.html index 5161b72d..b5ae50e3 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -77,7 +77,7 @@ script type="text/javascript" src="locale/locale.min.js">
-
+
diff --git a/editor/svg-editor.js b/editor/svg-editor.js index e7c293cd..5c0cd4ba 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -135,7 +135,7 @@ function svg_edit_setup() { var setSelectMode = function() { $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); - $('#tool_select').addClass('tool_button_current'); + $('#tool_select').addClass('tool_button_current').removeClass('tool_button'); $('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}'); svgCanvas.setMode('select'); }; @@ -146,8 +146,8 @@ function svg_edit_setup() { var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width'); if(editmode) { // Change select icon - $('.tool_button').removeClass('tool_button_current'); - $('#tool_select').addClass('tool_button_current') + $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); + $('#tool_select').addClass('tool_button_current').removeClass('tool_button') .empty().append($.getSvgIcon('select_node')); multiselected = false; if(elems.length) { @@ -782,16 +782,16 @@ function svg_edit_setup() { if(el_name == 'text') { $('#text_panel').css("display", "inline"); if (svgCanvas.getItalic()) { - $('#tool_italic').addClass('tool_button_current'); + $('#tool_italic').addClass('push_button_pressed').removeClass('tool_button'); } else { - $('#tool_italic').removeClass('tool_button_current'); + $('#tool_italic').removeClass('push_button_pressed').addClass('tool_button'); } if (svgCanvas.getBold()) { - $('#tool_bold').addClass('tool_button_current'); + $('#tool_bold').addClass('push_button_pressed').removeClass('tool_button'); } else { - $('#tool_bold').removeClass('tool_button_current'); + $('#tool_bold').removeClass('push_button_pressed').addClass('tool_button'); } $('#font_family').val(elem.getAttribute("font-family")); $('#font_size').val(elem.getAttribute("font-size")); @@ -1059,7 +1059,7 @@ function svg_edit_setup() { $('.tools_flyout').fadeOut(fadeFlyouts); $('#styleoverrides').text(''); $('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); - $(button).addClass('tool_button_current'); + $(button).addClass('tool_button_current').removeClass('tool_button'); // when a tool is selected, we should deselect any currently selected elements svgCanvas.clearSelection(); return true; @@ -1080,7 +1080,7 @@ function svg_edit_setup() { $(window).mouseup(function(evt) { if(!on_button) { - button.removeClass('down'); + button.removeClass('buttondown'); // do not hide if it was the file input as that input needs to be visible // for its change event to fire if (evt.target.localName != "input") { @@ -1098,8 +1098,8 @@ function svg_edit_setup() { }); overlay.bind('mousedown',function() { - if (!button.hasClass('down')) { - button.addClass('down'); + if (!button.hasClass('buttondown')) { + button.addClass('buttondown').removeClass('buttonup') // Margin must be reset in case it was changed before; list.css('margin-left',0).show(); if(!height) { @@ -1112,7 +1112,7 @@ function svg_edit_setup() { on_button = true; return false; } else { - button.removeClass('down'); + button.removeClass('buttondown').addClass('buttonup'); list.fadeOut(200); } }).hover(function() { @@ -1345,8 +1345,12 @@ function svg_edit_setup() { }; var linkControlPoints = function() { - $('#tool_node_link').toggleClass('push_button_pressed'); - var linked = $('#tool_node_link').hasClass('push_button_pressed'); + var linked = !$('#tool_node_link').hasClass('push_button_pressed'); + if (linked) + $('#tool_node_link').addClass('push_button_pressed').removeClass('tool_button'); + else + $('#tool_node_link').removeClass('push_button_pressed').addClass('tool_button'); + path.linkControlPoints(linked); } @@ -1469,7 +1473,11 @@ function svg_edit_setup() { } var clickWireframe = function() { - $('#tool_wireframe').toggleClass('push_button_pressed'); + var wf = !$('#tool_wireframe').hasClass('push_button_pressed'); + if (wf) + $('#tool_wireframe').addClass('push_button_pressed').removeClass('tool_button'); + else + $('#tool_wireframe').removeClass('push_button_pressed').addClass('tool_button'); workarea.toggleClass('wireframe'); if(supportsNonSS) return; @@ -2050,12 +2058,12 @@ function svg_edit_setup() { $('.push_button').mousedown(function() { if (!$(this).hasClass('disabled')) { - $(this).addClass('push_button_pressed'); + $(this).addClass('push_button_pressed').removeClass('push_button'); } }).mouseout(function() { - $(this).removeClass('push_button_pressed'); + $(this).removeClass('push_button_pressed').addClass('push_button'); }).mouseup(function() { - $(this).removeClass('push_button_pressed'); + $(this).removeClass('push_button_pressed').addClass('push_button'); }); $('#layer_new').click(function() {