mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-02-22 06:39:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

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
52 changed files with 554 additions and 1824 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/components/modules/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 { UserCircle } from "lucide-react";
// fetch-keys
@@ -34,7 +33,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
{member.member.display_name}
</div>
),
@@ -48,7 +47,11 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
value={value}
label={
<div className="flex items-center gap-2">
{selectedOption ? <Avatar user={selectedOption} /> : <UserCircle className="h-4 w-4 text-custom-text-200" />}
{selectedOption ? (
<Avatar name={selectedOption.display_name} src={selectedOption.avatar} />
) : (
<UserCircle className="h-4 w-4 text-custom-text-200" />
)}
{selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">Lead</span>}
</div>
}

16
web/components/modules/select/members.tsx
View File

@@ -4,9 +4,7 @@ import useSWR from "swr";
// services
import { ProjectService } from "services/project";
// ui
import { AssigneesList, Avatar } from "components/ui";
// icons
import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
import { Avatar, AvatarGroup, CustomSearchSelect, UserGroupIcon } from "@plane/ui";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
@@ -32,7 +30,7 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar name={member?.member.display_name} src={member?.member.avatar} />
{member.member.display_name}
</div>
),
@@ -45,7 +43,15 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
<div className="flex items-center gap-2 text-custom-text-200">
{value && value.length > 0 && Array.isArray(value) ? (
<div className="flex items-center justify-center gap-2">
<AssigneesList userIds={value} length={3} showLength={false} />
<AvatarGroup>
{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>
<span className="text-custom-text-200">{value.length} Assignees</span>
</div>
) : (