ENH Allow status flags to be used generically

Take styling for versioned badges in their various places and centralise it as a more generic badge, plus ensure LeftAndMain breadcrumbs include status flags
silverstripe · Nov 20, 2024 · 2654029 · 2654029
1 parent 883d6e0
commit 2654029
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 49 deletions.
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/GridField/GridField.scss b/client/src/components/GridField/GridField.scss
@@ -210,11 +210,6 @@ div.grid-field__sort-field + .form__fieldgroup-item {
   &:hover .grid-field__icon-action--hidden-on-hover {
     opacity: 1;
   }
-
-  .ss-gridfield-badge {
-    color: $state-draft;
-    padding: 0;
-  }
 }
 
 // Grid-field body
@@ -288,17 +283,3 @@ div.grid-field__sort-field + .form__fieldgroup-item {
 .import-form .advanced {
   display: none;
 }
-
-.version-status {
-  border: 1px solid $border-color-light;
-  background-color: $white;
-  margin-left: $btn-spacing;
-
-  &.version-status--addedtodraft {
-    color: $state-draft;
-  }
-
-  &.version-status--modified {
-    color: $state-modified;
-  }
-}
diff --git a/client/src/styles/bundle.scss b/client/src/styles/bundle.scss
@@ -29,6 +29,7 @@
 @import "legacy/popover-actions-simulate";
 @import "legacy/GridField";
 @import "legacy/SelectionGroup";
+@import "legacy/badges";
 
 // Components
 @import "../components/Accordion/Accordion";

diff --git a/client/src/styles/legacy/GridField.scss b/client/src/styles/legacy/GridField.scss
@@ -158,27 +158,6 @@
             border-radius: 2px;
             font-weight: normal;
           }
-
-          span.badge.status-modified {
-            color: $state-draft;
-          }
-
-          span.badge.status-addedtodraft {
-            color: $state-draft;
-          }
-
-          span.badge.status-deletedonlive,
-          span.badge.status-removedfromdraft {
-            color: #636363;
-            border: 1px solid #E49393;
-            background-color: #F2DADB;
-          }
-
-          span.badge.status-workflow-approval {
-            color: #56660C;
-            border: 1px solid #7C8816;
-            background-color: #DAE79A;
-          }
         }
 
         a.view-link {

diff --git a/client/src/styles/legacy/_badges.scss b/client/src/styles/legacy/_badges.scss
@@ -0,0 +1,16 @@
+.badge {
+  display: inline-block;
+  background-color: $color-notice;
+  border-color: transparent;
+  color: $body-color-dark;
+  // Badges with no text aren't displayed
+  &:empty {
+    display: none;
+  }
+}
+
+.badge--breadcrumbs {
+  border-width: 1px;
+  border-style: solid;
+  margin-left: $btn-spacing;
+}
diff --git a/client/src/styles/legacy/_style.scss b/client/src/styles/legacy/_style.scss
@@ -119,8 +119,10 @@ html, body {
     min-height: $toolbar-height;
     min-width: 250px;
 
-    * {
-      display: inline-block; // align back button and breadcrumbs
+    // align back button and breadcrumbs
+    // but specifically do NOT override badge display
+    *:not(.badge) {
+      display: inline-block;
     }
 
     .section-icon {

diff --git a/client/src/styles/legacy/_tree.scss b/client/src/styles/legacy/_tree.scss
@@ -654,6 +654,12 @@
     margin: 0;
     max-width: 40%;
     transition: max-width .75s linear;
+
+    // After the first badge, stop displaying.
+    // There's only enough space for a single badge in this view.
+    ~ .badge {
+      display: none;
+    }
   }
   span.badge:hover {
     max-width: 150px;
@@ -700,14 +706,10 @@ a .jstree-pageicon {
   }
   // Labels
   .jstree .status-#{$label} > .jstree-hovered,
-  .jstree .status-#{$label} > .jstree-clicked,
-  .cms-tree.jstree span.badge.status-#{$label}  {
+  .jstree .status-#{$label} > .jstree-clicked {
     background-color:$bgColor;
     border-color:$textColor;
   }
-  .cms-tree.jstree span.badge.status-#{$label}  {
-    color: $textColor;
-  }
   // Dots
   .cms-tree.jstree .status-#{$label} > a .jstree-pageicon:after  {
     background-color:$dotColor;

diff --git a/templates/SilverStripe/Admin/Includes/CMSBreadcrumbs.ss b/templates/SilverStripe/Admin/Includes/CMSBreadcrumbs.ss
@@ -1,7 +1,7 @@
 <div class="breadcrumbs-wrapper flexbox-area-grow" data-pjax-fragment="Breadcrumbs">
 	<% loop $Breadcrumbs %>
 		<% if $IsLast %>
-			<span class="cms-panel-link crumb last">$Title<% if $Extra %>$Extra<% end_if %></span>
+			<span class="cms-panel-link crumb last">$Title<% if $Extra %>$Extra<% end_if %><% if $Top.CurrentPage %>$Top.CurrentPage.StatusFlagMarkup("badge--breadcrumbs badge")<% end_if %></span>
 		<% else %>
 			<a class="cms-panel-link crumb" href="$Link">$Title</a>
 			<span class="sep">/</span>