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

fix: inconsistency for create label, select label getting closed on select (#1085)

Browse Source
This commit is contained in:
Dakshesh Jain 2023-05-19 19:12:24 +05:30 committed by GitHub
parent 406f02737f
commit ddeafc0695
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/app/components/labels/create-label-modal.tsx
View File

@ -30,7 +30,7 @@ type Props = {
const defaultValues: Partial<IState> = {
name: "",
color: "#000000",
color: "#858E96",
};
export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose }) => {
@ -44,7 +44,6 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
watch,
control,
reset,
setError,
} = useForm<IIssueLabels>({
defaultValues,
});
@ -109,13 +108,13 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
{({ open, close }) => (
<>
<Popover.Button
className={`group inline-flex items-center rounded-sm bg-brand-surface-2 text-base font-medium hover:text-brand-base focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${
className={`group inline-flex items-center rounded-sm py-2 text-base font-medium hover:text-brand-base focus:outline-none ${
open ? "text-brand-base" : "text-brand-secondary"
}`}
>
{watch("color") && watch("color") !== "" && (
<span
className="ml-2 h-4 w-4 rounded"
className="ml-2 h-5 w-5 rounded"
style={{
backgroundColor: watch("color") ?? "black",
}}
@ -161,7 +160,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
type="text"
id="name"
name="name"
placeholder="Enter name"
placeholder="Label title"
autoComplete="off"
error={errors.name}
register={register}

14
apps/app/components/labels/create-update-label-inline.tsx
View File

@ -14,6 +14,8 @@ import { Popover, Transition } from "@headlessui/react";
import issuesService from "services/issues.service";
// ui
import { Input, PrimaryButton, SecondaryButton } from "components/ui";
// icons
import { ChevronDownIcon } from "@heroicons/react/24/outline";
// types
import { IIssueLabels } from "types";
// fetch-keys
@ -28,7 +30,7 @@ type Props = {
const defaultValues: Partial<IIssueLabels> = {
name: "",
color: "#ff0000",
color: "#858E96",
};
type Ref = HTMLDivElement;
@ -113,7 +115,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
}`}
ref={ref}
>
<div className="h-8 w-8 flex-shrink-0">
<div className="flex-shrink-0">
<Popover className="relative z-10 flex h-full w-full items-center justify-center">
{({ open }) => (
<>
@ -128,6 +130,12 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
backgroundColor: watch("color"),
}}
/>
<ChevronDownIcon
className={`ml-2 h-5 w-5 group-hover:text-brand-secondary ${
open ? "text-gray-600" : "text-gray-400"
}`}
aria-hidden="true"
/>
</Popover.Button>
<Transition
@ -153,7 +161,7 @@ export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpd
)}
</Popover>
</div>
<div className="flex w-full flex-col justify-center">
<div className="flex flex-1 flex-col justify-center">
<Input
type="text"
id="labelName"

78
apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -329,7 +329,7 @@ const SinglePage: NextPage = () => {
</div>
<div className="flex w-full flex-wrap gap-1">
{pageDetails.labels.length > 0 ? (
{pageDetails.labels.length > 0 && (
<>
{pageDetails.labels.map((labelId) => {
const label = labels?.find((label) => label.id === labelId);
@ -362,54 +362,38 @@ const SinglePage: NextPage = () => {
</div>
);
})}
<CustomSearchSelect
customButton={
<button
type="button"
className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
>
<PlusIcon className="h-3.5 w-3.5" />
</button>
}
value={pageDetails.labels}
onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
options={options}
multiple
noChevron
/>
</>
) : (
<CustomSearchSelect
customButton={
<button
type="button"
className="flex items-center gap-1 rounded-sm bg-brand-surface-2 px-3 py-1.5 text-xs"
>
<PlusIcon className="h-3 w-3" />
Add label
</button>
}
value={pageDetails.labels}
onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
footerOption={
<button
type="button"
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
onClick={() => {
setLabelModal(true);
}}
>
<span className="flex items-center justify-start gap-1 text-brand-secondary">
<PlusIcon className="h-4 w-4" aria-hidden="true" />
<span>Create New Label</span>
</span>
</button>
}
options={options}
multiple
noChevron
/>
)}
<CustomSearchSelect
customButton={
<button
type="button"
className="flex items-center gap-1 rounded-sm bg-brand-surface-2 p-1.5 text-xs"
>
<PlusIcon className="h-3.5 w-3.5" />
{pageDetails.labels.length <= 0 && <span>Add Label</span>}
</button>
}
value={pageDetails.labels}
footerOption={
<button
type="button"
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
onClick={() => {
setLabelModal(true);
}}
>
<span className="flex items-center justify-start gap-1 text-brand-secondary">
<PlusIcon className="h-4 w-4" aria-hidden="true" />
<span>Create New Label</span>
</span>
</button>
}
onChange={(val: string[]) => partialUpdatePage({ labels_list: val })}
options={options}
multiple
noChevron
/>
</div>
</div>
<div className="flex items-center">