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: issue title resizing fix (#300)

Browse Source 
* fix: issue title resizing fix

* fix: header ui fix and invalid date label updated
This commit is contained in:
Anmol Singh Bhatia 2023-02-17 19:58:27 +05:30 committed by GitHub
parent c979599e53
commit fcb932dc5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/app/components/issues/description-form.tsx
View File

@ -1,4 +1,4 @@
import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { FC, useCallback, useEffect, useMemo } from "react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
@ -7,7 +7,7 @@ import { useForm } from "react-hook-form";
// lodash // lodash
import debounce from "lodash.debounce"; import debounce from "lodash.debounce";
// components // components
import { Loader, Input } from "components/ui"; import { Loader, TextArea } from "components/ui";
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
ssr: false, ssr: false,
loading: () => ( loading: () => (
@ -38,8 +38,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
userAuth, userAuth,
}) => { }) => {
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const [issueTitleName, setIssueTitleName] = useState("");
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
const { const {
handleSubmit, handleSubmit,
@ -106,31 +104,21 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
const isNotAllowed = userAuth.isGuest || userAuth.isViewer; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
useEffect(() => {
if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = "0px";
const scrollHeight = textareaRef.current.scrollHeight;
textareaRef.current.style.height = scrollHeight + "px";
}
}, [issueTitleName]);
return ( return (
<div> <div>
<textarea <TextArea
id="name" id="name"
placeholder="Enter issue name" placeholder="Enter issue name"
name="name" name="name"
value={watch("name")} value={watch("name")}
ref={textareaRef}
onChange={(e) => { onChange={(e) => {
setIssueTitleName(e.target.value);
setValue("name", e.target.value); setValue("name", e.target.value);
debounceHandler(); debounceHandler();
}} }}
required={true} required={true}
className="block px-3 py-2 text-xl className="block px-3 py-2 text-xl
w-full overflow-hidden resize-none min-h-10 w-full overflow-hidden resize-none min-h-10
rounded border-none bg-transparent ring-0 focus:ring-1 focus:ring-theme outline-none " rounded border-none bg-transparent ring-0 focus:ring-1 focus:ring-theme outline-none "
role="textbox " role="textbox "
/> />
<span>{errors.name ? errors.name.message : null}</span> <span>{errors.name ? errors.name.message : null}</span>

4
apps/app/components/modules/single-module-card.tsx
View File

@ -89,9 +89,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module }) => {
<h6 className="text-gray-500">END DATE</h6> <h6 className="text-gray-500">END DATE</h6>
<div className="flex w-min cursor-pointer items-center gap-1 whitespace-nowrap rounded border px-1.5 py-0.5 text-xs shadow-sm"> <div className="flex w-min cursor-pointer items-center gap-1 whitespace-nowrap rounded border px-1.5 py-0.5 text-xs shadow-sm">
<CalendarDaysIcon className="h-3 w-3" /> <CalendarDaysIcon className="h-3 w-3" />
{module.target_date {module.target_date ? renderShortNumericDateFormat(module?.target_date) : "N/A"}
? renderShortNumericDateFormat(module?.target_date)
: "Invalid"}
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">

2
apps/app/layouts/app-layout/app-header.tsx
View File

@ -11,7 +11,7 @@ type Props = {
}; };
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => ( const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
<div className="flex w-full flex-col gap-y-4 border-b border-gray-200 bg-gray-50 px-5 py-4 lg:flex-row lg:items-center lg:justify-between"> <div className="flex w-full flex-row items-center justify-between gap-y-4 border-b border-gray-200 bg-gray-50 px-5 py-4 ">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="block md:hidden"> <div className="block md:hidden">
<Button <Button