406 animate the command menu button #10305
Merged
Conversation
This file contains 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
bosiraphael
changed the title
…rstand-its-the-same-button
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR enhances the command menu button with smooth animations and transitions, improving visual feedback and user experience.
- Added animated transformation of dots icon to X icon in
PageHeaderOpenCommandMenuButton.tsxusing SVG animations - Introduced new
AnimatedButtoncomponent intwenty-uiwith support for custom animations and styling variants - Added fade in/out animations with
AnimatePresencetoCommandMenuContainerfor smoother transitions - Merged open/close command menu buttons into a single component with rotation animation
- Added feature flag
IsCommandMenuV2Enabledto control new animation behavior
6 file(s) reviewed, 4 comment(s)
Edit PR Review Bot Settings | Greptile
...wenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
Show resolved
Hide resolved
...wenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
Show resolved
Hide resolved
…the-same-button' of github.com:twentyhq/twenty into 406-animate-the-k-button-to-make-people-understand-its-the-same-button
Devessier
approved these changes
Feb 18, 2025
Comment on lines
+132
to
+134
| const isButtonVisible = | ||
| !location.pathname.startsWith('/objects/') && | ||
| !location.pathname.startsWith('/object/'); |
There was a problem hiding this comment.
Is there a safest way to determine whether the button should be visible? Do you think we'll want to add it to more pages soon? If so, could we make it simpler to update the code?
There was a problem hiding this comment.
I think that we will potentially add it everywhere, so we will just have to remove this check ;)
Weiko
deleted the
406-animate-the-k-button-to-make-people-understand-its-the-same-button
branch
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.
Closes twentyhq/core-team-issues#406
AnimatedButton. All the button styling could be extracted to another file so we don't duplicate the code, but sinceAnimatedLightIconButtonduplicates the style fromLightIconButton, I did the same here.opentoclosestateBefore
Enregistrement.de.l.ecran.2025-02-18.a.17.21.51.mov
After
Enregistrement.de.l.ecran.2025-02-18.a.17.11.36.mov