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

45
web/components/workspace/member-select.tsx
View file

@ -2,9 +2,8 @@ import React, { FC, useState, Fragment } from "react";
// popper js
import { usePopper } from "react-popper";
// ui
import { Input, Tooltip } from "@plane/ui";
import { Avatar, Input } from "@plane/ui";
import { Listbox } from "@headlessui/react";
import { Avatar } from "components/ui";
// icons
import { Check, Search, User2 } from "lucide-react";
// types
@ -49,32 +48,22 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
: options?.filter((option) => option.member.display_name.toLowerCase().includes(query.toLowerCase()));
const label = (
<Tooltip
tooltipHeading="Assignee"
tooltipContent={
options && options.length > 0
? options.map((assignee) => assignee?.member.display_name).join(", ")
: "No Assignee"
}
position="top"
>
<div
className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded-md border border-custom-border-300 duration-300 focus:outline-none
<div
className="flex items-center justify-between gap-2 w-full text-xs px-2.5 py-1.5 rounded-md border border-custom-border-300 duration-300 focus:outline-none
"
>
{value ? (
<>
<Avatar height="18px" width="18px" user={value?.member} />
<span className="text-xs leading-4"> {value?.member.display_name}</span>
</>
) : (
<>
<User2 className="h-[18px] w-[18px]" />
<span className="text-xs leading-4">{placeholder}</span>
</>
)}
</div>
</Tooltip>
>
{value ? (
<>
<Avatar name={value?.member.display_name} src={value?.member.avatar} />
<span className="text-xs leading-4"> {value?.member.display_name}</span>
</>
) : (
<>
<User2 className="h-[18px] w-[18px]" />
<span className="text-xs leading-4">{placeholder}</span>
</>
)}
</div>
);
return (
@ -122,7 +111,7 @@ export const WorkspaceMemberSelect: FC<IWorkspaceMemberSelect> = (props) => {
{({ selected }) => (
<>
<div className="flex items-center gap-2">
<Avatar user={workspaceMember.member} />
<Avatar name={workspaceMember?.member.display_name} src={workspaceMember?.member.avatar} />
{workspaceMember.member.display_name}
</div>
{selected && <Check className="h-3.5 w-3.5" />}

10
web/components/workspace/sidebar-dropdown.tsx
View file

@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
import Link from "next/link";
import { Menu, Transition } from "@headlessui/react";
import { useTheme } from "next-themes";
import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
@ -12,11 +13,8 @@ import useToast from "hooks/use-toast";
// services
import { UserService } from "services/user.service";
import { AuthService } from "services/auth.service";
// components
import { Avatar } from "components/ui";
import { Loader } from "@plane/ui";
// icons
import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
// ui
import { Avatar, Loader } from "@plane/ui";
// types
import { IWorkspace } from "types";
@ -240,7 +238,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
{!themeStore.sidebarCollapsed && (
<Menu as="div" className="relative flex-shrink-0">
<Menu.Button className="grid place-items-center outline-none">
<Avatar user={user} height="28px" width="28px" fontSize="14px" />
<Avatar name={user?.display_name} src={user?.avatar} size={32} shape="square" />
</Menu.Button>
<Transition