elofgren: USABILITY: Make the 'Site Reports' drop-down use a 'Go' button. Fixes usability issue #12. More info: http://www.elijahlofgren.com/silverstripe/inconsistent-go-buttons/

(merged from branches/gsoc)


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

css/cms_left.css

@@ -38,7 +38,7 @@
 	width: 75%;
 	margin: 0;
 }
-#PageType {
+#ReportSelector_holder select, #PageType {
 	width: 75%;
 	float: left;
 	margin-right: 3px;
@@ -278,9 +278,6 @@ ul.tree span.modified,
 	margin: 0;
 	padding: 3px;
 }
-#ReportSelector_holder select {
-	width: 100%;
-}
 
 #treepanes .pane_actions {
 	margin: 7px 4px;

javascript/SideReports.js

@@ -37,14 +37,14 @@ SideReports.prototype = {
 	
 }
 
-SideReportDropdown = Class.create();
-SideReportDropdown.prototype = {
+SideReportGo = Class.create();
+SideReportGo.prototype = {
 	destroy: function() {
-		this.onchange = null;
+		this.onclick = null;
 		this.holder = null;
 	},
-	onchange: function() {
-		this.holder.showreport();
+	onclick: function() {
+		$('reports_holder').showreport();
 	}
 }
 
@@ -65,6 +65,6 @@ SideReportRecord.prototype = {
 	}
 }
 
-SideReportDropdown.applyTo('#ReportSelector');
+SideReportGo.applyTo('#report_select_go');
 SideReportRecord.applyTo('#reports_holder a');
 SideReports.applyTo('#reports_holder');

templates/Includes/CMSMain_left.ss

@@ -129,7 +129,7 @@
 			Site Reports
 		</h2>
 		<div class="listpane" id="reports_holder" style="display:none">
-			<p id="ReportSelector_holder">$ReportSelector</p>
+			<p id="ReportSelector_holder">$ReportSelector <input class="action" type="submit" id="report_select_go" value="Go" /></p>
 			<div class="unitBody">
 			</div>
 		</div>