Merge pull request #1858 from open-sausages/pulls/4.0/1780-cms-view-toggle

Visual updates to page view toggle

client/dist/styles/bundle.css

@@ -1 +1 @@
-#cms-page-history-versions tr.loading{color:#999}#cms-page-history-versions tr.loading td:hover{cursor:none}#cms-page-history-versions td:hover{cursor:pointer}.CMSPageHistoryController{overflow:hidden}.CMSPageHistoryController ins{background-color:#dfd;padding:2px;text-decoration:none}.CMSPageHistoryController del{background-color:#fdd;padding:2px;color:#f44}.CMSPageHistoryController .htmleditorfield.readonly img{max-width:100%;height:auto}.CMSPageHistoryController .cms-content-tools.collapsed{overflow:hidden}#cms-content-listview .cms-tree-expand-trigger,#cms-content-treeview .cms-tree-expand-trigger{display:none}.cms-content-tools #cms-content-treeview .cms-content-toolbar{border-bottom:none;-webkit-box-shadow:none;box-shadow:none;margin-bottom:0}.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger{display:block;float:left;margin:0 0 2px}.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 .jstree-clicked>.text>.badge,.cms-content-tools #cms-content-treeview .cms-tree a:hover>.text>.badge{display:inline-block}.field.urlsegment.loading{background:url(data:image/gif;base64,R0lGODlhEAAQAPQAAP///wpakvj6+z9+qYivyg9dlC5yotfk7KvG2R9om3umxGubveXt8py80sjZ5k+IsFyRtgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==) no-repeat 162px 8px}.field.urlsegment .URL-link{padding-top:8px;display:inline-block}.field.urlsegment input.text{width:250px;float:left}.field.urlsegment .cancel,.field.urlsegment .edit,.field.urlsegment .update,.field.urlsegment input.text{margin-right:8px}.field.urlsegment .help{margin-left:0}.field.urlsegment .edit-holder{display:none}.field.urlsegment .edit-holder .form__field-description{clear:both}#Form_EditForm #Title .update{margin-left:7px}
+#cms-page-history-versions tr.loading{color:#999}#cms-page-history-versions tr.loading td:hover{cursor:none}#cms-page-history-versions td:hover{cursor:pointer}.CMSPageHistoryController{overflow:hidden}.CMSPageHistoryController ins{background-color:#dfd;padding:2px;text-decoration:none}.CMSPageHistoryController del{background-color:#fdd;padding:2px;color:#f44}.CMSPageHistoryController .htmleditorfield.readonly img{max-width:100%;height:auto}.CMSPageHistoryController .cms-content-tools.collapsed{overflow:hidden}#cms-content-listview .cms-tree-expand-trigger,#cms-content-treeview .cms-tree-expand-trigger{display:none}.cms-content-tools #cms-content-treeview .cms-content-toolbar{border-bottom:none;-webkit-box-shadow:none;box-shadow:none;margin-bottom:0}.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger{display:block;float:left;margin:0 0 2px}.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 .jstree-clicked>.text>.badge,.cms-content-tools #cms-content-treeview .cms-tree a:hover>.text>.badge{display:inline-block}.cms-content-toolbar .view-controls{margin-top:0}.cms-content-toolbar .view-controls .page-view-link{display:none;margin-right:-5px}.cms-content-toolbar .view-controls.view-controls--listview .font-icon-tree,.cms-content-toolbar .view-controls.view-controls--treeview .font-icon-list{display:inline-block}.field.urlsegment.loading{background:url(data:image/gif;base64,R0lGODlhEAAQAPQAAP///wpakvj6+z9+qYivyg9dlC5yotfk7KvG2R9om3umxGubveXt8py80sjZ5k+IsFyRtgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==) no-repeat 162px 8px}.field.urlsegment .URL-link{padding-top:8px;display:inline-block}.field.urlsegment input.text{width:250px;float:left}.field.urlsegment .cancel,.field.urlsegment .edit,.field.urlsegment .update,.field.urlsegment input.text{margin-right:8px}.field.urlsegment .help{margin-left:0}.field.urlsegment .edit-holder{display:none}.field.urlsegment .edit-holder .form__field-description{clear:both}#Form_EditForm #Title .update{margin-left:7px}

client/src/styles/legacy/_CMSMain.scss

@@ -101,6 +101,30 @@
 	}
 }
 
+/* -------------------------------------------------------------------
+ * Sitetree tool bar
+ * ----------------------------------------------------------------- */
+.cms-content-toolbar {
+
+  .view-controls {
+    margin-top: 0;
+
+     .page-view-link {
+       display: none;
+       margin-right: -5px;
+     }
+
+     &.view-controls--treeview .font-icon-list {
+       display: inline-block;
+     }
+
+     &.view-controls--listview .font-icon-tree {
+       display: inline-block;
+     }
+  }
+
+}
+
 /** ------------------------------------------------------------------
  * URLSegment field
  * ----------------------------------------------------------------- */

templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Filter.ss

@@ -0,0 +1,4 @@
+<div class="view-controls">
+    <button id="filters-button" class="btn btn-secondary icon-button font-icon-search btn--icon-large no-text" title="<% _t('SilverStripe\CMS\Controllers\CMSPagesController.FILTER', 'Filter') %>"></button>
+</div>
+

templates/SilverStripe/CMS/Controllers/Includes/CMSMain_Tools.ss

@@ -2,10 +2,9 @@
 	<div class="cms-content-header north">
 		<div class="cms-content-header-info">
 			<div class="section-heading">
-			<% include SilverStripe\\Admin\\CMSSectionIcon %>
 				<span class="section-label"><a href="$LinkPages">{$MenuCurrentItem.Title}</a></span>
 			</div>
-			<% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content' %>
+            <% include SilverStripe\\CMS\\Controllers\\CMSMain_Filter %>
 		</div>
 	</div>
 	<div class="panel panel--scrollable flexbox-area-grow fill-height cms-panel-content">

templates/SilverStripe/CMS/Controllers/Includes/CMSMain_ViewControls.ss

@@ -1,17 +1,15 @@
-<div class="view-controls">
+<div class="view-controls view-controls--{$ViewState}">
-	<button id="filters-button" class="btn btn-secondary icon-button font-icon-search btn--icon-large no-text" title="<% _t('SilverStripe\CMS\Controllers\CMSPagesController.FILTER', 'Filter') %>"></button>
-	<div class="icon-button-group">
     <%-- Change to data-pjax-target="Content-PageList" to enable in-edit listview --%>
-		<a class="cms-panel-link icon-button font-icon-tree page-view-link <% if $ViewState == 'treeview' %>active<% end_if %>"
+    <a class="page-view-link btn btn-secondary btn--icon-sm btn--no-text font-icon-tree"
         href="$LinkTreeView.ATT"
         data-view="treeview"
         data-pjax-target="$PJAXTarget.ATT"
         title="<% _t('SilverStripe\CMS\Controllers\CMSPagesController.TreeView', 'Tree View') %>"
-		></a><a class="cms-panel-link icon-button font-icon-list page-view-link <% if $ViewState == 'listview' %>active<% end_if %>"
+    ></a>
+    <a class="page-view-link btn btn-secondary btn--icon-sm btn--no-text font-icon-list"
         href="$LinkListView.ATT"
         data-view="listview"
         data-pjax-target="$PJAXTarget.ATT"
         title="<% _t('SilverStripe\CMS\Controllers\CMSPagesController.ListView', 'List View') %>"
     ></a>
 </div>
-</div>

templates/SilverStripe/CMS/Controllers/Includes/CMSPagesController_Content.ss

@@ -3,7 +3,7 @@
 	<div class="cms-content-header north">
 		<div class="cms-content-header-info fill-width">
 			<% include SilverStripe\\Admin\\CMSBreadcrumbs %>
-			<% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content-PageList' %>
+            <% include SilverStripe\\CMS\\Controllers\\CMSMain_Filter %>
 		</div>
 	</div>
 

templates/SilverStripe/CMS/Controllers/Includes/CMSPagesController_ContentToolActions.ss

@@ -3,12 +3,15 @@
 		<a class="btn btn-primary cms-content-addpage-button tool-button font-icon-plus" href="$LinkPageAdd" data-url-addpage="{$LinkPageAdd('', 'ParentID=%s')}"><% _t('SilverStripe\CMS\Controllers\CMSMain.AddNewButton', 'Add new') %></a>
 
 		<% if $View == 'Tree' %>
-		<button type="button" class="cms-content-batchactions-button btn btn-secondary tool-button font-icon-check-mark-2" data-toolid="batch-actions">
+		<button type="button" class="cms-content-batchactions-button btn btn-secondary tool-button font-icon-check-mark-2 btn--last" data-toolid="batch-actions">
 			<% _t("SilverStripe\CMS\Controllers\CMSPageHistoryController.MULTISELECT","Batch actions") %>
 		</button>
 		<% end_if %>
+
+        <% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content-PageList' %>
 	</div>
 
+
 	<div class="cms-actions-tools-row">
 		<% if $View == 'Tree' %>
 		<div id="batch-actions" class="cms-content-batchactions-dropdown tool-action">