From 7256d2dfdc8273ad77bec2f50acb16fb8a906d86 Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Sat, 15 Sep 2007 21:03:01 +0000
Subject: [PATCH] elofgren: USABILITY: Add + and - toggle icons to TogglePanel?
 and use 'cursor: pointer;' to make it obvious that it is clickable. Move
 toggle images to sapphire/images/ (merged from branches/gsoc)

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@41935 467b73ca-7a2a-4603-9d3b-597d59a354a9
---
 images/toggle-closed.gif  | Bin 0 -> 164 bytes
 images/toggle-open.gif    | Bin 0 -> 124 bytes
 javascript/TogglePanel.js |   3 +++
 templates/TogglePanel.ss  |   6 +++++-
 4 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 images/toggle-closed.gif
 create mode 100644 images/toggle-open.gif

diff --git a/images/toggle-closed.gif b/images/toggle-closed.gif
new file mode 100644
index 0000000000000000000000000000000000000000..cac5ac03d01933bc5274f8a0102b22a1b31b95b1
GIT binary patch
literal 164
zcmV;V09*e@Nk%w1VGsZi0OJn;#og&bj<!OQxF&w9UZBA~jkG<8vqY7-;Oz6{@AW^A
zw)_13DTJ>-kG0_K^Z)<<A^8LW000jFEC2ui01yBW000D0@X1N5z4#4dMxF)$7@t%i
zNKrlk8mukyT0;@sM3NA9P<W35z(Gtb773yQpn5ch#bc5PXh;|efi}0(3KWcsfGAiU
ShzB!zB@mTM3~ksF0RTHF^+9C-

literal 0
HcmV?d00001

diff --git a/images/toggle-open.gif b/images/toggle-open.gif
new file mode 100644
index 0000000000000000000000000000000000000000..00f0a6e49bfbdc4f2ba2b46efe0cf6a23ea79c84
GIT binary patch
literal 124
zcmV-?0E7QWNk%w1VGsZi0OJn;#og&bj<!OQxF&w9UZBA~jkG<8vqY7-;Oz6{@AW^A
zw)_13DTJ>-kG0_K^Z)<<A^8LW000jFEC2ui01yBW000Cj@X1N5y*TU5dmTj}j$|=N
e1>me~3lvhLwlvU4j3VrOuP~mVa7ZLZ0027*s5X`W

literal 0
HcmV?d00001

diff --git a/javascript/TogglePanel.js b/javascript/TogglePanel.js
index 0705cacfb..70080bda5 100755
--- a/javascript/TogglePanel.js
+++ b/javascript/TogglePanel.js
@@ -2,6 +2,9 @@ Behaviour.register({
 	'h2.TogglePanelHeader' : {
 		onclick : function() {
 			var contentDiv = $('panel_' + this.id);
+			var toggleID = this.id.replace('panel_','') + '_toggle';
+			Element.toggle(toggleID + '_closed');
+			Element.toggle(toggleID + '_open');
 			if(contentDiv.style.display == 'none') {
 				contentDiv.style.display = '';
 				Element.removeClassName(this, 'closed');
diff --git a/templates/TogglePanel.ss b/templates/TogglePanel.ss
index 973aefbc9..f48cb2eee 100755
--- a/templates/TogglePanel.ss
+++ b/templates/TogglePanel.ss
@@ -1,4 +1,8 @@
-<h2 id="$id" class="TogglePanelHeader$ClosedClass">$Title</h2>
+<h2 id="$id" style="cursor: pointer;" class="TogglePanelHeader$ClosedClass">
+	<img id="{$id}_toggle_closed" src="sapphire/images/toggle-closed.gif" alt="+" title="Show" />
+	<img id="{$id}_toggle_open" src="sapphire/images/toggle-open.gif" alt="-" style="display:none;" title="Hide" /> 
+	$Title
+</h2>
 <div id="panel_$id" $ClosedStyle>
 <% control FieldSet %>
 $FieldHolder