From a66940360451274d326b232519ac8d01083fea4c Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Wed, 11 Jan 2023 15:00:46 +0000 Subject: [PATCH] Fix avatars not overlapping (#6405) * Fix avatars being weird * Fix useravatar import * Fix type error * Fixing spacing --- apps/web/components/booking/BookingDescription.tsx | 2 +- apps/web/components/booking/UserAvatars.tsx | 6 ++---- apps/web/pages/[user].tsx | 6 ++---- apps/web/pages/event-types/index.tsx | 11 +++++------ apps/web/pages/team/[slug].tsx | 6 ++---- packages/ui/components/avatar/AvatarGroup.tsx | 10 ++++++---- packages/ui/components/avatar/index.ts | 1 + packages/ui/components/index.ts | 2 +- packages/ui/index.tsx | 1 + 9 files changed, 21 insertions(+), 24 deletions(-) diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx index 0c0b6eae5b..363768d789 100644 --- a/apps/web/components/booking/BookingDescription.tsx +++ b/apps/web/components/booking/BookingDescription.tsx @@ -76,7 +76,7 @@ const BookingDescription: FC = (props) => { profile={profile} users={eventType.users} showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN} - size={10} + size="sm" truncateAfter={3} />

diff --git a/apps/web/components/booking/UserAvatars.tsx b/apps/web/components/booking/UserAvatars.tsx index 3e336910be..c34bda5216 100644 --- a/apps/web/components/booking/UserAvatars.tsx +++ b/apps/web/components/booking/UserAvatars.tsx @@ -1,6 +1,5 @@ import { CAL_URL } from "@calcom/lib/constants"; - -import AvatarGroup, { AvatarGroupProps } from "@components/ui/AvatarGroup"; +import { AvatarGroup, AvatarGroupProps } from "@calcom/ui"; export const UserAvatars = ({ profile, @@ -14,7 +13,6 @@ export const UserAvatars = ({ const showMembers = !users.find((user) => user.name === profile.name) && props.showMembers; return ( ); diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx index d43dbe54aa..f3594a82e1 100644 --- a/apps/web/pages/[user].tsx +++ b/apps/web/pages/[user].tsx @@ -26,12 +26,11 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco import prisma from "@calcom/prisma"; import { baseEventTypeSelect } from "@calcom/prisma/selects"; import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils"; -import { Icon, HeadSeo } from "@calcom/ui"; +import { Icon, HeadSeo, AvatarGroup } from "@calcom/ui"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import { EmbedProps } from "@lib/withEmbedSsr"; -import AvatarGroup from "@components/ui/AvatarGroup"; import { AvatarSSR } from "@components/ui/AvatarSSR"; import { ssrInit } from "@server/lib/ssr"; @@ -69,10 +68,9 @@ export default function User(props: inferSSRProps & E
({ alt: user.name || "", image: user.avatar || "", diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx index d5e77a4602..b5c5f9bb85 100644 --- a/apps/web/pages/event-types/index.tsx +++ b/apps/web/pages/event-types/index.tsx @@ -29,6 +29,8 @@ import { Icon, showToast, Switch, + Avatar, + AvatarGroup, Tooltip, } from "@calcom/ui"; @@ -37,8 +39,6 @@ import { HttpError } from "@lib/core/http/error"; import { EmbedButton, EmbedDialog } from "@components/Embed"; import SkeletonLoader from "@components/eventtype/SkeletonLoader"; -import Avatar from "@components/ui/Avatar"; -import AvatarGroup from "@components/ui/AvatarGroup"; import { ssrInit } from "@server/lib/ssr"; @@ -279,9 +279,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
{type.users?.length > 1 && ( ({ alt: organizer.name || "", @@ -512,12 +511,12 @@ const EventTypeListHeading = ({ teamId, }: EventTypeListHeadingProps): JSX.Element => { return ( -
+
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx index b0c9d253d6..d01b5f12d9 100644 --- a/apps/web/pages/team/[slug].tsx +++ b/apps/web/pages/team/[slug].tsx @@ -12,13 +12,12 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import useTheme from "@calcom/lib/hooks/useTheme"; import { getTeamWithMembers } from "@calcom/lib/server/queries/teams"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; -import { Avatar, Button, Icon, HeadSeo } from "@calcom/ui"; +import { Avatar, Button, Icon, HeadSeo, AvatarGroup } from "@calcom/ui"; import { useToggleQuery } from "@lib/hooks/useToggleQuery"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import Team from "@components/team/screens/Team"; -import AvatarGroup from "@components/ui/AvatarGroup"; export type TeamPageProps = inferSSRProps; function TeamPage({ team }: TeamPageProps) { @@ -57,10 +56,9 @@ function TeamPage({ team }: TeamPageProps) {
({ alt: user.name || "", title: user.name || "", diff --git a/packages/ui/components/avatar/AvatarGroup.tsx b/packages/ui/components/avatar/AvatarGroup.tsx index 2ff784a59e..af5bacd673 100644 --- a/packages/ui/components/avatar/AvatarGroup.tsx +++ b/packages/ui/components/avatar/AvatarGroup.tsx @@ -11,19 +11,21 @@ export type AvatarGroupProps = { }[]; className?: string; accepted?: boolean; + truncateAfter?: number; }; export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) { const avatars = props.items.slice(0, 4); const LENGTH = props.items.length; + const truncateAfter = props.truncateAfter || 4; return (
    {avatars.map((item, enumerator) => { if (item.image != null) { - if (LENGTH > 4 && enumerator === 3) { + if (LENGTH > truncateAfter && enumerator === truncateAfter - 1) { return ( -
  • +
  • @@ -34,14 +36,14 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) { "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white", props.size === "sm" ? "text-base" : "text-2xl" )}> - +{LENGTH - 3} + +{LENGTH - truncateAfter - 1}
    • ); } // Always display the first Four items items return ( -
  • +