From 80e6a5777c0c6a2c56ae921451981d25ccd8015d Mon Sep 17 00:00:00 2001
From: Andreas Fernandez <a.fernandez@scripting-base.de>
Date: Tue, 5 Sep 2023 10:12:51 +0200
Subject: [PATCH] [BUGFIX] Toggle checkmark when switching aspect ratio
The image cropper component uses buttons to let a backend user toggle
the currently active aspect ratio setting, indicated via an `active`
class and a checkmark icon. With the removal of Font Awesome in #97877,
some CSS was removed that was responsible for toggling the visibility of
the checkmark icons.
This patch adds the missing CSS again, including necessary adaptions to
Core's Icon API.
Resolves: #101788
Related: #97877
Releases: main, 12.4
Change-Id: I1daf428cafba3bc5f1e707c2763bf3f5dd6ba293
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/80842
Tested-by: core-ci <typo3@b13.com>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
---
Build/Sources/Sass/typo3/_element_cropper.scss | 4 ++++
typo3/sysext/backend/Resources/Public/Css/backend.css | 1 +
2 files changed, 5 insertions(+)
diff --git a/Build/Sources/Sass/typo3/_element_cropper.scss b/Build/Sources/Sass/typo3/_element_cropper.scss
index e068f150214d..e1a176cd8aa0 100644
--- a/Build/Sources/Sass/typo3/_element_cropper.scss
+++ b/Build/Sources/Sass/typo3/_element_cropper.scss
@@ -78,6 +78,10 @@
&.btn-default {
margin-bottom: 5px;
}
+
+ &:not(.active) .icon {
+ display: none;
+ }
}
}
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 32b4278658e9..dd98390233fa 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -3896,6 +3896,7 @@ typo3-notification-message .alert{box-shadow:var(--typo3-component-box-shadow);m
}
.cropper .ratio-buttons{margin-bottom:10px}
.cropper .ratio-buttons .btn.btn-default{margin-bottom:5px}
+.cropper .ratio-buttons .btn:not(.active) .icon{display:none}
.cropper .panel-group{position:relative;margin:-15px}
.cropper .panel-group [aria-expanded=true]{border-left:2px solid #ff8700;position:relative}
.cropper .panel-group [aria-expanded=true][data-bs-toggle=collapse]{background-color:#333}
--
GitLab