Merge pull request #6189 from open-sausages/pulls/4.0/split-pages-toolbar

Split top toolbar for Pages section

admin/client/dist/styles/bundle.css

@@ -9403,7 +9403,6 @@ body.cms{
 
 .cms-content-header .cms-content-header-info .section-icon{
   opacity:.2;
-  margin-right:4px;
   background-repeat:no-repeat;
 }
 
@@ -9444,8 +9443,6 @@ body.cms{
 .has-panel .cms-content-header.north.collapsed .cms-content-header-info{
   width:60px;
   text-align:center;
-  padding-left:8px;
-  padding-right:8px;
 }
 
 .has-panel .cms-content-header.north.collapsed .section-label,.has-panel .cms-content-header.north.collapsed .view-controls{
@@ -9457,19 +9454,7 @@ body.cms{
 }
 
 .has-panel .cms-content-header-info{
-  position:absolute;
-  top:0;
-  left:0;
-  bottom:1px;
-  width:300px;
   padding-bottom:8px;
-  padding-left:16px;
-  padding-right:16px;
-  box-shadow:1px 0 0 0 #ced3d9;
-}
-
-.has-panel .cms-content-header-nav{
-  margin-left:300px;
 }
 
 .has-panel .section-heading{
@@ -9478,7 +9463,8 @@ body.cms{
 }
 
 .has-panel .section-icon{
-  vertical-align:middle;
+  vertical-align:top;
+  margin-top:3px;
 }
 
 .has-panel .section-label{
@@ -10174,12 +10160,20 @@ body.cms{
 .cms-content-tools{
   background:#f6f7f8;
   width:300px;
-  z-index:70;
   box-shadow:1px 0 0 0 #ced3d9;
   z-index:1000;
   position:relative;
 }
 
+.cms-content-tools.collapsed .cms-content-header{
+  padding-left:0;
+  padding-right:0;
+}
+
+.cms-content-tools .cms-content-header-info{
+  float:none;
+}
+
 .cms-content-tools .cms-panel-header{
   clear:both;
   margin:10px 0 7px;
@@ -10196,13 +10190,6 @@ body.cms{
   margin-right:5px;
 }
 
-.cms-content-tools .cms-content-header{
-  background-color:#748d9d;
-  background-image:-webkit-gradient(linear,left top,left bottom,from(#b0bec7),to(#748d9d));
-  background-image:-webkit-linear-gradient(#b0bec7,#748d9d);
-  background-image:linear-gradient(#b0bec7,#748d9d);
-}
-
 .cms-content-tools .cms-content-header h2{
   text-shadow:#5c7382 -1px -1px 0;
   width:176px;

admin/client/src/legacy/LeftAndMain.js

@@ -735,7 +735,8 @@ $.entwine('ss', function($) {
         $.each(newFragments, function (newFragment, html) {
           var contentEl = $('[data-pjax-fragment]').filter(function () {
               return $.inArray(newFragment, $(this).data('pjaxFragment').split(' ')) != -1;
-          }), newContentEl = $(html);
+            }),
+            newContentEl = $(html);
 
           // Add to result collection
           if(newContentEls) newContentEls.add(newContentEl);

admin/client/src/styles/legacy/_style.scss

@@ -126,7 +126,6 @@ body.cms {
 
     .section-icon {
       opacity: 0.2;
-      margin-right: 4px;
       background-repeat: no-repeat;
     }
 
@@ -179,8 +178,6 @@ body.cms {
 			.cms-content-header-info {
 				width: 60px;
 				text-align: center;
-				padding-left: 8px;
-				padding-right: 8px;
 			}
 
       .view-controls,
@@ -195,19 +192,7 @@ body.cms {
   }
 
   .cms-content-header-info {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 1px;
-    width: $cms-panel-sm;
     padding-bottom: $grid-y;
-    padding-left: $grid-x * 2;
-    padding-right: $grid-x*2;
-    box-shadow: 1px 0 0 0 $border-color-dark;
-  }
-
-  .cms-content-header-nav {
-    margin-left: $cms-panel-sm;
   }
 
   .section-heading {
@@ -216,7 +201,8 @@ body.cms {
   }
 
   .section-icon {
-    vertical-align: middle;
+    vertical-align: top;
+    margin-top: 3px;
   }
 
   .section-label {
@@ -1062,11 +1048,19 @@ body.cms {
 .cms-content-tools {
 	background: $tab-panel-texture-color;
 	width: $cms-panel-sm;
-	z-index: 70;
 	box-shadow: 1px 0 0 0 $border-color-dark;
 	z-index: 1000;
 	position: relative;
 
+  &.collapsed .cms-content-header {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .cms-content-header-info {
+    float: none;
+  }
+
   .cms-panel-header {
     clear: both;
     margin: 10px 0 $grid-y - 1;
@@ -1083,17 +1077,12 @@ body.cms {
     }
   }
 
-  .cms-content-header {
+  .cms-content-header h2 {
-    background-color: darken($color-widget-bg, 40%);
-    background-image: linear-gradient(darken($color-widget-bg, 20%), darken($color-widget-bg, 40%));
-
-    h2 {
       text-shadow: darken($color-widget-bg, 50%) -1px -1px 0;
       width: $grid-x * 22 /* 24 - (padding on each side + margin) */;
       color: lighten($color-widget-bg, 60%);
       @include hide-text-overflow();
   }
-  }
 
   h3,h4,h5 {
     font-weight: bold;

admin/templates/SilverStripe/Admin/Includes/CMSBreadcrumbs.ss

@@ -1,4 +1,4 @@
-<div class="breadcrumbs-wrapper" data-pjax-fragment="Breadcrumbs">
+<div class="breadcrumbs-wrapper flexbox-area-grow" data-pjax-fragment="Breadcrumbs">
 	<h2 id="page-title-heading">
 		<% loop $Breadcrumbs %>
 			<% if $Last %>