Merge pull request #1221 from flashbackzoo/pulls/ux-update-filters

UX improvements

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'),

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

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; }

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));

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);

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:

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 {

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
  * ----------------------------------------------------------------- */

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>
+</div>

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>
+<div id="cms-content-filters-AssetAdmin" class="cms-content-filters">
+	$SearchForm
+</div>

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

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 %>

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 --%>

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>
+<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>

templates/Includes/CMSPagesController_ContentToolbar.ss

@@ -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>

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>
+<div id="cms-content-filters-CMSPagesController" class="cms-content-filters">
+	$SearchForm
+</div>

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"

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