github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Part of Issue 407: consistent styling of hover/pushed buttons

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1362 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Jeff Schiller
2010-02-09 06:44:12 +00:00
parent c032cfb370
commit 8805307592
3 changed files with 57 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
editor/svg-editor.css
View File

@@ -262,21 +262,26 @@
-webkit-border-radius: 8px; -webkit-border-radius: 8px;
} }
#svg_editor #main_icon:hover, #svg_editor .tool_button:hover,
#svg_editor #main_icon.down { #svg_editor .push_button:hover,
border-left: 1px #fcd9ba solid; #svg_editor .buttonup:hover,
border-top: 1px #fcd9ba solid; #svg_editor .buttondown,
border-right: 1px #e0a874 solid; #svg_editor .tool_button_current,
border-bottom: 1px #e0a874 solid; #svg_editor .push_button_pressed
background-color: #FFC; {
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 { #svg_editor .tool_button_current,
background-color: #f4e284; #svg_editor .push_button_pressed,
border-top: 1px solid #630; #svg_editor .buttondown {
border-left: 1px solid #630; background-color: #f4e284 !important;
top: -1px; border-top: 1px solid #630 !important;
left: -1px; border-left: 1px solid #630 !important;
} }
#svg_editor #main_icon span { #svg_editor #main_icon span {
@@ -440,7 +445,8 @@
height: 15px; height: 15px;
} }
#svg_editor #tools_left .tool_button { #svg_editor #tools_left .tool_button,
#svg_editor #tools_left .tool_button_current {
position: relative; position: relative;
z-index: 11; z-index: 11;
} }
@@ -542,7 +548,9 @@ span.zoom_tool {
#svg_editor .tool_button, #svg_editor .tool_button,
#svg_editor .push_button, #svg_editor .push_button,
#svg_editor .tool_button_current { #svg_editor .tool_button_current,
#svg_editor .push_button_pressed
{
height: 24px; height: 24px;
width: 24px; width: 24px;
margin: 2px; margin: 2px;
@@ -553,6 +561,9 @@ span.zoom_tool {
border-bottom: 1px solid #808080; border-bottom: 1px solid #808080;
background-color: #E8E8E8; background-color: #E8E8E8;
cursor: pointer; cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} }
#svg_editor #main_menu li#tool_open { #svg_editor #main_menu li#tool_open {
@@ -571,15 +582,6 @@ span.zoom_tool {
cursor: pointer; /* Sadly doesn't appear to have an effect */ 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 { #svg_editor .disabled {
opacity: 0.5; opacity: 0.5;
cursor: default; cursor: default;
@@ -653,11 +655,6 @@ span.zoom_tool {
width: 28px; width: 28px;
} }
#svg_editor .tool_button:hover,
#svg_editor .push_button:hover {
background-color: #FFF;
}
#svg_editor #tools_bottom { #svg_editor #tools_bottom {
position: absolute; position: absolute;
left: 40px; left: 40px;
@@ -711,15 +708,6 @@ span.zoom_tool {
z-index: 6; z-index: 6;
} }
/*
top: 100px;
left: 80px;
right: 80px;
bottom: 100px;
*/
#svg_docprops #svg_docprops_container { #svg_docprops #svg_docprops_container {
position: absolute; position: absolute;
top: 50px; top: 50px;
@@ -957,19 +945,15 @@ button#tool_docprops_cancel {
border: 1px solid #000; 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_button,
#svg_editor .tools_flyout .tool_flyout { #svg_editor .tools_flyout .tool_flyout {
padding: 2px; padding: 2px;
width: 24px; width: 24px;
height: 24px; height: 24px;
margin: 0; 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;
}

2
editor/svg-editor.html
View File

@@ -77,7 +77,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
</div> </div>
<div id="main_button"> <div id="main_button">
<div id="main_icon" title="Main Menu"> <div id="main_icon" class="buttonup" title="Main Menu">
<span></span> <span></span>
<div id="logo"></div> <div id="logo"></div>
<div class="dropdown"></div> <div class="dropdown"></div>

44
editor/svg-editor.js
View File

@@ -135,7 +135,7 @@ function svg_edit_setup() {
var setSelectMode = function() { var setSelectMode = function() {
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); $('.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}'); $('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}');
svgCanvas.setMode('select'); svgCanvas.setMode('select');
}; };
@@ -146,8 +146,8 @@ function svg_edit_setup() {
var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width'); var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width');
if(editmode) { if(editmode) {
// Change select icon // Change select icon
$('.tool_button').removeClass('tool_button_current'); $('.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')
.empty().append($.getSvgIcon('select_node')); .empty().append($.getSvgIcon('select_node'));
multiselected = false; multiselected = false;
if(elems.length) { if(elems.length) {
@@ -782,16 +782,16 @@ function svg_edit_setup() {
if(el_name == 'text') { if(el_name == 'text') {
$('#text_panel').css("display", "inline"); $('#text_panel').css("display", "inline");
if (svgCanvas.getItalic()) { if (svgCanvas.getItalic()) {
$('#tool_italic').addClass('tool_button_current'); $('#tool_italic').addClass('push_button_pressed').removeClass('tool_button');
} }
else { else {
$('#tool_italic').removeClass('tool_button_current'); $('#tool_italic').removeClass('push_button_pressed').addClass('tool_button');
} }
if (svgCanvas.getBold()) { if (svgCanvas.getBold()) {
$('#tool_bold').addClass('tool_button_current'); $('#tool_bold').addClass('push_button_pressed').removeClass('tool_button');
} }
else { else {
$('#tool_bold').removeClass('tool_button_current'); $('#tool_bold').removeClass('push_button_pressed').addClass('tool_button');
} }
$('#font_family').val(elem.getAttribute("font-family")); $('#font_family').val(elem.getAttribute("font-family"));
$('#font_size').val(elem.getAttribute("font-size")); $('#font_size').val(elem.getAttribute("font-size"));
@@ -1059,7 +1059,7 @@ function svg_edit_setup() {
$('.tools_flyout').fadeOut(fadeFlyouts); $('.tools_flyout').fadeOut(fadeFlyouts);
$('#styleoverrides').text(''); $('#styleoverrides').text('');
$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button'); $('.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 // when a tool is selected, we should deselect any currently selected elements
svgCanvas.clearSelection(); svgCanvas.clearSelection();
return true; return true;
@@ -1080,7 +1080,7 @@ function svg_edit_setup() {
$(window).mouseup(function(evt) { $(window).mouseup(function(evt) {
if(!on_button) { 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 // do not hide if it was the file input as that input needs to be visible
// for its change event to fire // for its change event to fire
if (evt.target.localName != "input") { if (evt.target.localName != "input") {
@@ -1098,8 +1098,8 @@ function svg_edit_setup() {
}); });
overlay.bind('mousedown',function() { overlay.bind('mousedown',function() {
if (!button.hasClass('down')) { if (!button.hasClass('buttondown')) {
button.addClass('down'); button.addClass('buttondown').removeClass('buttonup')
// Margin must be reset in case it was changed before; // Margin must be reset in case it was changed before;
list.css('margin-left',0).show(); list.css('margin-left',0).show();
if(!height) { if(!height) {
@@ -1112,7 +1112,7 @@ function svg_edit_setup() {
on_button = true; on_button = true;
return false; return false;
} else { } else {
button.removeClass('down'); button.removeClass('buttondown').addClass('buttonup');
list.fadeOut(200); list.fadeOut(200);
} }
}).hover(function() { }).hover(function() {
@@ -1345,8 +1345,12 @@ function svg_edit_setup() {
}; };
var linkControlPoints = function() { 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); path.linkControlPoints(linked);
} }
@@ -1469,7 +1473,11 @@ function svg_edit_setup() {
} }
var clickWireframe = function() { 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'); workarea.toggleClass('wireframe');
if(supportsNonSS) return; if(supportsNonSS) return;
@@ -2050,12 +2058,12 @@ function svg_edit_setup() {
$('.push_button').mousedown(function() { $('.push_button').mousedown(function() {
if (!$(this).hasClass('disabled')) { if (!$(this).hasClass('disabled')) {
$(this).addClass('push_button_pressed'); $(this).addClass('push_button_pressed').removeClass('push_button');
} }
}).mouseout(function() { }).mouseout(function() {
$(this).removeClass('push_button_pressed'); $(this).removeClass('push_button_pressed').addClass('push_button');
}).mouseup(function() { }).mouseup(function() {
$(this).removeClass('push_button_pressed'); $(this).removeClass('push_button_pressed').addClass('push_button');
}); });
$('#layer_new').click(function() { $('#layer_new').click(function() {