FlexRepeater: rotating caret icon for collapse state#430
Closed
danspringer wants to merge 1 commit into
Closed
Conversation
Replaces the previous fa-square-o / fa-minus toggle on the item-collapse, nested-toggle and toggle-all buttons with a single fa-caret-square-o-down icon that rotates 180° via CSS when the item is open. The caret direction makes the expand/collapse affordance obvious at a glance (compared to the hard-to-read empty-square vs. minus combination) and the rotation gives a smooth visual transition between states. - PHP: initial icon class changed in MFormParser (template + toggle-all) and MFormFlexRepeaterRenderer (nested toggle). - JS: setCollapseIconState() and the toggle-all updater now keep the caret icon fixed and only toggle a `mfr-icon-open` state class. Also cleans up legacy `fa-square-o` / `fa-minus` classes if present, so existing markup re-renders correctly after upgrade. - CSS: `.mfr-icon-open` rotates the caret 180° with a 180ms transition.
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
WalkthroughMoin! Diese PR aktualisiert die visuelle Darstellung von Collapse- und Toggle-Icons in der Flex-Repeater-Komponente durchgehend: Das FontAwesome-Icon wechselt von ChangesFlex Repeater Icon Visual Update
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Updates the FlexRepeater collapse/expand affordance by switching to a single caret-square icon and indicating the open state via a 180° rotation, improving visual clarity across top-level, nested, and “toggle all” controls.
Changes:
- Update PHP-rendered button markup to use
fa-caret-square-o-downas the base icon. - Adjust JS icon updates to keep the caret icon class fixed and toggle a state class (
.mfr-icon-open), while cleaning up legacyfa-square-o/fa-minus. - Add CSS to animate icon rotation via
transformwith a short transition.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| lib/MForm/Parser/MFormParser.php | Switches FlexRepeater item template + toggle-all button icon to caret-square-down. |
| lib/MForm/FlexRepeater/MFormFlexRepeaterRenderer.php | Switches nested repeater toggle icon to caret-square-down. |
| assets/js/flex-repeater.js | Updates icon state handling to toggle .mfr-icon-open and remove legacy FA classes. |
| assets/css/flex-repeater.css | Adds rotation + transition rules for collapse/toggle icons when open. |
Comment on lines
1303
to
+1307
| const icon = btn.querySelector('i'); | ||
| if (icon) { | ||
| icon.classList.toggle('fa-square-o', hasCollapsed); | ||
| icon.classList.toggle('fa-minus', !hasCollapsed); | ||
| icon.classList.add('fa-caret-square-o-down'); | ||
| icon.classList.remove('fa-square-o', 'fa-minus', 'fa-caret-square-o-up'); | ||
| icon.classList.toggle('mfr-icon-open', !hasCollapsed); |
Member
|
Das hatte ich schon probiert und empfand es auch als irreführend und verwechselbar mit den positions Pfeilen |
Member
Author
|
ich finde das jetzige Icon ( |
Member
wird so aussehen aber danke für den stups
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Makes the FlexRepeater's collapse/expand button visually obvious by replacing the previous
fa-square-o↔fa-minusicon toggle with a singlefa-caret-square-o-downicon that rotates 180° when the item is open.The old empty-square vs. minus combination was hard to read as an expand/collapse affordance — the caret direction makes the state obvious at a glance, and the CSS transition adds a smooth flip animation between states.
Affects three buttons:
mfr-btn-collapse(top-level item)mfr-btn-nested-toggle(nested repeater item)mfr-btn-toggle-all(toolbar)Before
fa-square-o)fa-minus)After
Changes
MFormParser.php(item template + toggle-all) andMFormFlexRepeaterRenderer.php(nested toggle): initial icon class changed tofa-caret-square-o-down.setCollapseIconState()and the toggle-all updater now keep the caret icon fixed and only toggle a.mfr-icon-openstate class on the<i>element. They also clean up legacyfa-square-o/fa-minusclasses if present in already-rendered markup, so existing pages re-render correctly after upgrade..mfr-icon-openrule inflex-repeater.cssrotates the icon 180° with a 180ms ease transition.Test plan
fa-square-o/fa-minusclasses remain.🤖 Generated with Claude Code
Summary by CodeRabbit
Style