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: ui changes (#297)

Browse Source 
* fix: module card height and invalid date

* fix: issue details page title resizing fix
This commit is contained in:
Anmol Singh Bhatia 2023-02-17 18:51:45 +05:30 committed by GitHub
parent 45319d81db
commit 8c39717068
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { FC, useCallback, useEffect, useMemo } from "react"; import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
@ -38,6 +38,8 @@ 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,
@ -104,21 +106,32 @@ 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>
<Input <textarea
id="name" id="name"
placeholder="Enter issue name" placeholder="Enter issue name"
name="name" name="name"
value={watch("name")} value={watch("name")}
autoComplete="off" ref={textareaRef}
onChange={(e) => { onChange={(e) => {
setIssueTitleName(e.target.value);
setValue("name", e.target.value); setValue("name", e.target.value);
debounceHandler(); debounceHandler();
}} }}
mode="transparent" required={true}
className="text-xl font-medium" className="block px-3 py-2 text-xl
disabled={isNotAllowed} w-full overflow-hidden resize-none min-h-10
rounded border-none bg-transparent ring-0 focus:ring-1 focus:ring-theme outline-none "
role="textbox "
/> />
<span>{errors.name ? errors.name.message : null}</span> <span>{errors.name ? errors.name.message : null}</span>
<RemirrorRichTextEditor <RemirrorRichTextEditor

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

@ -70,7 +70,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module }) => {
</CustomMenu> </CustomMenu>
</div> </div>
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}> <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<a className="flex flex-col cursor-pointer rounded-md border bg-white p-3 "> <a className="flex flex-col justify-between h-full cursor-pointer rounded-md border bg-white p-3 ">
<span className="w-3/4 text-ellipsis overflow-hidden">{module.name}</span> <span className="w-3/4 text-ellipsis overflow-hidden">{module.name}</span>
<div className="mt-4 grid grid-cols-2 gap-2 text-xs md:grid-cols-4"> <div className="mt-4 grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
<div className="space-y-2"> <div className="space-y-2">
@ -89,7 +89,9 @@ 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" />
{renderShortNumericDateFormat(module.target_date ?? "")} {module.target_date
? renderShortNumericDateFormat(module?.target_date)
: "Invalid"}
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">