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

chore: create issue modal improvement (#2960)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-12-01 15:12:25 +05:30 committed by Aaryan Khandelwal
parent 6fb9c2c3fc
commit 819fcc77e7
2 changed files with 58 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
web/components/issues/select/cycle.tsx
View File

@ -104,24 +104,39 @@ export const IssueCycleSelect: React.FC<IssueCycleSelectProps> = observer((props
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}> <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
{filteredOptions ? ( {filteredOptions ? (
filteredOptions.length > 0 ? ( filteredOptions.length > 0 ? (
filteredOptions.map((option) => ( <>
{filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active && !selected ? "bg-custom-background-80" : ""
} w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<>
{option.content}
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>
))}
<Combobox.Option <Combobox.Option
key={option.value} key="none"
value={option.value} value=""
className={({ active, selected }) => className={({ active }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${ `flex items-center justify-between gap-2 ${
active && !selected ? "bg-custom-background-80" : "" active ? "bg-custom-background-80" : ""
} w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}` } cursor-pointer select-none truncate rounded px-1 py-1.5 w-full text-custom-text-100`
} }
> >
{({ selected }) => ( <div className="flex items-center gap-1.5 truncate">
<> <span className="truncate flex-grow">None</span>
{option.content} </div>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option> </Combobox.Option>
)) </>
) : ( ) : (
<span className="flex items-center gap-2 p-1"> <span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p> <p className="text-left text-custom-text-200 ">No matching results</p>

43
web/components/issues/select/module.tsx
View File

@ -98,24 +98,39 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}> <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
{filteredOptions ? ( {filteredOptions ? (
filteredOptions.length > 0 ? ( filteredOptions.length > 0 ? (
filteredOptions.map((option) => ( <>
{filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active && !selected ? "bg-custom-background-80" : ""
} w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<>
{option.content}
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>
))}
<Combobox.Option <Combobox.Option
key={option.value} key="none"
value={option.value} value=""
className={({ active, selected }) => className={({ active }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${ `flex items-center justify-between gap-2 ${
active && !selected ? "bg-custom-background-80" : "" active ? "bg-custom-background-80" : ""
} w-full truncate ${selected ? "text-custom-text-100" : "text-custom-text-200"}` } cursor-pointer select-none truncate rounded px-1 py-1.5 w-full text-custom-text-100`
} }
> >
{({ selected }) => ( <div className="flex items-center gap-1.5 truncate">
<> <span className="truncate flex-grow">None</span>
{option.content} </div>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option> </Combobox.Option>
)) </>
) : ( ) : (
<span className="flex items-center gap-2 p-1"> <span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p> <p className="text-left text-custom-text-200 ">No matching results</p>