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

Merge pull request #362 from makeplane/style/issue_dropdown

Browse Source 
style: new dropdown
This commit is contained in:
Aaryan Khandelwal 2023-03-02 17:01:19 +05:30 committed by GitHub
commit aeadf0ebbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 409 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/app/components/issues/form.tsx
View File

@ -14,8 +14,8 @@ import {
IssuePrioritySelect, IssuePrioritySelect,
IssueProjectSelect, IssueProjectSelect,
IssueStateSelect, IssueStateSelect,
IssueDateSelect,
} from "components/issues/select"; } from "components/issues/select";
import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
import { CreateStateModal } from "components/states"; import { CreateStateModal } from "components/states";
import { CreateUpdateCycleModal } from "components/cycles"; import { CreateUpdateCycleModal } from "components/cycles";
import { CreateLabelModal } from "components/labels"; import { CreateLabelModal } from "components/labels";
@ -266,16 +266,16 @@ export const IssueForm: FC<IssueFormProps> = ({
/> />
<Controller <Controller
control={control} control={control}
name="cycle" name="priority"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<IssueCycleSelect projectId={projectId} value={value} onChange={onChange} /> <IssuePrioritySelect value={value} onChange={onChange} />
)} )}
/> />
<Controller <Controller
control={control} control={control}
name="priority" name="assignees"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<IssuePrioritySelect value={value} onChange={onChange} /> <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
)} )}
/> />
<Controller <Controller
@ -295,21 +295,10 @@ export const IssueForm: FC<IssueFormProps> = ({
control={control} control={control}
name="target_date" name="target_date"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<CustomDatePicker <IssueDateSelect value={value} onChange={onChange} />
value={value}
onChange={onChange}
className="max-w-[7rem]"
/>
)} )}
/> />
</div> </div>
<Controller
control={control}
name="assignees"
render={({ field: { value, onChange } }) => (
<IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
)}
/>
<IssueParentSelect <IssueParentSelect
control={control} control={control}
isOpen={parentIssueListModalOpen} isOpen={parentIssueListModalOpen}

76
apps/app/components/issues/select/assignee.tsx
View File

@ -10,6 +10,9 @@ import { Transition, Combobox } from "@headlessui/react";
import projectServices from "services/project.service"; import projectServices from "services/project.service";
// ui // ui
import { AssigneesList, Avatar } from "components/ui"; import { AssigneesList, Avatar } from "components/ui";
// icons
import { UserGroupIcon, MagnifyingGlassIcon, CheckIcon } from "@heroicons/react/24/outline";
// fetch keys // fetch keys
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
@ -61,48 +64,83 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
> >
{({ open }: any) => ( {({ open }: any) => (
<> <>
<Combobox.Button className="flex items-center cursor-pointer gap-1 rounded-md"> <Combobox.Button
<div className="flex items-center gap-1 text-xs"> className={({ open }) =>
{value && Array.isArray(value) ? <AssigneesList userIds={value} length={10} /> : null} `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
</div> ${
open
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
: "hover:bg-theme/5 "
}`
}
>
{value && value.length > 0 && Array.isArray(value) ? (
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
<AssigneesList userIds={value} length={3} showLength={false} />
<span className=" text-gray-500">{value.length} Assignees</span>
</span>
) : (
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
<UserGroupIcon className="h-4 w-4 text-gray-500 " />
<span className=" text-gray-500">Assignee</span>
</span>
)}
</Combobox.Button> </Combobox.Button>
<Transition <Transition
show={open} show={open}
as={Fragment} as={Fragment}
leave="transition ease-in duration-100" enter="transition ease-out duration-200"
leaveFrom="opacity-100" enterFrom="opacity-0 translate-y-1"
leaveTo="opacity-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
> >
<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`}
> >
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
<Combobox.Input <Combobox.Input
className="w-full border-b bg-transparent p-2 text-xs focus:outline-none" className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
onChange={(event) => setQuery(event.target.value)} onChange={(event) => setQuery(event.target.value)}
placeholder="Search" placeholder="Search for a person..."
displayValue={(assigned: any) => assigned?.name} displayValue={(assigned: any) => assigned?.name}
/> />
<div className="py-1"> </div>
<div className="py-1.5">
{filteredOptions ? ( {filteredOptions ? (
filteredOptions.length > 0 ? ( filteredOptions.length > 0 ? (
filteredOptions.map((option) => ( filteredOptions.map((option) => (
<Combobox.Option <Combobox.Option
key={option.value} key={option.value}
className={({ active, selected }) => className={({ active }) =>
`${active ? "bg-indigo-50" : ""} ${ `${
selected ? "bg-indigo-50 font-medium" : "" active ? "bg-gray-200" : ""
} flex cursor-pointer select-none items-center gap-2 truncate px-2 py-1 text-gray-900` } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-500`
} }
value={option.value} value={option.value}
> >
{people && ( {({ selected, active }) => (
<> <div className="flex w-full gap-2 justify-between rounded">
<div className="flex justify-start items-center gap-1">
<Avatar <Avatar
user={people?.find((p) => p.member.id === option.value)?.member} user={people?.find((p) => p.member.id === option.value)?.member}
/> />
{option.display} <span>{option.display}</span>
</> </div>
<div
className={`flex justify-center items-center p-1 rounded border border-gray-500 border-opacity-0 group-hover:border-opacity-100
${selected ? "border-opacity-100 " : ""}
${active ? "bg-gray-100" : ""} `}
>
<CheckIcon
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
/>
</div>
</div>
)} )}
</Combobox.Option> </Combobox.Option>
)) ))

70
apps/app/components/issues/select/date.tsx Normal file
View File

@ -0,0 +1,70 @@
import React from "react";
import { Popover, Transition } from "@headlessui/react";
import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
// react-datepicker
import DatePicker from "react-datepicker";
// import "react-datepicker/dist/react-datepicker.css";
import { renderDateFormat } from "helpers/date-time.helper";
type Props = {
value: string | null;
onChange: (val: string | null) => void;
};
export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
<Popover className="flex justify-center items-center relative rounded-lg">
{({ open }) => (
<>
<Popover.Button
className={({ open }) =>
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
${
open
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
: "hover:bg-theme/5 "
}`
}
>
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
{value ? (
<>
<span className="text-gray-600">{value}</span>
<button onClick={() => onChange(null)}>
<XMarkIcon className="h-3 w-3 text-gray-600" />
</button>
</>
) : (
<>
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0 " />
<span className="text-gray-500">Due Date</span>
</>
)}
</span>
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute top-10 -left-10 z-20 transform overflow-hidden">
<DatePicker
selected={value ? new Date(value) : null}
onChange={(val) => {
if (!val) onChange("");
else onChange(renderDateFormat(val));
}}
dateFormat="dd-MM-yyyy"
inline
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
);

1
apps/app/components/issues/select/index.ts
View File

@ -4,3 +4,4 @@ export * from "./parent";
export * from "./priority"; export * from "./priority";
export * from "./project"; export * from "./project";
export * from "./state"; export * from "./state";
export * from "./date";

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

@ -7,13 +7,20 @@ 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
import type { IIssueLabels } from "types"; import type { IIssueLabels } from "types";
// fetch-keys // fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import { IssueLabelsList } from "components/ui";
type Props = { type Props = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@ -52,36 +59,57 @@ 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-200
${
open
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
: "hover:bg-theme/5 "
}`
}
> >
<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) <IssueLabelsList
? value.map((v) => issueLabels?.find((l) => l.id === v)?.name).join(", ") || labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
"Labels" length={3}
: issueLabels?.find((l) => l.id === value)?.name || "Labels"} showLength
/>
<span className=" text-gray-600">{value.length} Labels</span>
</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-gray-500" />
<span className=" text-gray-500">Label</span>
</span>
)}
</Combobox.Button> </Combobox.Button>
<Transition <Transition
show={open} show={open}
as={React.Fragment} as={React.Fragment}
leave="transition ease-in duration-100" enter="transition ease-out duration-200"
leaveFrom="opacity-100" enterFrom="opacity-0 translate-y-1"
leaveTo="opacity-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
> >
<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`}
> >
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
<Combobox.Input <Combobox.Input
className="w-full border-b bg-transparent p-2 text-xs focus:outline-none" className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
onChange={(event) => setQuery(event.target.value)} onChange={(event) => setQuery(event.target.value)}
placeholder="Search" placeholder="Search for label..."
displayValue={(assigned: any) => assigned?.name} displayValue={(assigned: any) => assigned?.name}
/> />
<div className="py-1"> </div>
<div className="py-1.5">
{issueLabels && filteredOptions ? ( {issueLabels && filteredOptions ? (
filteredOptions.length > 0 ? ( filteredOptions.length > 0 ? (
filteredOptions.map((label) => { filteredOptions.map((label) => {
@ -92,21 +120,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-gray-200" : ""
} 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-gray-600`
} }
value={label.id} value={label.id}
> >
{({ selected }) => (
<div className="flex w-full gap-2 justify-between rounded">
<div className="flex justify-start items-center gap-2">
<span <span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" className="h-3 w-3 flex-shrink-0 rounded-full"
style={{ style={{
backgroundColor: backgroundColor:
label.color && label.color !== "" ? label.color : "#000", label.color && label.color !== ""
? label.color
: "#000",
}} }}
/> />
{label.name} <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 +162,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-gray-200" : ""
} 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-gray-600`
} }
value={child.id} value={child.id}
> >
{({ selected }) => (
<div className="flex w-full gap-2 justify-between rounded">
<div className="flex justify-start items-center gap-2">
<span <span
className="h-2 w-2 flex-shrink-0 rounded-full" className="h-3 w-3 flex-shrink-0 rounded-full"
style={{ style={{
backgroundColor: child?.color ?? "black", backgroundColor: child?.color ?? "black",
}} }}
/> />
{child.name} <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 +203,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-gray-200"
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-gray-600" aria-hidden="true" />
<span className="text-gray-600">Create New Label</span>
</span>
</button> </button>
</div> </div>
</Combobox.Options> </Combobox.Options>

61
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,34 +17,62 @@ 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-200
${
open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
}`
}
>
<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-gray-500"}`)}
</span>
<span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
{value ?? "Priority"}
</span>
</span>
</Listbox.Button> </Listbox.Button>
<Transition <Transition
show={open} show={open}
as={React.Fragment} as={React.Fragment}
leave="transition ease-in duration-100" enter="transition ease-out duration-200"
leaveFrom="opacity-100" enterFrom="opacity-0 translate-y-1"
leaveTo="opacity-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
> >
<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-gray-200" : ""
} 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-gray-600`
} }
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>

100
apps/app/components/issues/select/state.tsx
View File

@ -7,13 +7,19 @@ import useSWR from "swr";
// services // services
import stateService from "services/state.service"; import stateService from "services/state.service";
// headless ui // headless ui
import { Squares2X2Icon, PlusIcon } from "@heroicons/react/24/outline"; import {
Squares2X2Icon,
PlusIcon,
MagnifyingGlassIcon,
CheckIcon,
} from "@heroicons/react/24/outline";
// icons // icons
import { Combobox, Transition } from "@headlessui/react"; import { Combobox, Transition } from "@headlessui/react";
// helpers // helpers
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";
// fetch keys // fetch keys
import { STATE_LIST } from "constants/fetch-keys"; import { STATE_LIST } from "constants/fetch-keys";
import { getStateGroupIcon } from "components/icons";
type Props = { type Props = {
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@ -41,6 +47,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
value: state.id, value: state.id,
display: state.name, display: state.name,
color: state.color, color: state.color,
group: state.group,
})); }));
const filteredOptions = const filteredOptions =
@ -48,6 +55,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
? options ? options
: options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase())); : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
const currentOption = options?.find((option) => option.value === value);
return ( return (
<Combobox <Combobox
as="div" as="div"
@ -57,64 +65,80 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
> >
{({ open }: any) => ( {({ open }: any) => (
<> <>
<Combobox.Label className="sr-only">State</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-200
${
open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
}`
}
> >
<Squares2X2Icon className="h-3 w-3 text-gray-500" />
<span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
{value && value !== "" ? ( {value && value !== "" ? (
<span <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" {currentOption && currentOption.group
style={{ ? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color)
backgroundColor: options?.find((option) => option.value === value)?.color, : ""}
}} <span className=" text-gray-600">{currentOption?.display}</span>
/>
) : null}
{options?.find((option) => option.value === value)?.display || "State"}
</span> </span>
) : (
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
<Squares2X2Icon className="h-4 w-4 text-gray-500 " />
<span className=" text-gray-500">{currentOption?.display || "State"}</span>
</span>
)}
</Combobox.Button> </Combobox.Button>
<Transition <Transition
show={open} show={open}
as={React.Fragment} as={React.Fragment}
leave="transition ease-in duration-100" enter="transition ease-out duration-200"
leaveFrom="opacity-100" enterFrom="opacity-0 translate-y-1"
leaveTo="opacity-0" enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
> >
<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`}
> >
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
<Combobox.Input <Combobox.Input
className="w-full border-b bg-transparent p-2 text-xs focus:outline-none" className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
onChange={(event) => setQuery(event.target.value)} onChange={(event) => setQuery(event.target.value)}
placeholder="Search" placeholder="Search States"
displayValue={(assigned: any) => assigned?.name} displayValue={(assigned: any) => assigned?.name}
/> />
<div className="py-1"> </div>
<div className="py-1.5">
{filteredOptions ? ( {filteredOptions ? (
filteredOptions.length > 0 ? ( filteredOptions.length > 0 ? (
filteredOptions.map((option) => ( filteredOptions.map((option) => (
<Combobox.Option <Combobox.Option
key={option.value} key={option.value}
className={({ active, selected }) => className={({ active }) =>
`${active ? "bg-indigo-50" : ""} ${ `${
selected ? "bg-indigo-50 font-medium" : "" active ? "bg-gray-200" : ""
} 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-gray-600`
} }
value={option.value} value={option.value}
> >
{states && ( {({ selected, active }) =>
<> states && (
<span <div className="flex w-full gap-2 justify-between rounded">
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" <div className="flex justify-start items-center gap-2">
style={{ {getStateGroupIcon(option.group, "16", "16", option.color)}
backgroundColor: option.color, <span>{option.display}</span>
}} </div>
<div className="flex justify-center items-center p-1 rounded">
<CheckIcon
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
/> />
{option.display} </div>
</> </div>
)} )
}
</Combobox.Option> </Combobox.Option>
)) ))
) : ( ) : (
@ -125,11 +149,13 @@ export const IssueStateSelect: 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 hover:bg-indigo-50 hover:text-gray-900" className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
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 state</span> <PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
<span className="text-gray-600">Create New State</span>
</span>
</button> </button>
</div> </div>
</Combobox.Options> </Combobox.Options>

18
apps/app/components/ui/avatar.tsx
View File

@ -18,7 +18,7 @@ type AvatarProps = {
}; };
export const Avatar: React.FC<AvatarProps> = ({ user, index }) => ( export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
<div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-2.5" : ""}`}> <div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}>
{user && user.avatar && user.avatar !== "" ? ( {user && user.avatar && user.avatar !== "" ? (
<div <div
className={`h-5 w-5 rounded-full border-2 ${ className={`h-5 w-5 rounded-full border-2 ${
@ -47,9 +47,15 @@ type AsigneesListProps = {
users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[]; users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
userIds?: string[]; userIds?: string[];
length?: number; length?: number;
showLength?: boolean;
}; };
export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, length = 5 }) => { export const AssigneesList: React.FC<AsigneesListProps> = ({
users,
userIds,
length = 5,
showLength = true,
}) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
@ -82,7 +88,13 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
return <Avatar key={userId} user={user} index={index} />; return <Avatar key={userId} user={user} index={index} />;
})} })}
{userIds.length > length ? <span>+{userIds.length - length}</span> : null} {showLength ? (
userIds.length > length ? (
<span>+{userIds.length - length}</span>
) : null
) : (
""
)}
</> </>
)} )}
</> </>

1
apps/app/components/ui/index.ts
View File

@ -15,3 +15,4 @@ export * from "./progress-bar";
export * from "./select"; export * from "./select";
export * from "./spinner"; export * from "./spinner";
export * from "./tooltip"; export * from "./tooltip";
export * from "./labels-list";

32
apps/app/components/ui/labels-list.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
type IssueLabelsListProps = {
labels?: (string | undefined)[];
length?: number;
showLength?: boolean;
};
export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
labels,
length = 5,
showLength = true,
}) => (
<>
{labels && (
<>
{labels.map((color, index) => (
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
<span
className={`h-4 w-4 flex-shrink-0 rounded-full border border-white
`}
style={{
backgroundColor: color,
}}
/>
</div>
))}
{labels.length > length ? <span>+{labels.length - length}</span> : null}
</>
)}
</>
);