From aac7023828d6d5da3a529a32363f0dd09dfa1883 Mon Sep 17 00:00:00 2001 From: Guy Sartorelli <36352093+GuySartorelli@users.noreply.github.com> Date: Tue, 26 Nov 2024 16:46:53 +1300 Subject: [PATCH] ENH Include versioned status flag styling (#372) This used to be in silverstripe/admin for some reason --- client/dist/styles/bundle.css | 2 +- client/src/styles/bundle.scss | 1 + client/src/styles/legacy/_badges.scss | 15 +++++++++++++++ tests/Behat/features/restore-to-draft.feature | 6 ++++-- 4 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 client/src/styles/legacy/_badges.scss diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css index 13293fed..d0504bd4 100644 --- a/client/dist/styles/bundle.css +++ b/client/dist/styles/bundle.css @@ -1 +1 @@ -#Form_EditForm_OtherDropdown_Holder{display:flex;flex-direction:column;align-items:center;margin:-1.5385rem -1.5385rem 0;border-bottom:1px solid rgb(206.0738636364,213.2556818182,224.9261363636);padding:3.077rem 3.077rem;background-color:#fff}#Form_EditForm_error.good+fieldset>#Form_EditForm_OtherDropdown_Holder,#Form_EditForm_error.warning+fieldset>#Form_EditForm_OtherDropdown_Holder,#Form_EditForm_error.info+fieldset>#Form_EditForm_OtherDropdown_Holder{margin-top:0}#Form_EditForm_OtherDropdown_Holder:after{border-bottom:0}#Form_EditForm_OtherDropdown_Holder .form__field-label{max-width:none;width:auto;margin-bottom:.9231rem;color:rgb(86.4147727273,107.0511363636,140.5852272727);font-size:19px}#Form_EditForm_OtherDropdown_Holder .form__field-holder{width:100%;max-width:23rem}.history-viewer>.panel--padded{padding-top:0}.history-viewer.history-viewer__compare-mode .panel--padded{padding-top:30px}.history-viewer--no-margins{margin-left:-1.5385rem;margin-right:-1.5385rem}.panel--padded-side{padding-bottom:0;padding-top:0}.history-viewer__form{position:relative}.history-viewer__version-state .text-muted{margin-right:10px}.history-viewer__compare-button{border:1px solid #fff;color:#fff;margin-right:1rem}.history-viewer__close-button{background:rgba(0,0,0,0);border:1px solid #fff;border-radius:50%;color:#fff;padding:.4rem .55rem}.history-viewer__close-button:before{font-size:1.4rem}.history-viewer__messages .message-box:first-child{margin-top:1.5385rem}.history-viewer__messages .message-box:last-child{margin-bottom:0}.history-viewer__preview{margin-top:-54px}.history-viewer__toolbar--condensed{min-width:50%;width:50%}.history-viewer__version-detail-diff del{display:inline-block;background-color:#ffd2da;border-radius:1px}.history-viewer__version-detail-diff ins{display:inline-block;background-color:#b9f1c8;border-radius:1px;text-decoration:none}@media(max-width: 991.98px){.history-viewer__preview{display:none}}.history-viewer__compare-notice{border-top:0;border-radius:0 0 .23rem .23rem;padding:0;position:absolute;left:50%;transform:translateX(-50%)}.history-viewer__compare-notice .notice-message{padding:.4rem 1rem .4rem 1.5rem;vertical-align:middle}.history-viewer__compare-notice button{background-color:inherit;color:inherit;border-width:0 0 0 1px;border-color:rgb(189.0458015267,224.465648855,240.9541984733);margin-right:0;border-radius:0 0 .23rem}.history-viewer__compare-notice button:hover{background-color:rgb(189.0458015267,224.465648855,240.9541984733)}.history-viewer__actions-dropdown .form-check-label{text-transform:none}.history-viewer__actions-dropdown .btn[class*=font-icon-]:before{margin-right:0}.history-viewer__actions-dropdown.show .dropdown-menu{min-width:14rem}.history-viewer__actions-dropdown .form-check{margin-top:.5rem}.history-viewer__heading{font-size:.923rem;text-transform:uppercase}.history-viewer__row--current .history-viewer__version-link{cursor:default}.history-viewer__selected-message{display:none}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected .history-viewer__close-button{display:none}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected .history-viewer__selected-message{display:block}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:hover .history-viewer__selected-message,.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:focus-within .history-viewer__selected-message{display:none}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:hover .history-viewer__close-button,.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:focus-within .history-viewer__close-button{display:block}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:hover .history-viewer__selected-message,.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:focus .history-viewer__selected-message{display:none}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:hover .history-viewer__close-button,.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:focus .history-viewer__close-button{display:block}.history-viewer__table{padding:0}.history-viewer__table--current{margin-bottom:.76925rem}.history-viewer__table--current .history-viewer__version-link:hover{cursor:default}.history-viewer__table li{display:flex;list-style-type:none}.history-viewer__table--comparison-selected{margin-bottom:0;border-bottom:5px solid rgb(47.5852272727,58.9488636364,77.4147727273)}.history-viewer__row--comparison-selected:last-child{border-bottom:0}.history-viewer__heading,.history-viewer__row{border-bottom:1px solid rgb(218.7079545455,224.0352272727,232.6920454545)}.history-viewer__row{background-color:#fff}.history-viewer__row:hover,.history-viewer__row:active{background-color:#f0f4f7}.history-viewer__version-link{color:inherit;cursor:pointer;display:flex;flex-grow:1}.history-viewer__version-link:hover,.history-viewer__version-link:active{color:inherit;text-decoration:none}.history-viewer__version-no,.history-viewer__version-state,.history-viewer__author,.history-viewer__actions{padding:1.2308rem}.history-viewer__version-no{width:3.7%}.history-viewer__version-state,.history-viewer__author{flex-grow:1;width:50%}.history-viewer__actions{padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:flex-end;min-width:12rem}.table .history-viewer__row--current,.table .history-viewer__row--current:hover{background-color:#0071c4;color:#fff}.table .history-viewer__row--current .text-muted{color:#fff !important}.history-viewer__pagination select{width:auto} +#Form_EditForm_OtherDropdown_Holder{display:flex;flex-direction:column;align-items:center;margin:-1.5385rem -1.5385rem 0;border-bottom:1px solid rgb(206.0738636364,213.2556818182,224.9261363636);padding:3.077rem 3.077rem;background-color:#fff}#Form_EditForm_error.good+fieldset>#Form_EditForm_OtherDropdown_Holder,#Form_EditForm_error.warning+fieldset>#Form_EditForm_OtherDropdown_Holder,#Form_EditForm_error.info+fieldset>#Form_EditForm_OtherDropdown_Holder{margin-top:0}#Form_EditForm_OtherDropdown_Holder:after{border-bottom:0}#Form_EditForm_OtherDropdown_Holder .form__field-label{max-width:none;width:auto;margin-bottom:.9231rem;color:rgb(86.4147727273,107.0511363636,140.5852272727);font-size:19px}#Form_EditForm_OtherDropdown_Holder .form__field-holder{width:100%;max-width:23rem}.badge.status-addedtodraft{background-color:#fff2ea;border-color:#cf3f00}.badge.status-addedtodraft{color:#cf3f00}.badge.status-modified{background-color:#fff2ea;border-color:#cf3f00}.badge.status-modified{color:#cf3f00}.badge.status-archived{background-color:#f1f3f6;border-color:#455b6c}.badge.status-archived{color:#455b6c}.badge.status-deletedonlive{background-color:#f1f3f6;border-color:#455b6c}.badge.status-deletedonlive{color:#455b6c}.badge.status-removedfromdraft{background-color:#f1f3f6;border-color:#455b6c}.badge.status-removedfromdraft{color:#455b6c}.history-viewer>.panel--padded{padding-top:0}.history-viewer.history-viewer__compare-mode .panel--padded{padding-top:30px}.history-viewer--no-margins{margin-left:-1.5385rem;margin-right:-1.5385rem}.panel--padded-side{padding-bottom:0;padding-top:0}.history-viewer__form{position:relative}.history-viewer__version-state .text-muted{margin-right:10px}.history-viewer__compare-button{border:1px solid #fff;color:#fff;margin-right:1rem}.history-viewer__close-button{background:rgba(0,0,0,0);border:1px solid #fff;border-radius:50%;color:#fff;padding:.4rem .55rem}.history-viewer__close-button:before{font-size:1.4rem}.history-viewer__messages .message-box:first-child{margin-top:1.5385rem}.history-viewer__messages .message-box:last-child{margin-bottom:0}.history-viewer__preview{margin-top:-54px}.history-viewer__toolbar--condensed{min-width:50%;width:50%}.history-viewer__version-detail-diff del{display:inline-block;background-color:#ffd2da;border-radius:1px}.history-viewer__version-detail-diff ins{display:inline-block;background-color:#b9f1c8;border-radius:1px;text-decoration:none}@media(max-width: 991.98px){.history-viewer__preview{display:none}}.history-viewer__compare-notice{border-top:0;border-radius:0 0 .23rem .23rem;padding:0;position:absolute;left:50%;transform:translateX(-50%)}.history-viewer__compare-notice .notice-message{padding:.4rem 1rem .4rem 1.5rem;vertical-align:middle}.history-viewer__compare-notice button{background-color:inherit;color:inherit;border-width:0 0 0 1px;border-color:rgb(189.0458015267,224.465648855,240.9541984733);margin-right:0;border-radius:0 0 .23rem}.history-viewer__compare-notice button:hover{background-color:rgb(189.0458015267,224.465648855,240.9541984733)}.history-viewer__actions-dropdown .form-check-label{text-transform:none}.history-viewer__actions-dropdown .btn[class*=font-icon-]:before{margin-right:0}.history-viewer__actions-dropdown.show .dropdown-menu{min-width:14rem}.history-viewer__actions-dropdown .form-check{margin-top:.5rem}.history-viewer__heading{font-size:.923rem;text-transform:uppercase}.history-viewer__row--current .history-viewer__version-link{cursor:default}.history-viewer__selected-message{display:none}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected .history-viewer__close-button{display:none}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected .history-viewer__selected-message{display:block}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:hover .history-viewer__selected-message,.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:focus-within .history-viewer__selected-message{display:none}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:hover .history-viewer__close-button,.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:focus-within .history-viewer__close-button{display:block}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:hover .history-viewer__selected-message,.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:focus .history-viewer__selected-message{display:none}.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:hover .history-viewer__close-button,.history-viewer__table--headerless .history-viewer__row--current.history-viewer__row--comparison-selected:focus .history-viewer__close-button{display:block}.history-viewer__table{padding:0}.history-viewer__table--current{margin-bottom:.76925rem}.history-viewer__table--current .history-viewer__version-link:hover{cursor:default}.history-viewer__table li{display:flex;list-style-type:none}.history-viewer__table--comparison-selected{margin-bottom:0;border-bottom:5px solid rgb(47.5852272727,58.9488636364,77.4147727273)}.history-viewer__row--comparison-selected:last-child{border-bottom:0}.history-viewer__heading,.history-viewer__row{border-bottom:1px solid rgb(218.7079545455,224.0352272727,232.6920454545)}.history-viewer__row{background-color:#fff}.history-viewer__row:hover,.history-viewer__row:active{background-color:#f0f4f7}.history-viewer__version-link{color:inherit;cursor:pointer;display:flex;flex-grow:1}.history-viewer__version-link:hover,.history-viewer__version-link:active{color:inherit;text-decoration:none}.history-viewer__version-no,.history-viewer__version-state,.history-viewer__author,.history-viewer__actions{padding:1.2308rem}.history-viewer__version-no{width:3.7%}.history-viewer__version-state,.history-viewer__author{flex-grow:1;width:50%}.history-viewer__actions{padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:flex-end;min-width:12rem}.table .history-viewer__row--current,.table .history-viewer__row--current:hover{background-color:#0071c4;color:#fff}.table .history-viewer__row--current .text-muted{color:#fff !important}.history-viewer__pagination select{width:auto} diff --git a/client/src/styles/bundle.scss b/client/src/styles/bundle.scss index 277b807d..f211813a 100644 --- a/client/src/styles/bundle.scss +++ b/client/src/styles/bundle.scss @@ -6,6 +6,7 @@ // Legacy @import "legacy/ArchiveAdmin"; +@import "legacy/badges"; // Components @import "../components/HistoryViewer/HistoryViewer"; diff --git a/client/src/styles/legacy/_badges.scss b/client/src/styles/legacy/_badges.scss new file mode 100644 index 00000000..ed7b7725 --- /dev/null +++ b/client/src/styles/legacy/_badges.scss @@ -0,0 +1,15 @@ +@mixin badge-status($label, $textColor, $bgColor) { + .badge.status-#{$label} { + background-color: $bgColor; + border-color: $textColor; + } + .badge.status-#{$label} { + color: $textColor; + } +} + +@include badge-status('addedtodraft', #cf3f00, #fff2ea); +@include badge-status('modified', #cf3f00, #fff2ea); +@include badge-status('archived', #455b6c, #f1f3f6); +@include badge-status('deletedonlive', #455b6c, #f1f3f6); +@include badge-status('removedfromdraft', #455b6c, #f1f3f6); diff --git a/tests/Behat/features/restore-to-draft.feature b/tests/Behat/features/restore-to-draft.feature index 4405f7c0..aab2b7e7 100644 --- a/tests/Behat/features/restore-to-draft.feature +++ b/tests/Behat/features/restore-to-draft.feature @@ -17,8 +17,10 @@ Feature: Restore to draft Scenario: I can restore archived version to draft When I go to "/admin/archive" - Then I should see "MyPage" in the "#Form_EditForm" element - Then I click "MyPage" in the "#Form_EditForm" element + Then I should see "MyPage" in the "#Form_EditForm .col-Title" element + # Need to use "directly" here or it will think the badge is part of the text in the element + # which results in thinking it's not a match ("MyPageArchived" !== "MyPage") + Then I click "MyPage" directly in the "#Form_EditForm .col-Title" element Then I press the "Restore to draft" button Then I should see "Successfully restored the page" in the "#Form_EditForm" element When I go to "/admin/pages"