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

fix: add scroll into view when editing label in settings page (#660)

Browse Source
This commit is contained in:
Saheb Giri 2023-03-31 18:31:01 +05:30 committed by GitHub
parent d596e41d4d
commit abe34ad7b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { forwardRef, useEffect } from "react";
import { useRouter } from "next/router";
@ -31,12 +31,12 @@ const defaultValues: Partial<IIssueLabels> = {
color: "#ff0000",
};
export const CreateUpdateLabelInline: React.FC<Props> = ({
labelForm,
setLabelForm,
isUpdating,
labelToUpdate,
}) => {
type Ref = HTMLDivElement;
export const CreateUpdateLabelInline = forwardRef<Ref, Props>(function CreateUpdateLabelInline(
{ labelForm, setLabelForm, isUpdating, labelToUpdate },
ref
) {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@ -109,9 +109,10 @@ export const CreateUpdateLabelInline: React.FC<Props> = ({
return (
<div
className={`flex items-center gap-2 rounded-[10px] border bg-white p-5 ${
className={`flex items-center gap-2 scroll-m-8 rounded-[10px] border bg-white p-5 ${
labelForm ? "" : "hidden"
}`}
ref={ref}
>
<div className="h-8 w-8 flex-shrink-0">
<Popover className="relative z-10 flex h-full w-full items-center justify-center rounded-xl bg-gray-200">
@ -187,4 +188,4 @@ export const CreateUpdateLabelInline: React.FC<Props> = ({
)}
</div>
);
};
});

19
apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useRef } from "react";
import { useRouter } from "next/router";
@ -46,6 +46,8 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const scollToRef = useRef<HTMLDivElement>(null);
const { data: projectDetails } = useSWR(
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
workspaceSlug && projectId
@ -128,6 +130,7 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
setLabelForm={setLabelForm}
isUpdating={isUpdating}
labelToUpdate={labelToUpdate}
ref={scollToRef}
/>
)}
<>
@ -142,7 +145,12 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
key={label.id}
label={label}
addLabelToGroup={() => addLabelToGroup(label)}
editLabel={editLabel}
editLabel={(label) => {
editLabel(label);
scollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}}
handleLabelDelete={handleLabelDelete}
/>
);
@ -153,7 +161,12 @@ const LabelsSettings: NextPage<UserAuth> = (props) => {
label={label}
labelChildren={children}
addLabelToGroup={addLabelToGroup}
editLabel={editLabel}
editLabel={(label) => {
editLabel(label);
scollToRef.current?.scrollIntoView({
behavior: "smooth",
});
}}
handleLabelDelete={handleLabelDelete}
/>
);