add: objectName in fav folder #8785
Conversation
![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 navigation drawer by adding object type labels next to favorite items, improving clarity and context for users.
- Implemented clip-path/opacity-based visibility for better accessibility and layout compared to display:none
- Added
objectNamedisplay inNavigationDrawerItemwith "·" separator and lighter styling - Updated truncation logic to handle label and objectName as a single unit for better space management
- Added
StyledItemObjectNamecomponent with specific styling for object type labels - Known limitation:
NavigationDrawerAnimatedCollapseWrapperconflicts with flex/truncation properties when wrapping text elements
4 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| e.preventDefault(); | ||
| }} |
There was a problem hiding this comment.
style: stopPropagation and preventDefault could interfere with keyboard navigation. Consider handling keyboard events separately.
...twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
Outdated
Show resolved
Hide resolved
...twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
Outdated
Show resolved
Hide resolved
| )} | ||
|
|
||
| <NavigationDrawerAnimatedCollapseWrapper> |
There was a problem hiding this comment.
@martmull I looked into it. But it was not possible. As I described in the description that having NavigationDrawerAnimatedCollapseWrapper on top of any text or div won't let the truncation property work.
There was a problem hiding this comment.
seen with @Bonapara. We are ok to remove the animated effect
2024-11-29.17-29-58.mov@harshrajeevsingh The folder's right icon (here IconDotsVertical) on hover needs background! :) |
|
@ehconitin But, It's working for me Screencast.from.2024-11-29.17-42-20.webm |
| )} | ||
|
|
||
| <NavigationDrawerAnimatedCollapseWrapper> |
There was a problem hiding this comment.
seen with @Bonapara. We are ok to remove the animated effect
|
Thanks @harshrajeevsingh for your contribution! |
Closes: #8549
It was quite complex to get this right. So, I went through Notion's website to see how they implemented it.
Instead of using
display: noneor having a space reserved for the Icon, I used clip-path & opacity trick to achieve the desired behaviour. This maintains accessibility and helps in label or ObjectName to take the full space.Also, truncation now works for label & objectName as a whole instead of separately, as seen in my previous PR.
Caveats
The only problem that now remains is not having
NavigationDrawerAnimatedCollapseWrapper. Having it on top of any text or div won't let the flex or truncation property work.Screencast.from.2024-11-28.13-37-31.webm