From 0105f36866627c9dd364ab1965d7462383dc1d83 Mon Sep 17 00:00:00 2001
From: James Kirkus-Lamont <jkl@paradise.net.nz>
Date: Sun, 1 Feb 2009 23:17:17 +0000
Subject: [PATCH] BUGIX: CMS UI changed search spinner, hide search button
 while processing (better interaction feedback)

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/branches/2.3@71169 467b73ca-7a2a-4603-9d3b-597d59a354a9
---
 css/layout.css                     | 22 ++++++++++++++++++++++
 javascript/LeftAndMain_left.js     |  4 +++-
 templates/Includes/CMSMain_left.ss |  1 +
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/css/layout.css b/css/layout.css
index 77a65b70..231964b1 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -98,6 +98,14 @@ input.loading {
 	background: #fff url(../images/network-save.gif) no-repeat center left;
 }
 
+.loading {
+	background: #fff url(../images/network-save.gif) no-repeat center left;
+}
+
+input.hidden {
+	display: none;
+}
+
 /* Overrides - TODO Find a better place to put them */
 form#Form_EditForm fieldset {
 	height: 100%;
@@ -338,10 +346,24 @@ body.stillLoading select {
 		width: 100%;
 		margin: 0 0 5px 0;
 		padding-left: 5px;
+		position: relative;
 	}
 		#SearchBox #SiteTreeSearchTerm {
 			padding: 1px 0 2px 0;
 		}
+	
+	#searchIndicator {
+		display: none;
+		width: 16px;
+		height: 16px;
+		background: #EFEFEF url(../images/network-save.gif) no-repeat;
+		position: absolute;
+		left: 158px;
+		top: 3px;
+	}
+		#searchIndicator.loading {
+			display: block;
+		}
 	.SearchCriteriaContainer {
 		float: left;
 		width: 100%;
diff --git a/javascript/LeftAndMain_left.js b/javascript/LeftAndMain_left.js
index c06703ce..8ec1b7a9 100755
--- a/javascript/LeftAndMain_left.js
+++ b/javascript/LeftAndMain_left.js
@@ -479,11 +479,13 @@ SiteTreeFilterForm = Class.create();
 SiteTreeFilterForm.applyTo('form#search_options');
 SiteTreeFilterForm.prototype = {
 	onsubmit: function() {
-			$('SiteTreeSearchButton').className = 'loading';
+			$('SiteTreeSearchButton').className = 'hidden';
+			$('searchIndicator').className = 'loading';
 			Ajax.SubmitForm(this, null, {
 				onSuccess :  function(response) {
 					$('SiteTreeIsFiltered').value = 1;
 					$('SiteTreeSearchButton').className = '';
+					$('searchIndicator').className = '';
 					$('sitetree_ul').innerHTML = response.responseText;
 					Behaviour.apply($('sitetree_ul'));
 					statusMessage('Filtered tree','good');
diff --git a/templates/Includes/CMSMain_left.ss b/templates/Includes/CMSMain_left.ss
index 28f3dba6..6abf0427 100755
--- a/templates/Includes/CMSMain_left.ss
+++ b/templates/Includes/CMSMain_left.ss
@@ -31,6 +31,7 @@
 					<input type="hidden" id="SiteTreeIsFiltered" value="0" />
 					<div id="SearchBox">
 						<input type="text" id="SiteTreeSearchTerm" name="SiteTreeSearchTerm" />
+						<div id="searchIndicator">&nbsp;</div>
 						<input type="submit" id="SiteTreeSearchButton" class="action" value="<% _t('SEARCH') %>" title="<% _t('SEARCHTITLE','Search through URL, Title, Menu Title, &amp; Content') %>" />
 					</div>