thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: label dropdown redesign

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-03-02 10:36:19 +05:30
parent cb2f0633f7
commit 1476896005
1 changed files with 99 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
apps/app/components/issues/select/label.tsx
View File

@ -7,7 +7,13 @@ import useSWR from "swr";
// headless ui // headless ui
import { Combobox, Transition } from "@headlessui/react"; import { Combobox, Transition } from "@headlessui/react";
// icons // icons
import { PlusIcon, RectangleGroupIcon, TagIcon } from "@heroicons/react/24/outline"; import {
CheckIcon,
MagnifyingGlassIcon,
PlusIcon,
RectangleGroupIcon,
TagIcon,
} from "@heroicons/react/24/outline";
// services // services
import issuesServices from "services/issues.service"; import issuesServices from "services/issues.service";
// types // types
@ -52,17 +58,32 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
> >
{({ open }: any) => ( {({ open }: any) => (
<> <>
<Combobox.Label className="sr-only">Labels</Combobox.Label>
<Combobox.Button <Combobox.Button
className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`} className={({ open }) =>
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-300
${
open
? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
: "hover:bg-[rgba(63,118,255,0.05)] focus:bg-[rgba(63,118,255,0.05)]"
}`
}
> >
<TagIcon className="h-3 w-3 text-gray-500" /> {value && value.length > 0 ? (
<span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}> <span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
{Array.isArray(value) <span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
? value.map((v) => issueLabels?.find((l) => l.id === v)?.name).join(", ") || {Array.isArray(value)
"Labels" ? value.map((v) => issueLabels?.find((l) => l.id === v)?.name).join(", ") ||
: issueLabels?.find((l) => l.id === value)?.name || "Labels"} "Labels"
</span> : issueLabels?.find((l) => l.id === value)?.name || "Labels"}
</span>
<span className=" text-[#495057]">{value.length} Labels</span>
</span>
) : (
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
<TagIcon className="h-3 w-3 text-[#858E96]" />
<span className=" text-[#858E96]">Label</span>
</span>
)}
</Combobox.Button> </Combobox.Button>
<Transition <Transition
@ -73,15 +94,19 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Combobox.Options <Combobox.Options
className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`} className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
> >
<Combobox.Input <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
className="w-full border-b bg-transparent p-2 text-xs focus:outline-none" <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
onChange={(event) => setQuery(event.target.value)} <Combobox.Input
placeholder="Search" className="w-full bg-transparent py-1 px-2 text-xs text-[#888888] focus:outline-none"
displayValue={(assigned: any) => assigned?.name} onChange={(event) => setQuery(event.target.value)}
/> placeholder="Search for label..."
<div className="py-1"> displayValue={(assigned: any) => assigned?.name}
/>
</div>
<div className="py-1.5">
{issueLabels && filteredOptions ? ( {issueLabels && filteredOptions ? (
filteredOptions.length > 0 ? ( filteredOptions.length > 0 ? (
filteredOptions.map((label) => { filteredOptions.map((label) => {
@ -92,21 +117,36 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
return ( return (
<Combobox.Option <Combobox.Option
key={label.id} key={label.id}
className={({ active, selected }) => className={({ active }) =>
`${active ? "bg-indigo-50" : ""} ${ `${
selected ? "bg-indigo-50 font-medium" : "" active ? "bg-[#E9ECEF]" : ""
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900` } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
} }
value={label.id} value={label.id}
> >
<span {({ selected }) => (
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" <div className="flex w-full gap-2 justify-between rounded">
style={{ <div className="flex justify-start items-center gap-2">
backgroundColor: <span
label.color && label.color !== "" ? label.color : "#000", className="h-3 w-3 flex-shrink-0 rounded-full"
}} style={{
/> backgroundColor:
{label.name} label.color && label.color !== ""
? label.color
: "#000",
}}
/>
<span>{label.name}</span>
</div>
<div className="flex justify-center items-center p-1 rounded">
<CheckIcon
className={`h-3 w-3 ${
selected ? "opacity-100" : "opacity-0"
}`}
/>
</div>
</div>
)}
</Combobox.Option> </Combobox.Option>
); );
} else } else
@ -119,20 +159,33 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
{children.map((child) => ( {children.map((child) => (
<Combobox.Option <Combobox.Option
key={child.id} key={child.id}
className={({ active, selected }) => className={({ active }) =>
`${active ? "bg-indigo-50" : ""} ${ `${
selected ? "bg-indigo-50 font-medium" : "" active ? "bg-[#E9ECEF]" : ""
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900` } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
} }
value={child.id} value={child.id}
> >
<span {({ selected }) => (
className="h-2 w-2 flex-shrink-0 rounded-full" <div className="flex w-full gap-2 justify-between rounded">
style={{ <div className="flex justify-start items-center gap-2">
backgroundColor: child?.color ?? "black", <span
}} className="h-3 w-3 flex-shrink-0 rounded-full"
/> style={{
{child.name} backgroundColor: child?.color ?? "black",
}}
/>
<span>{child.name}</span>
</div>
<div className="flex justify-center items-center p-1 rounded">
<CheckIcon
className={`h-3 w-3 ${
selected ? "opacity-100" : "opacity-0"
}`}
/>
</div>
</div>
)}
</Combobox.Option> </Combobox.Option>
))} ))}
</div> </div>
@ -147,11 +200,13 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
)} )}
<button <button
type="button" type="button"
className="flex select-none w-full items-center gap-2 p-2 text-gray-400 outline-none hover:bg-indigo-50 hover:text-gray-900" className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-[#E9ECEF]"
onClick={() => setIsOpen(true)} onClick={() => setIsOpen(true)}
> >
<PlusIcon className="h-3 w-3 text-gray-400" aria-hidden="true" /> <span className="flex justify-start items-center gap-1">
<span className="text-xs whitespace-nowrap">Create label</span> <PlusIcon className="h-4 w-4 text-[#495057]" aria-hidden="true" />
<span className="text-[#495057]">Create New Label</span>
</span>
</button> </button>
</div> </div>
</Combobox.Options> </Combobox.Options>