From 14dad9f1c82ceee5f613cb174fbd71bf57ef0d19 Mon Sep 17 00:00:00 2001
From: Jeff Schiller <codedread@gmail.com>
Date: Thu, 15 Oct 2009 14:49:06 +0000
Subject: [PATCH] Fix Issue 180: contextual tool buttons show as pressed in
 when pressed, also highlighted when hovered

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@833 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.css  | 15 +++++++++++----
 editor/svg-editor.html | 42 +++++++++++++++++++++---------------------
 editor/svg-editor.js   | 10 ++++++++++
 3 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 9af54c99..a0808a61 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -352,7 +352,10 @@ span.zoom_tool {
 	background-color: #B0B0B0;
 }
 
-#svg_editor .tool_button, #svg_editor .tool_button_current, #svg_editor .tool_button_disabled {
+#svg_editor .tool_button, 
+#svg_editor .push_button,
+#svg_editor .tool_button_current, 
+#svg_editor .tool_button_disabled {
 	height: 24px;
 	width: 24px;
 	margin: 2px;
@@ -364,7 +367,8 @@ span.zoom_tool {
 	cursor: pointer;
 }
 
-#svg_editor .tool_button_current {
+#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;
@@ -420,8 +424,6 @@ span.zoom_tool {
 #svg_editor #tool_aligncenter { background: 2px 2px url('images/align-center.png') no-repeat; }
 #svg_editor #tool_alignright { background: 2px 2px url('images/align-right.png') no-repeat; }
 #svg_editor .tool_sep { background: 2px 2px url('images/sep.png') no-repeat; }
-#svg_editor #tool_undo { background: 2px 2px url('images/undo.png') no-repeat; }
-#svg_editor #tool_redo { background: 2px 2px url('images/redo.png') no-repeat; }
 
 /* TODO: figure out what more-specific selector causes me to write this atrocity and not
          simply .tool_flyout_button */
@@ -436,6 +438,11 @@ span.zoom_tool {
 	width: 28px;
 }
 
+#svg_editor .tool_button:hover, 
+#svg_editor .push_button:hover {
+	background-color: #FFF;
+}
+
 #svg_editor #tools_rect .tool_flyout_button_current, #svg_editor #tools_ellipse .tool_flyout_button_current {
 	border-left: 1px solid #808080;
 	border-top: 1px solid #808080;
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index ad881cce..14339ca4 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -84,28 +84,28 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	
 	<!-- File-like buttons: New, Save, Source -->
 	<div id="file_panel">
-		<img class="tool_button" id="tool_clear" src="images/clear.png" title="New Image [N]" alt="Clear" />
-		<img style="display:none" class="tool_button" id="tool_open" src="images/open.png" title="Open Image [O]" alt="Open"/>
-		<img class="tool_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/>
-		<img class="tool_button" id="tool_docprops" src="images/document-properties.png" title="Document Properties [I]"/>
-		<img class="tool_button" id="tool_source" src="images/source.png" title="Edit Source [U]" alt="Source"/>
+		<img class="push_button" id="tool_clear" src="images/clear.png" title="New Image [N]" alt="Clear" />
+		<img style="display:none" class="push_button" id="tool_open" src="images/open.png" title="Open Image [O]" alt="Open"/>
+		<img class="push_button" id="tool_save" src="images/save.png" title="Save Image [S]" alt="Save"/>
+		<img class="push_button" id="tool_docprops" src="images/document-properties.png" title="Document Properties [I]"/>
+		<img class="push_button" id="tool_source" src="images/source.png" title="Edit Source [U]" alt="Source"/>
 	</div>
 
     <!-- History buttons -->
 	<div id="history_panel">
 		<div class="tool_sep"></div>
-		<div class="tool_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
-		<div class="tool_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
+		<img class="push_button tool_button_disabled" id="tool_undo" src="images/undo.png" title="Undo [Z]"/>
+		<img class="push_button tool_button_disabled" id="tool_redo" src="images/redo.png" title="Redo [Y]"/>
 	</div>
 	
 	<!-- Buttons when a single element is selected -->
 	<div id="selected_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
-		<img class="tool_button" id="tool_clone" src="images/clone.png" title="Clone Element [C]" alt="Copy"/>
-		<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/>
+		<img class="push_button" id="tool_clone" src="images/clone.png" title="Clone Element [C]" alt="Copy"/>
+		<img class="push_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/>
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
-		<img class="tool_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/>
-		<img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
+		<img class="push_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/>
+		<img class="push_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<select id="group_opacity" class="selected_tool" title="Change selected item opacity">
 			<option selected="selected" value="1">100 %</option>
@@ -127,15 +127,15 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<!-- Buttons when multiple elements are selected -->
 	<div id="multiselected_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
-		<img class="tool_button" id="tool_clone_multi" src="images/clone.png" title="Clone Elements [C]" alt="Clone"/>
-		<img class="tool_button" id="tool_delete_multi" src="images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/>
+		<img class="push_button" id="tool_clone_multi" src="images/clone.png" title="Clone Elements [C]" alt="Clone"/>
+		<img class="push_button" id="tool_delete_multi" src="images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/>
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
-		<div class="tool_button" id="tool_alignleft" title="Align Left"></div>
-		<div class="tool_button" id="tool_aligncenter" title="Align Center"></div>
-		<div class="tool_button" id="tool_alignright" title="Align Right"></div>
-		<div class="tool_button" id="tool_aligntop" title="Align Top"></div>
-		<div class="tool_button" id="tool_alignmiddle" title="Align Middle"></div>
-		<div class="tool_button" id="tool_alignbottom" title="Align Bottom"></div>
+		<div class="push_button" id="tool_alignleft" title="Align Left"></div>
+		<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
+		<div class="push_button" id="tool_alignright" title="Align Right"></div>
+		<div class="push_button" id="tool_aligntop" title="Align Top"></div>
+		<div class="push_button" id="tool_alignmiddle" title="Align Middle"></div>
+		<div class="push_button" id="tool_alignbottom" title="Align Bottom"></div>
 		<span id="relativeToLabel" class="selected_tool">relative to:</span>
 		<select id="align_relative_to" class="selected_tool" title="Align relative to ...">
 		<option id="selected_objects" value="selected">selected objects</option>
@@ -144,12 +144,12 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		<option id="page" value="page">page</option>
 		</select>
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
-		<img class="tool_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/>
+		<img class="push_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/>
 	</div>
 
 	<div id="g_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
-		<img class="tool_button" id="tool_ungroup" src="images/shape_ungroup.png" title="Ungroup Elements [G]" alt="Ungroup"/>
+		<img class="push_button" id="tool_ungroup" src="images/shape_ungroup.png" title="Ungroup Elements [G]" alt="Ungroup"/>
 	</div>
 
 	<div id="rect_panel">
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index df2d9195..bbeee544 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -1169,6 +1169,16 @@ function svg_edit_setup() {
 	}).mouseup(function() {
 		$(this).removeClass('layer_buttonpressed');
 	});
+
+	$('.push_button').mousedown(function() { 
+		if (!$(this).hasClass('tool_button_disabled')) {
+			$(this).addClass('push_button_pressed');
+		}
+	}).mouseout(function() {
+		$(this).removeClass('push_button_pressed');
+	}).mouseup(function() {
+		$(this).removeClass('push_button_pressed');
+	});
 	
 	$('#layer_new').click(function() {
 		var curNames = new Array(svgCanvas.getNumLayers());