From cc3385b9f8855d0ee18590aae0305a26ada74ef1 Mon Sep 17 00:00:00 2001
From: David Craig <david@silverstripe.com>
Date: Tue, 16 Jun 2015 10:49:19 +1200
Subject: [PATCH] Move filters from panel to header

- The filters panel has been removed in favour of a search panel in the header
- Multi-select updated
  - Renamed to Bulk actions
  - Styles updated
  - Added placeholder text / removed redundant option
  - Now appears in SiteTree view too
---
 code/controllers/AssetAdmin.php               | 26 +++--
 code/controllers/CMSMain.php                  | 12 +--
 css/screen.css                                | 16 +++-
 javascript/CMSMain.js                         | 95 +++++++++++++++++++
 javascript/CMSPageHistoryController.js        |  4 +-
 lang/en.yml                                   | 16 ++--
 scss/_AssetAdmin.scss                         | 10 +-
 scss/_CMSMain.scss                            | 57 ++++++++---
 templates/Includes/AssetAdmin_Content.ss      | 32 ++++---
 templates/Includes/AssetAdmin_Tools.ss        | 12 +--
 templates/Includes/CMSMain_ListView.ss        |  4 +-
 templates/Includes/CMSMain_TreeView.ss        |  9 +-
 .../Includes/CMSPagesController_Content.ss    |  4 +-
 .../CMSPagesController_ContentToolActions.ss  | 25 +++--
 .../CMSPagesController_ContentToolbar.ss      |  8 --
 .../Includes/CMSPagesController_Tools.ss      | 12 +--
 tests/behat/features/manage-files.feature     | 12 +--
 .../behat/features/search-for-a-page.feature  | 53 ++++++-----
 18 files changed, 271 insertions(+), 136 deletions(-)
 delete mode 100644 templates/Includes/CMSPagesController_ContentToolbar.ss

diff --git a/code/controllers/AssetAdmin.php b/code/controllers/AssetAdmin.php
index 40b4f30b..1b563383 100644
--- a/code/controllers/AssetAdmin.php
+++ b/code/controllers/AssetAdmin.php
@@ -308,7 +308,7 @@ JS
 		$fields->setForm($form);
 		$form->setTemplate($this->getTemplatesWithSuffix('_EditForm'));
 		// TODO Can't merge $FormAttributes in template at the moment
-		$form->addExtraClass('cms-edit-form cms-panel-padded center ' . $this->BaseCSSClasses());
+		$form->addExtraClass('cms-edit-form ' . $this->BaseCSSClasses());
 		$form->setAttribute('data-pjax-fragment', 'CurrentForm');
 		$form->Fields()->findOrMakeTab('Root')->setTemplate('CMSTabSet');
 
@@ -360,21 +360,17 @@ JS
 		foreach($context->getFilters() as $filter) $filter->setFullName(sprintf('q[%s]', $filter->getFullName()));
 
 		// Customize fields
-		$context->addField(
-			new HeaderField('q[Date]', _t('CMSSearch.FILTERDATEHEADING', 'Date'), 4)
-		);
-		$context->addField(
-			DateField::create(
-				'q[CreatedFrom]', 
-				_t('CMSSearch.FILTERDATEFROM', 'From')
-			)->setConfig('showcalendar', true)
-		);
-		$context->addField(
-			DateField::create(
-				'q[CreatedTo]',
-				_t('CMSSearch.FILTERDATETO', 'To')
-			)->setConfig('showcalendar', true)
+		$dateHeader = HeaderField::create('q[Date]', _t('CMSSearch.FILTERDATEHEADING', 'Date'), 4);
+		$dateFrom = DateField::create('q[CreatedFrom]', _t('CMSSearch.FILTERDATEFROM', 'From'))
+		->setConfig('showcalendar', true);
+		$dateTo = DateField::create('q[CreatedTo]',_t('CMSSearch.FILTERDATETO', 'To'))
+		->setConfig('showcalendar', true);
+		$dateGroup = FieldGroup::create(
+			$dateHeader,
+			$dateFrom,
+			$dateTo
 		);
+		$context->addField($dateGroup);
 		$appCategories = array(
 			'image' => _t('AssetAdmin.AppCategoryImage', 'Image'),
 			'audio' => _t('AssetAdmin.AppCategoryAudio', 'Audio'),
diff --git a/code/controllers/CMSMain.php b/code/controllers/CMSMain.php
index 817bf398..c7ee5a9b 100644
--- a/code/controllers/CMSMain.php
+++ b/code/controllers/CMSMain.php
@@ -314,8 +314,8 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 	 */
 	public function SearchForm() {
 		// Create the fields
-		$content = new TextField('q[Term]', _t('CMSSearch.FILTERLABELTEXT', 'Content'));
-		$dateHeader = new HeaderField('q[Date]', _t('CMSSearch.FILTERDATEHEADING', 'Date'), 4);
+		$content = new TextField('q[Term]', _t('CMSSearch.FILTERLABELTEXT', 'Search'));
+		$dateHeader = new HeaderField('q[Date]', _t('CMSSearch.PAGEFILTERDATEHEADING', 'Last edited'), 4);
 		$dateFrom = new DateField(
 			'q[LastEditedFrom]', 
 			_t('CMSSearch.FILTERDATEFROM', 'From')
@@ -328,12 +328,12 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 		$dateTo->setConfig('showcalendar', true);
 		$pageFilter = new DropdownField(
 			'q[FilterClass]', 
-			_t('CMSMain.PAGES', 'Pages'), 
+			_t('CMSMain.PAGES', 'Page status'), 
 			CMSSiteTreeFilter::get_all_filters()
 		);
 		$pageClasses = new DropdownField(
 			'q[ClassName]', 
-			_t('CMSMain.PAGETYPEOPT', 'Page Type', 'Dropdown for limiting search to a page type'), 
+			_t('CMSMain.PAGETYPEOPT', 'Page type', 'Dropdown for limiting search to a page type'), 
 			$this->getPageTypes()
 		);
 		$pageClasses->setEmptyString(_t('CMSMain.PAGETYPEANYOPT','Any'));
@@ -356,9 +356,9 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 		
 		// Create the Search and Reset action
 		$actions = new FieldList(
-			FormAction::create('doSearch',  _t('CMSMain_left_ss.APPLY_FILTER', 'Apply Filter'))
+			FormAction::create('doSearch',  _t('CMSMain_left_ss.APPLY_FILTER', 'Search'))
 				->addExtraClass('ss-ui-action-constructive'),
-			Object::create('ResetFormAction', 'clear', _t('CMSMain_left_ss.CLEAR_FILTER', 'Clear Filter'))
+			Object::create('ResetFormAction', 'clear', _t('CMSMain_left_ss.CLEAR_FILTER', 'Clear'))
 		);
 
 		// Use <button> to allow full jQuery UI styling on the all of the Actions
diff --git a/css/screen.css b/css/screen.css
index 71b26b27..37f65218 100644
--- a/css/screen.css
+++ b/css/screen.css
@@ -13,13 +13,21 @@
 /** -------------------------------------------- Tree View (collapsed for sidebar) -------------------------------------------- */
 #cms-content-treeview .cms-tree-expand-trigger, #cms-content-listview .cms-tree-expand-trigger { display: none; }
 
+/** DEPRECATED: .cms-content-tools will be removed in 4.0 Use .cms-content-filters instead.  Hide certain elements when shown in "sidebar mode" */
 .cms-content-tools #cms-content-treeview .cms-content-toolbar { border-bottom: none; box-shadow: none; margin-bottom: 8px; }
-.cms-content-tools #cms-content-treeview .cms-tree-view-modes, .cms-content-tools #cms-content-treeview .cms-content-batchactions { display: none; }
 .cms-content-tools #cms-content-treeview .cms-tree-expand-trigger { display: block; float: left; margin: 0 0 2px 0; }
 .cms-content-tools #cms-content-treeview .cms-tree-expand-trigger span.ui-button-text { padding-right: 8px; }
-.cms-content-tools #cms-content-treeview .cms-tree .badge { display: none; }
 .cms-content-tools #cms-content-treeview .cms-tree a:hover > .text > .badge, .cms-content-tools #cms-content-treeview .cms-tree .jstree-clicked > .text > .badge { display: inline-block; }
 
+/** -------------------------------------------- The CMS Content Toolbar. Associated behaviour in CMSMain.js -------------------------------------------- */
+.cms-content-toolbar button.ss-ui-button { padding: .4em .75em; vertical-align: baseline; }
+.cms-content-toolbar button.ss-ui-button:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+.cms-content-toolbar button.ss-ui-button:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: 0; }
+.cms-content-toolbar button.ss-ui-button:before { font-size: 1.1em; }
+.cms-content-toolbar button.ss-ui-button.ui-state-focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
+.cms-content-toolbar button.ss-ui-button.active { -webkit-box-shadow: 0 0 5px #b3b3b3 inset; -moz-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; }
+.cms-content-toolbar button.ss-ui-button .ui-button-text { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; vertical-align: baseline; padding: 0; }
+
 /** ------------------------------------------------------------------ URLSegment field ----------------------------------------------------------------- */
 .field.urlsegment.loading { background: url(../images/loading.gif) no-repeat 162px 8px; }
 .field.urlsegment .preview { padding-top: 8px; display: inline-block; }
@@ -30,8 +38,8 @@
 
 #Form_EditForm #Title .update { margin-left: 7px; }
 
-.cms .AssetAdmin .cms-content-fields { overflow: hidden; }
-.cms .AssetAdmin .cms-content-fields .cms-edit-form.AssetAdmin { overflow-y: auto; }
+.cms .AssetAdmin .cms-content-fields { /** DEPRECATED: .cms-content-tools will be removed in 4.0 Use .cms-content-filters instead. */ }
+.cms .AssetAdmin .cms-content-fields .cms-edit-form.AssetAdmin { width: 100%; overflow-y: auto; }
 .cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content { overflow: hidden; }
 .cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form { height: 100%; }
 .cms .AssetAdmin .cms-content-toolbar .cms-page-add-button { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #d9d9d9)); background-image: -moz-linear-gradient(#f3f3f3, #d9d9d9); background-image: -webkit-linear-gradient(#f3f3f3, #d9d9d9); background-image: linear-gradient(#f3f3f3, #d9d9d9); border-color: #c0c0c2; }
diff --git a/javascript/CMSMain.js b/javascript/CMSMain.js
index e69de29b..db409dd9 100644
--- a/javascript/CMSMain.js
+++ b/javascript/CMSMain.js
@@ -0,0 +1,95 @@
+(function ($) {
+	/**
+	 * Behaviour for the CMS Content Toolbar.
+	 * Applies to tools on top-level views i.e. '/admin/pages' and '/admin/assets' and
+	 * their corresponding tools in the SiteTree panel.
+	 * An example is 'bulk actions' on the Pages view.
+	 */
+	$.entwine('ss', function ($) {
+
+		$('.cms-content-toolbar').entwine({
+
+			onmatch: function () {
+				var self = this;
+
+				this._super();
+
+				// Initialise the buttons
+				$.each(this.find('.cms-actions-buttons-row .tool-button'), function () {
+					var $button = $(this),
+						toolId = $button.data('toolid'),
+						isActive = $button.hasClass('active');
+
+					// We don't care about tools that don't have a related 'action'.
+					if (toolId !== void 0) {
+						// Set the tool to its closed state.
+						$button.data('active', false).removeClass('active');
+						$('#' + toolId).hide();
+
+						self.bindActionButtonEvents($button);
+					}
+				});
+			},
+
+			onunmatch: function () {
+				var self = this;
+
+				this._super();
+
+				$.each(this.find('.cms-actions-buttons-row .tool-button'), function () {
+					var $button = $(this);
+					self.unbindActionButtonEvents($button);
+				});
+			},
+
+			/**
+			 * @func bindActionButtonEvents
+			 * @param {object} $button
+			 * @desc Add event handlers in the '.cmsContentToolbar' namespace.
+			 */
+			bindActionButtonEvents: function ($button) {
+				var self = this;
+
+				$button.on('click.cmsContentToolbar', function (e) {
+					self.showHideTool($button);
+				});
+			},
+
+			/**
+			 * @func unbindActionButtonEvents
+			 * @param {object} $button
+			 * @desc Remove all event handlers in the '.cmsContentToolbar' namespace.
+			 */
+			unbindActionButtonEvents: function ($button) {
+				$button.off('.cmsContentToolbar');
+			},
+
+			/**
+			 * @func showTool
+			 * @param {object} $button
+			 * @desc Show a tool in the tools row. Hides all other tools.
+			 */
+			showHideTool: function ($button) {
+				var isActive = $button.data('active'),
+					toolId = $button.data('toolid'),
+					$action = $('#' + toolId);
+
+				// Hide all tools except the one passed as a param,
+				// which gets handled separately.
+				$.each(this.find('.cms-actions-buttons-row .tool-button'), function () {
+					var $currentButton = $(this),
+						$currentAction = $('#' + $currentButton.data('toolid'));
+
+					if ($currentButton.data('toolid') !== toolId) {
+						$currentAction.hide();
+						$currentButton.data('active', false);
+					}
+				});
+
+				$button[isActive ? 'removeClass' : 'addClass']('active');
+				$action[isActive ? 'hide' : 'show']();
+				$button.data('active', !isActive);
+			}
+		});
+	});
+}(jQuery));
diff --git a/javascript/CMSPageHistoryController.js b/javascript/CMSPageHistoryController.js
index 185418c7..682af966 100644
--- a/javascript/CMSPageHistoryController.js
+++ b/javascript/CMSPageHistoryController.js
@@ -121,7 +121,7 @@
 				var compare, selected;
 				
 				// compare mode
-				compare = this.parents("form").find(':input[name=CompareMode]').attr("checked"),
+				compare = this.parents("form").find(':input[name=CompareMode]').attr("checked");
 				selected = this.siblings(".active");
 				
 				if(compare && this.hasClass('active')) {
@@ -172,6 +172,6 @@
 				this.find(":input[type=checkbox]").attr("checked", true);
 			}
 			
-		})
+		});
 	});
 })(jQuery);
diff --git a/lang/en.yml b/lang/en.yml
index fddd9d22..1e86ebf4 100644
--- a/lang/en.yml
+++ b/lang/en.yml
@@ -91,9 +91,9 @@ en:
     ListFiltered: 'Filtered list.'
     NEWPAGE: 'New {pagetype}'
     PAGENOTEXISTS: 'This page doesn''t exist'
-    PAGES: Pages
+    PAGES: 'Page status'
     PAGETYPEANYOPT: Any
-    PAGETYPEOPT: 'Page Type'
+    PAGETYPEOPT: 'Page type'
     PUBALLCONFIRM: 'Please publish every page in the site, copying content stage to live'
     PUBALLFUN: '"Publish All" functionality'
     PUBALLFUN2: "Pressing this button will do the equivalent of going to every page and pressing \"publish\".  It's\n				intended to be used after there have been massive edits of the content, such as when the site was\n				first built."
@@ -115,13 +115,13 @@ en:
     TabContent: Content
     TabHistory: History
     TabSettings: Settings
-    TreeFiltered: 'Filtered tree.'
-    TreeFilteredClear: 'Clear filter'
+    TreeFiltered: 'Search results.'
+    TreeFilteredClear: Clear
     MENUTITLE: 'Edit Page'
     ARCHIVE: Archive
     ARCHIVEDPAGE: 'Archived page ''%s'''
   CMSMain_left_ss:
-    APPLY_FILTER: 'Apply Filter'
+    APPLY_FILTER: 'Search'
     RESET: Reset
     CLEAR_FILTER: 'Clear Filter'
   CMSPageAddController:
@@ -151,14 +151,14 @@ en:
     MENUTITLE: Pages
     TreeView: 'Tree View'
   CMSPagesController_ContentToolbar_ss:
-    MULTISELECT: Multi-selection
+    MULTISELECT: Bulk actions
   CMSPagesController_Tools_ss:
     FILTER: Filter
   CMSSearch:
     FILTERDATEFROM: From
-    FILTERDATEHEADING: Date
+    FILTERDATEHEADING: 'Date'
     FILTERDATETO: To
-    FILTERLABELTEXT: Content
+    FILTERLABELTEXT: 'Search'
   CMSSiteTreeFilter_ChangedPages:
     Title: 'Modified pages'
   CMSSiteTreeFilter_DeletedPages:
diff --git a/scss/_AssetAdmin.scss b/scss/_AssetAdmin.scss
index 3037c919..2e5624b4 100644
--- a/scss/_AssetAdmin.scss
+++ b/scss/_AssetAdmin.scss
@@ -1,15 +1,21 @@
 .cms .AssetAdmin {
 	.cms-content-fields {
-		overflow:hidden; //removes scrolling from filter panel
 		.cms-edit-form.AssetAdmin {
+			width: 100%;
 			overflow-y:auto; //adds scrolling only to the datagrid 
 		}
+
+		/**
+		 * DEPRECATED:
+		 * .cms-content-tools will be removed in 4.0
+		 * Use .cms-content-filters instead.
+		 */
 		.cms-content-tools .cms-panel-content {
 			overflow:hidden; //removes scollbar from search field in filter
 			.cms-search-form {
 				height:100%; //increases height of search form to accomodate dropdown
 			}
-		}	
+		}
 	}
 
 	.cms-content-toolbar {
diff --git a/scss/_CMSMain.scss b/scss/_CMSMain.scss
index abca80de..2e642a28 100644
--- a/scss/_CMSMain.scss
+++ b/scss/_CMSMain.scss
@@ -53,18 +53,20 @@
 	}
 }
 
-// Hide certain elements when shown in "sidebar mode"
-.cms-content-tools { 
+/**
+ * DEPRECATED:
+ * .cms-content-tools will be removed in 4.0
+ * Use .cms-content-filters instead.
+ *
+ * Hide certain elements when shown in "sidebar mode"
+ */
+.cms-content-tools {
 	#cms-content-treeview {
 		.cms-content-toolbar {
 			border-bottom:none;
 			box-shadow:none;
 			margin-bottom:8px;
 		}
-		.cms-tree-view-modes,
-		.cms-content-batchactions {
-			display: none;
-		}
 		.cms-tree-expand-trigger {
 			display: block;
 			float: left;
@@ -75,11 +77,6 @@
 		}
 
 		.cms-tree {
-			// Hide badges and drag icons to save space
-			.badge {
-				display: none;
-			}
-
 			// Show badge on hovered node
 			a:hover > .text > .badge, .jstree-clicked > .text > .badge {
 				display: inline-block;
@@ -88,6 +85,44 @@
 	}
 }
 
+/** --------------------------------------------
+ * The CMS Content Toolbar.
+ * Associated behaviour in CMSMain.js
+ * -------------------------------------------- */
+.cms-content-toolbar {
+	button.ss-ui-button {
+		padding: .4em .75em;
+		vertical-align: baseline;
+
+		&:hover {
+			@include box-shadow(none);
+		}
+
+		&:focus {
+			@include box-shadow(none);
+			outline: 0;
+		}
+
+		&:before {
+			font-size: 1.1em;
+		}
+
+		&.ui-state-focus {
+			@include box-shadow(none);
+		}
+
+		&.active {
+			@include box-shadow(0 0 5px #b3b3b3 inset);
+		}
+
+		.ui-button-text {
+			@include inline-block;
+			vertical-align: baseline;
+			padding: 0;
+		}
+	}
+}
+
 /** ------------------------------------------------------------------
  * URLSegment field
  * ----------------------------------------------------------------- */
diff --git a/templates/Includes/AssetAdmin_Content.ss b/templates/Includes/AssetAdmin_Content.ss
index 7b003f13..2859df98 100644
--- a/templates/Includes/AssetAdmin_Content.ss
+++ b/templates/Includes/AssetAdmin_Content.ss
@@ -4,30 +4,32 @@
 	<div class="cms-content-header north">
 		<div class="cms-content-header-info">
 			<% include BackLink_Button %>
-
-
 			<% with $Controller %>
 				<% include CMSBreadcrumbs %>
 			<% end_with %>
-
 		</div>
+
 		<% if $Fields.hasTabset %>
-			<% with $Fields.fieldByName('Root') %>
-			<div class="cms-content-header-tabs">
-				<ul class="cms-tabset-nav-primary">
-				<% loop $Tabs %>
-					<li<% if $extraClass %> class="$extraClass"<% end_if %>><a href="#$id">$Title</a></li>
-				<% end_loop %>
-				</ul>
-			</div>
-			<% end_with %>
+		<% with $Fields.fieldByName('Root') %>
+		<div class="cms-content-header-tabs">
+			<button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
+			<ul class="cms-tabset-nav-primary">
+			<% loop $Tabs %>
+				<li<% if $extraClass %> class="$extraClass"<% end_if %>><a href="#$id">$Title</a></li>
+			<% end_loop %>
+			</ul>
+		</div>
+		<% end_with %>
 		<% end_if %>
 	</div>
 
-	<div class="cms-content-fields center ui-widget-content" data-layout-type="border">
+	<div class="cms-content-fields center ui-widget-content cms-panel-padded" data-layout-type="border">
 		$Top.Tools
-		$forTemplate
+
+		<div class="cms-content-view">
+			$forTemplate
+		</div>
 	</div>
 	<% end_with %>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/Includes/AssetAdmin_Tools.ss b/templates/Includes/AssetAdmin_Tools.ss
index 74b8b47b..596a6530 100644
--- a/templates/Includes/AssetAdmin_Tools.ss
+++ b/templates/Includes/AssetAdmin_Tools.ss
@@ -1,9 +1,3 @@
-<div class="cms-content-tools west cms-panel cms-panel-layout collapsed" id="cms-content-tools-AssetAdmin" data-expandOnClick="true" data-layout-type="border">
-	<div class="cms-panel-content center">
-		<h3 class="cms-panel-header"><% _t('AssetAdmin_Tools.FILTER', 'Filter') %></h3>
-		$SearchForm
-	</div>
-	<div class="cms-panel-content-collapsed">
-		<h3 class="cms-panel-header"><% _t('AssetAdmin_Tools.FILTER', 'Filter') %></h3>
-	</div>
-</div>
\ No newline at end of file
+<div id="cms-content-filters-AssetAdmin" class="cms-content-filters">
+	$SearchForm
+</div>
diff --git a/templates/Includes/CMSMain_ListView.ss b/templates/Includes/CMSMain_ListView.ss
index 65a18c42..4c59220f 100644
--- a/templates/Includes/CMSMain_ListView.ss
+++ b/templates/Includes/CMSMain_ListView.ss
@@ -1,6 +1,4 @@
-<div class="cms-content-toolbar">
-	<% include CMSPagesController_ContentToolActions %>
-</div>
+<% include CMSPagesController_ContentToolActions %>
 
 <div class="ss-dialog cms-page-add-form-dialog cms-dialog-content" id="cms-page-add-form" title="<% _t('CMSMain.AddNew', 'Add new page') %>">
 	$AddForm
diff --git a/templates/Includes/CMSMain_TreeView.ss b/templates/Includes/CMSMain_TreeView.ss
index 3621dd91..b1ed362c 100644
--- a/templates/Includes/CMSMain_TreeView.ss
+++ b/templates/Includes/CMSMain_TreeView.ss
@@ -1,7 +1,4 @@
-<div class="cms-content-toolbar">
-	<% include CMSPagesController_ContentToolActions %>
-	<% include CMSPagesController_ContentToolbar %>
-</div>
+<% include CMSPagesController_ContentToolActions View='Tree' %>
 
 <div class="ss-dialog cms-page-add-form-dialog cms-dialog-content" id="cms-page-add-form" title="<% _t('CMSMain.AddNew', 'Add new page') %>">
 	$AddForm
@@ -12,9 +9,9 @@ $ExtraTreeTools
 <div class="center">
 	<% if $TreeIsFiltered %>
 	<div class="cms-tree-filtered cms-notice">
-		<strong><% _t('CMSMain.TreeFiltered', 'Filtered tree.') %></strong>
+		<strong><% _t('CMSMain.TreeFiltered', 'Search results.') %></strong>
 		<a href="$LinkPages" class="cms-panel-link">
-			<% _t('CMSMain.TreeFilteredClear', 'Clear filter') %>
+			<% _t('CMSMain.TreeFilteredClear', 'Clear') %>
 		</a>
 	</div>
 	<% end_if %>
diff --git a/templates/Includes/CMSPagesController_Content.ss b/templates/Includes/CMSPagesController_Content.ss
index 00e76fe3..cedf137b 100644
--- a/templates/Includes/CMSPagesController_Content.ss
+++ b/templates/Includes/CMSPagesController_Content.ss
@@ -6,6 +6,7 @@
 		</div>
 
 		<div class="cms-content-header-tabs">
+			<button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
 			<ul class="cms-tabset-nav-primary">
 				<li class="content-treeview<% if ViewState == tree %> ui-tabs-active ss-tabs-force-active<% end_if %> cms-tabset-icon tree">
 					<a href="#cms-content-treeview" class="cms-panel-link" data-href="$LinkTreeView"><% _t('CMSPagesController.TreeView', 'Tree View') %></a>
@@ -22,9 +23,8 @@
 		</div>
 	</div>
 
-	$Tools
-
 	<div class="cms-content-fields center ui-widget-content cms-panel-padded">
+		$Tools
 
 		<div class="cms-content-view cms-panel-deferred" id="cms-content-treeview" data-url="$LinkTreeView">
 			<%-- Lazy-loaded via ajax --%>
diff --git a/templates/Includes/CMSPagesController_ContentToolActions.ss b/templates/Includes/CMSPagesController_ContentToolActions.ss
index b3b8b6b4..ccf576e9 100644
--- a/templates/Includes/CMSPagesController_ContentToolActions.ss
+++ b/templates/Includes/CMSPagesController_ContentToolActions.ss
@@ -1,6 +1,19 @@
-<div class="cms-actions-row">
-	<a class="cms-page-add-button ss-ui-button ss-ui-action-constructive" data-icon="add" href="$LinkPageAdd" data-url-addpage="{$LinkPageAdd('', 'ParentID=%s')}"><% _t('CMSMain.AddNewButton', 'Add new') %></a>
-	<button href="$LinkPagesWithSearch" class="cms-tree-expand-trigger cms-panel-link ss-button" data-icon="pencil">
-		<% _t('CMSMain.EditTree', 'Edit Tree') %>
-	</button>
-</div>
\ No newline at end of file
+<div class="cms-content-toolbar">
+	<div class="cms-actions-buttons-row">
+		<a class="cms-page-add-button ss-ui-button ss-ui-action-constructive tool-button" data-icon="add" href="$LinkPageAdd" data-url-addpage="{$LinkPageAdd('', 'ParentID=%s')}"><% _t('CMSMain.AddNewButton', 'Add new') %></a>
+
+		<% if $View == 'Tree' %>
+		<button class="cms-content-batchactions-button tool-button font-icon-list" data-toolid="batch-actions">
+			<% _t("CMSPagesController_ContentToolbar_ss.MULTISELECT","Batch actions") %>
+		</button>
+		<% end_if %>
+	</div>
+
+	<div class="cms-actions-tools-row">
+		<% if $View == 'Tree' %>
+		<div id="batch-actions" class="cms-content-batchactions-dropdown tool-action">
+			$BatchActionsForm
+		</div>
+		<% end_if %>
+	</div>
+</div>
diff --git a/templates/Includes/CMSPagesController_ContentToolbar.ss b/templates/Includes/CMSPagesController_ContentToolbar.ss
deleted file mode 100644
index e99bd7ff..00000000
--- a/templates/Includes/CMSPagesController_ContentToolbar.ss
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="cms-content-batchactions">
-	<label class="view-mode-batchactions-wrapper">
-		<input id="view-mode-batchactions" name="view-mode-batchactions" type="checkbox" />
-		<span class="view-mode-batchactions-label"><% _t("CMSPagesController_ContentToolbar_ss.MULTISELECT","Multi-selection") %></span>
-	</label>
-
-	$BatchActionsForm
-</div>
diff --git a/templates/Includes/CMSPagesController_Tools.ss b/templates/Includes/CMSPagesController_Tools.ss
index d2b0accd..51ba1dc1 100644
--- a/templates/Includes/CMSPagesController_Tools.ss
+++ b/templates/Includes/CMSPagesController_Tools.ss
@@ -1,9 +1,3 @@
-<div class="cms-content-tools west cms-panel cms-panel-layout collapsed" data-expandOnClick="true" data-layout-type="border" id="cms-content-tools-CMSPagesController">
-	<div class="cms-panel-content center">
-		<h3 class="cms-panel-header"><% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %></h3>
-		$SearchForm
-	</div>
-	<div class="cms-panel-content-collapsed">
-		<h3 class="cms-panel-header"><% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %></h3>
-	</div>
-</div>
\ No newline at end of file
+<div id="cms-content-filters-CMSPagesController" class="cms-content-filters">
+	$SearchForm
+</div>
diff --git a/tests/behat/features/manage-files.feature b/tests/behat/features/manage-files.feature
index 3d7001c1..b101d1a7 100644
--- a/tests/behat/features/manage-files.feature
+++ b/tests/behat/features/manage-files.feature
@@ -62,24 +62,24 @@ Feature: Manage files
     Then I should see "png,"
 
   Scenario: I can filter the files list view using name
-    Given I expand the "Filter" CMS Panel
+    Given I expand the content filters
     And I fill in "Name" with "file1"
-    And I press the "Apply Filter" button
+    And I press the "Search" button
     Then the "Files" table should contain "file1"
     And the "Files" table should not contain "file2"
 
   Scenario: I can filter the files list view using filetype
     Given a "file" "assets/document.pdf"
-    And I expand the "Filter" CMS Panel
+    And I expand the content filters
     And I select "Image" from "File type" with javascript
-    And I press the "Apply Filter" button
+    And I press the "Search" button
     Then the "Files" table should contain "file1"
     And the "Files" table should not contain "document"
 
   Scenario: I can filter out files that don't match the date range
-    Given I expand the "Filter" CMS Panel
+    Given I expand the content filters
     And I fill in "From" with "2003-01-01"
     And I fill in "To" with "2011-01-01"
-    And I press the "Apply Filter" button
+    And I press the "Search" button
     And the "Files" table should contain "file2"
     And the "Files" table should not contain "file1"
diff --git a/tests/behat/features/search-for-a-page.feature b/tests/behat/features/search-for-a-page.feature
index 9416ad18..97beea17 100644
--- a/tests/behat/features/search-for-a-page.feature
+++ b/tests/behat/features/search-for-a-page.feature
@@ -9,18 +9,19 @@ Feature: Search for a page
 		And a "page" "Contact Us"
 		And I am logged in with "ADMIN" permissions
 		And I go to "/admin/pages"
-		And I expand the "Filter" CMS Panel
+		And I expand the content filters
+		And I wait for 2 seconds
 
 	Scenario: I can search for a page by its title
-		Given I fill in "Content" with "About Us"
-		And I press the "Apply Filter" button
+		Given I fill in "Search" with "About Us"
+		And I press the "Search" button
 		Then I should see "About Us" in the tree
 		But I should not see "Contact Us" in the tree
 
 	Scenario: I can search for a page by its type
 		Given a "Error Page" "My Error Page"
-		When I select "Error Page" from "Page Type"
-		And I press the "Apply Filter" button
+		When I select "Error Page" from "Page type"
+		And I press the "Search" button
 		Then I should see "My Error Page" in the tree
 		But I should not see "Contact Us" in the tree
 
@@ -28,7 +29,7 @@ Feature: Search for a page
 		Given a "page" "Recent Page"
 		And a "page" "Old Page" was last edited "7 days ago"
 		When I fill in "From" with "the date of 5 days ago"
-		And I press the "Apply Filter" button
+		And I press the "Search" button
 		Then I should see "Recent Page" in the tree
 		But I should not see "Old Page" in the tree
 
@@ -36,7 +37,7 @@ Feature: Search for a page
 		Given a "page" "Recent Page"
 		And a "page" "Old Page" was last edited "7 days ago"
 		When I fill in "To" with "the date of 5 days ago"
-		And I press the "Apply Filter" button
+		And I press the "Search" button
 		Then I should not see "Recent Page" in the tree
 		But I should see "Old Page" in the tree
 
@@ -44,30 +45,33 @@ Feature: Search for a page
 		Given a "page" "Deleted Page"
 		And the "page" "Deleted Page" is unpublished
 		And the "page" "Deleted Page" is deleted
-		When I press the "Apply Filter" button
+		When I press the "Search" button
 		Then I should not see "Deleted Page" in the tree
-		When I select "All pages, including archived" from "Pages"
-		And I press the "Apply Filter" button
+		When I expand the content filters
+		And I select "All pages, including archived" from "Page status"
+		And I press the "Search" button
 		Then I should see "Deleted Page" in the tree
 
 	Scenario: I can include only deleted pages in my search
 		Given a "page" "Deleted Page"
 		And the "page" "Deleted Page" is unpublished
 		And the "page" "Deleted Page" is deleted
-		When I press the "Apply Filter" button
+		When I press the "Search" button
 		Then I should not see "Deleted Page" in the tree
-		When I select "Archived pages" from "Pages"
-		And I press the "Apply Filter" button
+		When I expand the content filters
+		And I select "Archived pages" from "Page status"
+		And I press the "Search" button
 		Then I should see "Deleted Page" in the tree
 		And I should not see "About Us" in the tree
 
 	Scenario: I can include draft pages in my search
 		Given a "page" "Draft Page"
 		And the "page" "Draft Page" is not published
-		When I press the "Apply Filter" button
+		When I press the "Search" button
 		Then I should see "Draft Page" in the tree
-		When I select "Draft pages" from "Pages"
-		And I press the "Apply Filter" button
+		When I expand the content filters
+		And I select "Draft pages" from "Page status"
+		And I press the "Search" button
 		Then I should see "Draft Page" in the tree
 		And I should not see "About Us" in the tree
 
@@ -80,9 +84,9 @@ Feature: Search for a page
 		Then I should see "Saved" in the "button#Form_EditForm_action_save" element
 
 		When I go to "/admin/pages"
-		And I expand the "Filter" CMS Panel
-		When I select "Modified pages" from "Pages"
-		And I press the "Apply Filter" button
+		And I expand the content filters
+		When I select "Modified pages" from "Page status"
+		And I press the "Search" button
 		Then I should see "About Us" in the tree
 		And I should not see "Home" in the tree
 
@@ -90,10 +94,11 @@ Feature: Search for a page
 		Given a "page" "Live Page"
 		And the "page" "Live Page" is published
 		And the "page" "Live Page" is deleted
-		When I press the "Apply Filter" button
+		When I press the "Search" button
 		Then I should not see "Live Page" in the tree
-		When I select "Live but removed from draft" from "Pages"
-		And I press the "Apply Filter" button
+		When I expand the content filters
+		And I select "Live but removed from draft" from "Page status"
+		And I press the "Search" button
 		Then I should see "Live Page" in the tree
 		And I should not see "About Us" in the tree
 
@@ -106,8 +111,8 @@ Feature: Search for a page
 		And the "page" "Deleted Page" is unpublished
 		And the "page" "Deleted Page" is deleted
 
-		When I select "Published pages" from "Pages"
-		And I press the "Apply Filter" button
+		When I select "Published pages" from "Page status"
+		And I press the "Search" button
 		Then I should not see "Draft Page" in the tree
 		And I should not see "Deleted Page" in the tree
 		But I should see "Live Page" in the tree
\ No newline at end of file