mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

fixed avatar group and tooltip (#1950)

Browse source
This commit is contained in:
Peer Richelsen 2022-02-23 11:09:22 +00:00 committed by GitHub
parent ac0c3bdfb9
commit 5cf67fdbaa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/web/components/ui/Avatar.tsx
View file

@ -36,7 +36,7 @@ export default function Avatar(props: AvatarProps) {
return title ? ( return title ? (
<Tooltip.Tooltip delayDuration={300}> <Tooltip.Tooltip delayDuration={300}>
<Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger> <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
<Tooltip.Content className="bg-brand text-brandcontrast rounded-sm p-2 text-sm shadow-sm"> <Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white shadow-sm">
<Tooltip.Arrow /> <Tooltip.Arrow />
{title} {title}
</Tooltip.Content> </Tooltip.Content>

33
apps/web/components/ui/AvatarGroup.tsx
View file

@ -4,8 +4,6 @@ import classNames from "@lib/classNames";
import Avatar from "@components/ui/Avatar"; import Avatar from "@components/ui/Avatar";
// import * as Tooltip from "@radix-ui/react-tooltip";
export type AvatarGroupProps = { export type AvatarGroupProps = {
size: number; size: number;
truncateAfter?: number; truncateAfter?: number;
@ -18,44 +16,17 @@ export type AvatarGroupProps = {
}; };
export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) { export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
/* const truncatedAvatars: string[] =
props.items.length > props.truncateAfter
? props.items
.slice(props.truncateAfter)
.map((item) => item.title)
.filter(Boolean)
: [];*/
return ( return (
<ul className={classNames("-rtl:space-x-reverse flex space-x-2 overflow-hidden", props.className)}> <ul className={classNames(props.className)}>
{props.items.slice(0, props.truncateAfter).map((item, idx) => { {props.items.slice(0, props.truncateAfter).map((item, idx) => {
if (item.image != null) { if (item.image != null) {
return ( return (
<li key={idx} className="inline-block"> <li key={idx} className="-mr-3 inline-block">
<Avatar imageSrc={item.image} title={item.title} alt={item.alt || ""} size={props.size} /> <Avatar imageSrc={item.image} title={item.title} alt={item.alt || ""} size={props.size} />
</li> </li>
); );
} }
})} })}
{/*props.items.length > props.truncateAfter && (
<li className="relative inline-block">
<Tooltip.Tooltip delayDuration="300">
<Tooltip.TooltipTrigger className="cursor-default">
<span className="w-16 absolute bottom-1.5 border-2 border-gray-300 flex-inline items-center text-white pt-4 text-2xl top-0 rounded-full block bg-neutral-600">+1</span>
</Tooltip.TooltipTrigger>
{truncatedAvatars.length !== 0 && (
<Tooltip.Content className="p-2 text-sm text-white rounded-sm shadow-sm bg-brand">
<Tooltip.Arrow />
<ul>
{truncatedAvatars.map((title) => (
<li key={title}>{title}</li>
))}
</ul>
</Tooltip.Content>
)}
</Tooltip.Tooltip>
</li>
)*/}
</ul> </ul>
); );
}; };