binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: new avatar and avatar group components (#2584)

Browse source 
* style: new avatar components

* chore: bug fixes

* chore: add pixel to size

* chore: add comments to helper functions

* fix: build errors
This commit is contained in:
Aaryan Khandelwal 2023-11-01 15:24:11 +05:30 • committed by GitHub
parent 1a24f9ec25
commit 490e032ac6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
52 changed files with 554 additions and 1824 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web/components/modules/sidebar-select/select-lead.tsx
View file

@ -4,8 +4,7 @@ import useSWR from "swr";
// services
import { ProjectService } from "services/project";
// ui
import { Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
import { Avatar, CustomSearchSelect } from "@plane/ui";
// icons
import { ChevronDown, UserCircle2 } from "lucide-react";
// fetch-keys
@ -36,7 +35,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} height="18px" width="18px" />
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
{member.member.display_name}
</div>
),
@ -58,7 +57,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
customButton={
selectedOption ? (
<div className="flex items-center justify-start gap-2 p-0.5 w-full">
<Avatar user={selectedOption} />
<Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
<span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
</div>
) : (

20
web/components/modules/sidebar-select/select-members.tsx
View file

@ -1,14 +1,10 @@
import React from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// services
import { ProjectService } from "services/project";
// ui
import { AssigneesList, Avatar } from "components/ui";
import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
// icons
import { ChevronDown } from "lucide-react";
// fetch-keys
@ -38,7 +34,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} height="18px" width="18px" />
<Avatar name={member?.member.display_name} src={member?.member.avatar} showTooltip={false} />
{member.member.display_name}
</div>
),
@ -57,8 +53,16 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
customButtonClassName="rounded-sm"
customButton={
value && value.length > 0 && Array.isArray(value) ? (
<div className="flex items-center gap-2 p-0.5 w-full">
<AssigneesList userIds={value} length={2} />
<div className="px-1">
<AvatarGroup showTooltip={false}>
{value.map((assigneeId) => {
const member = members?.find((m) => m.member.id === assigneeId)?.member;
if (!member) return null;
return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
})}
</AvatarGroup>
</div>
) : (
<div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">