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

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
master
Jeff Schiller 2010-02-09 06:44:12 +00:00
parent c032cfb370
commit 8805307592
3 changed files with 57 additions and 65 deletions
Show Stats 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;
}
#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;
}

2
editor/svg-editor.html
View File

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

44
editor/svg-editor.js
View File

@ -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() {