-
Notifications
You must be signed in to change notification settings - Fork 817
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: fixed the recipients viewing issue on touch screens #773
fix: fixed the recipients viewing issue on touch screens #773
Conversation
@ashrafchowdury is attempting to deploy a commit to the Documenso Team Team on Vercel. A member of the Team first needs to authorize it. |
Important Auto Review SkippedAuto reviews are limited to the following labels: coderabbit. Please add one of these labels to enable auto reviews. Please check the settings in the CodeRabbit UI or the To trigger a single review, invoke the Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
Hey there, it looks like you haven't accepted our contributor license agreement yet. In order for us to accept your pull request we ask that you please fill out the CLA: |
@Mythie I've accepted the contributor license. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks for the help!
apps/web/src/components/(dashboard)/avatar/stack-avatars-with-ui.tsx
Outdated
Show resolved
Hide resolved
…to update-documents-avatar
…owdury/documenso into update-documents-avatar
Why did we rename and remove components as part of this? For context we tend to prefer sticking away from components like It looks like this change can be simplified to simply swapping out the tooltip component for the popover one, making it controlled via a useState hook and then adding a mouseover handler to the popover trigger to retain the old appear after 200ms behaviour. 😼 |
}; | ||
|
||
export const StackAvatarsUI = ({ recipients, position, children }: StackAvatarsUIProps) => { | ||
const size = useWindowSize(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As per my comment, I'd avoid this and simply use the popover component at all times with a onMouseOver
handler which can deal with adding the old hover behaviour back.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<Popover open={isOpen}>
<PopoverTrigger
className="flex cursor-pointer"
onMouseOver={() => setIsOpen(true)}
onMouseLeave={() => setIsOpen(false)}
>
{children || <StackAvatars recipients={recipients} />}
</PopoverTrigger>
If we add onMouseOver
and onMouseLeave
on Popover to give the tooltip vibe then the copy recipients email feature won't work.
Thank you for following the naming conventions for pull request titles! 💚🚀 |
export const StackAvatarsUI = ({ recipients, position, children }: StackAvatarsUIProps) => { | ||
const size = useWindowSize(); | ||
|
||
return ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe you could avoid the ternary operator here, and/or perhaps create smaller components:
if (size.width ? 1050) {
return <ToolTipStack recipients={recipients} />
}
return <PopoverStack recipients={recipients} />
Description
This pull request addresses the issue where users on touchscreen devices couldn't properly see the Recipients list. I have implemented a two-easy solution to address this problem, offering a seamless user experience across device types:
Popover for Touchscreen: For touchscreen devices, I have added a popover that displays the Recipients list when users tap on the avatars.
Tooltip for Larger Screens: On larger screens (desktops and laptops), I have added a tooltip that appears when users hover over the avatars.
Changes
Popover
for smaller devices and keep theTooltip
for larger devices.stack-avatars-wtih-tooltip
tostack-avatars-wtih-ui
because now it contains both Tooltip and Popover.useWindowSize
hook to conditionally render theTooltip
andPopover
stack-avatars-components.tsx
to show the recipient's details. This component uses both Popover and Tooltip.PR Preview
Untitled.video.-.Made.with.Clipchamp.2.mp4
Issue
Closes #756