elofgren: USABILITY: Remove the left Side Tabs and implement clicking on the headings to show sidebar sections instead in order to fix Usability issue "#22 Allow clicking on blue heading bar of Left

Site Tree to reduce it". More info: http://www.elijahlofgren.com/silverstripe/allow-clicking-on-blue-heading-bar-of-left-site-tree-to-reduce-it/ 
A big THANK YOU to Andy Skelton for permission to use his WordPress? toggle icons originally posted at: http://trac.wordpress.org/attachment/ticket/1904/toggle.gif 
(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41803 467b73ca-7a2a-4603-9d3b-597d59a354a9

css/cms_left.css

@@ -204,44 +204,6 @@ ul.tree span.modified,
 	text-decoration : none;
 }
 
-/**
- * Side tabs
- */
-#SideTabs {
-	float: left;
-	margin: 0;
-	padding: 0;
-	width: 18px;
-	height: 80%;
-}
-#SideTabs li {
-	clear: left;
-	width: 16px;
-	text-indent: -100em;
-	height: 70px;
-	overflow: hidden;
-	margin: 5px 0 5px 2px;
-	background-repeat: no-repeat;
-	cursor: pointer;
-}
-#SideTabs li#sidetab_versions { background-image: url(../images/sidetabs/versions.gif); }
-#SideTabs li#sidetab_sitetree { background-image: url(../images/sidetabs/sitemap.gif); }
-#SideTabs li#sidetab_tasklist { background-image: url(../images/sidetabs/tasklist.gif); }
-#SideTabs li#sidetab_waitingon { background-image: url(../images/sidetabs/waitingon.gif); }
-#SideTabs li#sidetab_comments { background-image: url(../images/sidetabs/comments.gif); }
-#SideTabs li#sidetab_reports { background-image: url(../images/sidetabs/reports.gif); }
-#SideTabs li#sidetab_search { background-image: url(../images/sidetabs/search.gif); }
-#SideTabs li#sidetab_advertisements { background-image: url(../images/sidetabs/advertisements.gif); }
-
-#SideTabs li#sidetab_versions.selected { background-image: url(../images/sidetabs/versions_over.gif); }
-#SideTabs li#sidetab_sitetree.selected { background-image: url(../images/sidetabs/sitemap_over.gif); }
-#SideTabs li#sidetab_tasklist.selected { background-image: url(../images/sidetabs/tasklist_over.gif); }
-#SideTabs li#sidetab_waitingon.selected { background-image: url(../images/sidetabs/waitingon_over.gif); }
-#SideTabs li#sidetab_comments.selected { background-image: url(../images/sidetabs/comments_over.gif); }
-#SideTabs li#sidetab_reports.selected { background-image: url(../images/sidetabs/reports_over.gif); }
-#SideTabs li#sidetab_search.selected { background-image: url(../images/sidetabs/search_over.gif); }
-#SideTabs li#sidetab_advertisements.selected { background-image: url(../images/sidetabs/advertisements_over.gif); }
-
 #left {
 	background-color: #EEE;
 }
@@ -250,6 +212,12 @@ ul.tree span.modified,
 	background-color: #FFF;
 	border-left: 1px #ccc solid;
 }
+#treepanes h2 {
+	cursor: pointer;
+}
+#treepanes h2 img {
+	float:right;
+}
 
 .listpane p {
 	margin: 3px 3px 7px 3px;

css/layout.css

@@ -95,9 +95,6 @@ body.stillLoading select {
 #left.hidden form, #left.hidden .title, #left.hidden #TreeActions {
 	display: none;
 }
-#left.hidden #SideTabs {
-	margin-top: 47px;
-}
 	
 #left.hidden {
 	width: 18px;

javascript/GenericDataAdmin_left.js

@@ -180,8 +180,8 @@ ResultTable.prototype = {
 function fixHeight_left() {
 	fitToParent('LeftPane');
 	fitToParent('Search_holder',12);
-	if($('SideTabs')) {
-		$('SideTabs').resize();
+	if($('treepanes')) {
+		$('treepanes').resize();
 	}
 }
 

javascript/LeftAndMain_left.js

@@ -414,8 +414,8 @@ treeactions = {
 
 function fixHeight_left() {
 	if($('treepanes')) fitToParent('treepanes');
-	var st = $('SideTabs');
-	if(st) st.resize();
+	var st = $('treepanes');
+	if(st.resize) st.resize();
 	else fitToParent('sitetree_holder');
 }
 

javascript/SideTabs.js

@@ -5,7 +5,7 @@ SideTabs.prototype = {
 	 * from the HTML.
 	 */
 	initialize: function() {
-		this.tabs = this.getElementsByTagName('li');
+		this.tabs = this.getElementsByTagName('h2');
 		this.resize();
 		$('Form_EditForm').observeMethod('PageLoaded',this.onpagechanged.bind(this));
 	},
@@ -60,11 +60,11 @@ SideTabItem.prototype = {
 	 * Set up one of the side tabs
 	 */
 	initialize: function() {
-		var holderID = this.id.replace('sidetab_','') + '_holder';
+		var holderID = this.id.replace('heading_','') + '_holder';
 		this.linkedPane = $(holderID);
 		if(!this.linkedPane) throw("Can't find item: " + holderID);
 		this.selected = (this.className && this.className.indexOf('selected') > -10);
-		this.holder = this.parentNode;
+		this.holder = $('treepanes');
 		this.linkedPane.style.display = this.selected ? '' : 'none';
 	},
 	
@@ -75,10 +75,13 @@ SideTabItem.prototype = {
 	},
 	
 	/**
-	 * Handler for <li> click
+	 * Handler for <h2> click
 	 */
 	onclick: function(event) {
 		Event.stop(event);
+		var toggleID = this.id.replace('heading_','') + '_toggle';
+		Element.toggle(toggleID + '_closed');
+		Element.toggle(toggleID + '_open');
 		this.toggle();
 	},
 	toggle: function() {
@@ -109,8 +112,8 @@ SideTabItem.prototype = {
 }
 
 // Application order is important - the Items must be created before the SideTabs object.
-SideTabItem.applyTo('#SideTabs li');
-SideTabs.applyTo('#SideTabs');
+SideTabItem.applyTo('#treepanes h2');
+SideTabs.applyTo('#treepanes');
 
 /**
  * Generic base class for all side panels

templates/Includes/AssetAdmin_left.ss

@@ -35,18 +35,6 @@
 				<p id="sortitems_message" style="margin: 0">To reorganise your folders, drag them around as desired.</p>
 			</form>
 		
-		
-			<!--	
-			<ul style="float: left" id="SideTabs">
-				<li id="sidetab_sitetree" class="selected">Site Map</li>
-				<li id="sidetab_tasklist">Task List</li>
-				<li id="sidetab_waitingon">Waiting on</li>
-				<li id="sidetab_versions">Versions</li>
-				<li id="sidetab_comments">Comments</li>
-				<li id="sidetab_reports">Reports</li>
-			</ul>
-			-->
-	
 			$SiteTreeAsUL
 		</div>
 	</div>

templates/Includes/CMSMain_left.ss

@@ -1,21 +1,11 @@
 <div class="title"><div style="background-image : url(cms/images/panels/MySite.png)">My Site</div></div>
 
-	<ul style="float: left; clear: left;" id="SideTabs">
-		<li id="sidetab_sitetree" class="selected">Site Map</li>
-		<!--<li id="sidetab_search">Search</li>-->
-		<% if EnterpriseCMS %>
-		<li id="sidetab_tasklist">Task List</li>
-		<li id="sidetab_waitingon">Waiting on</li>
-		<% end_if %>
-		<li id="sidetab_versions">Versions</li>
-		<% if EnterpriseCMS %>
-		<li id="sidetab_comments">Comments</li>
-		<% end_if %>
-		<li id="sidetab_reports">Reports</li>
-	</ul>
-	
 	<div id="treepanes">
-	
+		<h2 id="heading_sitetree" class="selected">
+			<img id="sitetree_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" style="display:none;" title="click to open this box" />
+			<img id="sitetree_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" title="click to close box" />
+			Site Tree
+		</h2>
 		<div id="sitetree_holder">
 
 			<ul id="TreeActions">
@@ -87,20 +77,31 @@
 		</div>-->
 
 		<% if EnterpriseCMS %>
-		<div class="listpane" id="tasklist_holder" style="display:none">
-			<h2>Tasklist</h2>
+		<h2 id="heading_tasklist">
+			<img id="tasklist_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" title="click to open box" />
+			<img id="tasklist_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" style="display:none;" title="click to close box" /> 
+			Tasklist
+		</h2>
+		<div class="listpane" id="tasklist_holder" style="display:none">	
 			<div class="unitBody">
 			</div>
 		</div>
-		<div class="listpane" id="waitingon_holder" style="display:none">
-			<h2>Waiting on</h2>
+		<h2 id="heading_waitingon">
+			<img id="waitingon_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" title="click to open box" />
+			<img id="waitingon_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" style="display:none;" title="click to close box" /> 
+			Waiting on
+		</h2>
+		<div class="listpane" id="waitingon_holder" style="display:none">	
 			<div class="unitBody">
 			</div>
 		</div>
 		<% end_if %>
+		<h2 id="heading_versions">
+			<img id="versions_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" title="click to open box" />
+			<img id="versions_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" style="display:none;" title="click to close box" /> 
+			History
+		</h2>
 		<div class="listpane" id="versions_holder" style="display:none">
-			<h2>History</h2>
-			
 			<p class="pane_actions" id="versions_actions">
 				<select>
 					<option value="view" selected="selected">View (click to see)</option>
@@ -115,14 +116,22 @@
 			</div>
 		</div>
 		<% if EnterpriseCMS %>
-		<div class="listpane" id="comments_holder" style="display:none">
-			<h2>Comments</h2>
+		<h2 id="heading_comments">
+			<img id="comments_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" title="click to open box" />
+			<img id="comments_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" style="display:none;" title="click to close box" /> 
+			Comments
+		</h2>
+		<div class="listpane" id="comments_holder" style="display:none">	
 			<div class="unitBody">
 			</div>
 		</div>
 		<% end_if %>
+		<h2 id="heading_reports">
+			<img id="reports_toggle_closed" src="cms/images/panels/toggle-closed.gif" alt="+" title="click to open box" />
+			<img id="reports_toggle_open" src="cms/images/panels/toggle-open.gif" alt="-" style="display:none;" title="click to close box" /> 
+			Reports
+		</h2>
 		<div class="listpane" id="reports_holder" style="display:none">
-			<h2>Reports</h2>
 			<p id="ReportSelector_holder">$ReportSelector</p>
 			<div class="unitBody">
 			</div>