Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ENH Allow status flags to be used generically #1856

Merged
merged 1 commit into from
Nov 26, 2024
Merged

ENH Allow status flags to be used generically #1856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/dist/styles/bundle.css
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 0 additions & 19 deletions client/src/components/GridField/GridField.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
}
1 change: 1 addition & 0 deletions client/src/styles/bundle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
@import "legacy/popover-actions-simulate";
@import "legacy/GridField";
@import "legacy/SelectionGroup";
@import "legacy/badges";

// Components
@import "../components/Accordion/Accordion";
Expand Down
25 changes: 4 additions & 21 deletions client/src/styles/legacy/GridField.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Comment on lines -162 to -181
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These were moved into the relevant modules - versioned-admin and advanced-workflow.

}

a.view-link {
Expand Down Expand Up @@ -417,3 +396,7 @@
padding: $grid-gutter-width;
}
}

.ss-gridfield-badge.badge {
margin-left: 5px;
}
16 changes: 16 additions & 0 deletions client/src/styles/legacy/_badges.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.badge {
display: inline-block;
background-color: $color-notice;
border-color: transparent;
color: $body-color-dark;
Comment on lines +3 to +5
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These colours are fairly arbitrary but look nice as a default IMO. Only custom flags will use this styling, all of the versioned/fluent flags still use the colours they used to use.

// Badges with no text aren't displayed
&:empty {
display: none;
}
}
Comment on lines +6 to +10
Copy link
Member Author

@GuySartorelli GuySartorelli Nov 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This already gets inherited from bootstrap, but it surprised me at first. Adding it here so it's explicitly intended behaviour.
Fluent relies on this for something that probably shouldn't be using status flags but I don't want to widen the scope to unpicking that right now.


.badge--breadcrumbs {
border-width: 1px;
border-style: solid;
margin-left: $btn-spacing;
}
6 changes: 4 additions & 2 deletions client/src/styles/legacy/_style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Comment on lines +122 to +124
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Required to respect the display:none on empty badges.

display: inline-block;
}

.section-icon {
Expand Down
12 changes: 7 additions & 5 deletions client/src/styles/legacy/_tree.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion templates/SilverStripe/Admin/Includes/CMSBreadcrumbs.ss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.CurrentPageID %>$Top.CurrentPage.StatusFlagMarkup("badge--breadcrumbs")<% end_if %></span>
<% else %>
<a class="cms-panel-link crumb" href="$Link">$Title</a>
<span class="sep">/</span>
Expand Down
20 changes: 20 additions & 0 deletions tests/behat/features/gridfield-status-flags.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@retry @job1
Feature: Search in GridField
As a content author
I want to see the status flags for records in gridfields
So that I can see at a glance what state my data is in

Background:
Given the "Company" "Walmart" with "Category"="Retail"
And the "group" "EDITOR" has permissions "Access to 'Pages' section" and "Access to 'GridField Test Navigation' section" and "TEST_DATAOBJECT_EDIT"
And I am logged in as a member of "EDITOR" group

Scenario: I see status flags in gridfields
When I go to "/admin/gridfield-test-navigation"
And I should see "Walmart" in the "#Form_EditForm .col-Name" element
And I should see "string-flag" in the "#Form_EditForm .col-Name .badge.status-company-status-flag1" element
And I should see "array-flag" in the "#Form_EditForm .col-Name .badge.status-company-status-flag2" element
Then I click "Walmart" in the "#Form_EditForm" element
And I should see "Walmart" in the ".breadcrumbs-wrapper" element
And I should see "string-flag" in the ".breadcrumbs-wrapper .badge.status-company-status-flag1" element
And I should see "array-flag" in the ".breadcrumbs-wrapper .badge.status-company-status-flag2" element
Loading