github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: priority dropdown redesign

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-03-02 09:38:54 +05:30
parent fdbad4ff1a
commit cb2f0633f7
1 changed files with 41 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
apps/app/components/issues/select/priority.tsx
View File

@ -6,6 +6,7 @@ import { Listbox, Transition } from "@headlessui/react";
import { getPriorityIcon } from "components/icons/priority-icon"; import { getPriorityIcon } from "components/icons/priority-icon";
// constants // constants
import { PRIORITIES } from "constants/project"; import { PRIORITIES } from "constants/project";
import { CheckIcon } from "@heroicons/react/24/outline";
type Props = { type Props = {
value: string | null; value: string | null;
@ -16,9 +17,24 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
<Listbox as="div" className="relative" value={value} onChange={onChange}> <Listbox as="div" className="relative" value={value} onChange={onChange}>
{({ open }) => ( {({ open }) => (
<> <>
<Listbox.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"> <Listbox.Button
<span className="text-gray-500 grid place-items-center">{getPriorityIcon(value)}</span> className={({ open }) =>
<div className="flex items-center gap-2 capitalize">{value ?? "Priority"}</div> `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)]"
}`
}
>
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
<span className="flex items-center">
{getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-[#858E96]"}`)}
</span>
<span className={`${value ? "text-[#495057]" : "text-[#858E96]"} capitalize`}>
{value ?? "Priority"}
</span>
</span>
</Listbox.Button> </Listbox.Button>
<Transition <Transition
@ -28,22 +44,34 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Listbox.Options className="absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none"> <Listbox.Options
<div className="py-1"> className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2 text-xs
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
>
<div>
{PRIORITIES.map((priority) => ( {PRIORITIES.map((priority) => (
<Listbox.Option <Listbox.Option
key={priority} key={priority}
className={({ selected, active }) => className={({ active }) =>
`${selected ? "bg-indigo-50 font-medium" : ""} ${ `${
active ? "bg-indigo-50" : "" active ? "bg-[#E9ECEF]" : ""
} relative cursor-pointer select-none 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={priority} value={priority}
> >
<span className="flex items-center gap-2 capitalize"> {({ selected, active }) => (
{getPriorityIcon(priority)} <div className="flex w-full gap-2 justify-between rounded">
{priority ?? "None"} <div className="flex justify-start items-center gap-2">
</span> <span>{getPriorityIcon(priority)}</span>
<span className="capitalize">{priority ?? "None"}</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>
)}
</Listbox.Option> </Listbox.Option>
))} ))}
</div> </div>