mirror of
https://github.com/makeplane/plane.git
synced 2025-12-21 05:10:24 -06:00
[WEB-5614] fix: sidebar and label dropdown #8364
This commit is contained in:
Anmol Singh Bhatia
committed by
GitHub
GitHub
parent
b7621c62eb
commit
8b0a8160a1
@@ -71,7 +71,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
|
||||
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
|
||||
|
||||
const { styles, attributes } = usePopper(referenceElement, popperElement, {
|
||||
placement: "bottom-end",
|
||||
placement: "bottom-start",
|
||||
modifiers: [
|
||||
{
|
||||
name: "preventOverflow",
|
||||
@@ -114,149 +114,101 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
|
||||
if (!issueId || !values) return <></>;
|
||||
|
||||
return (
|
||||
<Combobox
|
||||
as="div"
|
||||
className="size-full flex-shrink-0 text-left"
|
||||
value={issueLabels}
|
||||
onChange={(value) => onSelect(value)}
|
||||
multiple
|
||||
>
|
||||
<Combobox.Button as={Fragment}>
|
||||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className="cursor-pointer size-full"
|
||||
onClick={() => !projectLabels && fetchLabels()}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
</Combobox.Button>
|
||||
<Combobox.Options className="fixed z-10">
|
||||
<div
|
||||
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
>
|
||||
<div className="px-2">
|
||||
<div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
|
||||
<Search className="h-3.5 w-3.5 text-tertiary" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder={t("common.search.label")}
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
onKeyDown={searchInputKeyDown}
|
||||
tabIndex={baseTabIndex}
|
||||
/>
|
||||
<>
|
||||
<Combobox
|
||||
as="div"
|
||||
className="size-full flex-shrink-0 text-left"
|
||||
value={issueLabels}
|
||||
onChange={(value) => onSelect(value)}
|
||||
multiple
|
||||
>
|
||||
<Combobox.Button as={Fragment}>
|
||||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className="cursor-pointer size-full"
|
||||
onClick={() => !projectLabels && fetchLabels()}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
</Combobox.Button>
|
||||
|
||||
<Combobox.Options className="fixed z-10">
|
||||
<div
|
||||
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
|
||||
ref={setPopperElement}
|
||||
style={styles.popper}
|
||||
{...attributes.popper}
|
||||
>
|
||||
<div className="px-2">
|
||||
<div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
|
||||
<Search className="h-3.5 w-3.5 text-tertiary" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder={t("common.search.label")}
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
onKeyDown={searchInputKeyDown}
|
||||
tabIndex={baseTabIndex}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
|
||||
{isLoading ? (
|
||||
<p className="text-center text-secondary">{t("common.loading")}</p>
|
||||
) : filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
|
||||
{isLoading ? (
|
||||
<p className="text-center text-secondary">{t("common.loading")}</p>
|
||||
) : filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ selected }) =>
|
||||
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
|
||||
selected ? "text-primary" : "text-secondary"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
{option.content}
|
||||
{selected && (
|
||||
<div className="flex-shrink-0">
|
||||
<Check className={`h-3.5 w-3.5`} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
) : submitting ? (
|
||||
<Loader className="spin h-3.5 w-3.5" />
|
||||
) : canCreateLabel ? (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ selected }) =>
|
||||
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
|
||||
selected ? "text-primary" : "text-secondary"
|
||||
}`
|
||||
}
|
||||
value={query}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!query.length) return;
|
||||
handleAddLabel(query);
|
||||
}}
|
||||
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
|
||||
>
|
||||
{({ selected }) => (
|
||||
{query.length ? (
|
||||
<>
|
||||
{option.content}
|
||||
{selected && (
|
||||
<div className="flex-shrink-0">
|
||||
<Check className={`h-3.5 w-3.5`} />
|
||||
</div>
|
||||
)}
|
||||
{/* TODO: Translate here */}+ Add <span className="text-primary">"{query}"</span> to
|
||||
labels
|
||||
</>
|
||||
) : (
|
||||
t("label.create.type")
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
) : submitting ? (
|
||||
<Loader className="spin h-3.5 w-3.5" />
|
||||
) : canCreateLabel ? (
|
||||
<Combobox.Option
|
||||
value={query}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!query.length) return;
|
||||
handleAddLabel(query);
|
||||
}}
|
||||
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
|
||||
>
|
||||
{query.length ? (
|
||||
<>
|
||||
{/* TODO: Translate here */}+ Add <span className="text-primary">"{query}"</span> to
|
||||
labels
|
||||
</>
|
||||
) : (
|
||||
t("label.create.type")
|
||||
)}
|
||||
</Combobox.Option>
|
||||
) : (
|
||||
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
|
||||
{isLoading ? (
|
||||
<p className="text-center text-secondary">{t("common.loading")}</p>
|
||||
) : filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
className={({ selected }) =>
|
||||
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
|
||||
selected ? "text-primary" : "text-secondary"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ selected }) => (
|
||||
<>
|
||||
{option.content}
|
||||
{selected && (
|
||||
<div className="flex-shrink-0">
|
||||
<Check className={`h-3.5 w-3.5`} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
) : submitting ? (
|
||||
<Loader className="spin h-3.5 w-3.5" />
|
||||
) : canCreateLabel ? (
|
||||
<Combobox.Option
|
||||
value={query}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!query.length) return;
|
||||
handleAddLabel(query);
|
||||
}}
|
||||
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
|
||||
>
|
||||
{query.length ? (
|
||||
<>
|
||||
{/* TODO: Translate here */}+ Add <span className="text-primary">"{query}"</span> to labels
|
||||
</>
|
||||
) : (
|
||||
t("label.create.type")
|
||||
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
) : (
|
||||
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
|
||||
)}
|
||||
</div>
|
||||
</Combobox.Options>
|
||||
</Combobox>
|
||||
</div>
|
||||
</div>
|
||||
</Combobox.Options>
|
||||
</Combobox>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -81,7 +81,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
|
||||
<div className="flex items-center h-full w-full flex-col divide-y-2 divide-subtle-1 overflow-hidden">
|
||||
<div className="h-full w-full overflow-y-auto px-6">
|
||||
<h5 className="mt-5 text-body-xs-medium">{t("common.properties")}</h5>
|
||||
<div className={`mb-2 mt-4 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
|
||||
<div className={`mb-2 mt-4 space-y-2.5 truncate ${!isEditable ? "opacity-60" : ""}`}>
|
||||
<SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
|
||||
<StateDropdown
|
||||
value={issue?.state_id}
|
||||
|
||||
@@ -168,7 +168,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
|
||||
{/* content */}
|
||||
<div className="vertical-scrollbar scrollbar-md relative h-full w-full overflow-hidden overflow-y-auto">
|
||||
{["side-peek", "modal"].includes(peekMode) ? (
|
||||
<div className="relative flex flex-col gap-3 px-12 py-6 space-y-3">
|
||||
<div className="relative flex flex-col gap-3 px-8 py-5 space-y-3">
|
||||
<PeekOverviewIssueDetails
|
||||
editorRef={editorRef}
|
||||
workspaceSlug={workspaceSlug}
|
||||
|
||||
Reference in New Issue
Block a user