forked from github/plane
style: quick add issue UI improvements in all the layouts (#2615)
* style: quick add issue UI improvements in all the layouts * style: ui improvements * style: quick add icon size * chore: static sizes to tailwind classes --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
This commit is contained in:
Lakhan Baheti
GitHub
parent
79cad16aba
commit
0d2c399555
@ -1,6 +1,5 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { Transition } from "@headlessui/react";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
// store
|
||||
@ -66,7 +65,7 @@ const Inputs = (props: any) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h4 className="text-sm font-medium leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
|
||||
<h4 className="text-xs leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
|
||||
<input
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
@ -74,7 +73,7 @@ const Inputs = (props: any) => {
|
||||
{...register("name", {
|
||||
required: "Issue title is required.",
|
||||
})}
|
||||
className="w-full pr-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
|
||||
className="w-full pr-2 py-1.5 rounded-md bg-transparent text-xs font-medium leading-5 text-custom-text-200 outline-none"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
@ -181,15 +180,7 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) =
|
||||
|
||||
return (
|
||||
<>
|
||||
<Transition
|
||||
show={isOpen}
|
||||
enter="transition ease-in-out duration-200 transform"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in-out duration-200 transform"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
{isOpen && (
|
||||
<div
|
||||
ref={ref}
|
||||
className={`transition-all z-20 w-full ${
|
||||
@ -198,21 +189,21 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) =
|
||||
>
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmitHandler)}
|
||||
className="flex w-full px-1.5 border-[0.5px] border-custom-border-100 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
|
||||
className="flex w-full px-2 border-[0.5px] border-custom-border-200 rounded z-50 items-center gap-x-2 bg-custom-background-100 shadow-custom-shadow-2xs transition-opacity"
|
||||
>
|
||||
<Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
|
||||
</form>
|
||||
</div>
|
||||
</Transition>
|
||||
)}
|
||||
|
||||
{!isOpen && (
|
||||
<div className="hidden group-hover:block border-[0.5px] border-custom-border-200 rounded">
|
||||
<button
|
||||
type="button"
|
||||
className="w-full flex items-center gap-x-[6px] text-custom-primary-100 px-1 py-1.5 rounded-md"
|
||||
className="w-full flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1.5 rounded-md"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,25 +1,21 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Transition } from "@headlessui/react";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
|
||||
// store
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
// constants
|
||||
import { createIssuePayload } from "constants/issue";
|
||||
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useKeypress from "hooks/use-keypress";
|
||||
import useProjectDetails from "hooks/use-project-details";
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
|
||||
// helpers
|
||||
import { renderDateFormat } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { renderDateFormat } from "helpers/date-time.helper";
|
||||
// constants
|
||||
import { createIssuePayload } from "constants/issue";
|
||||
|
||||
type Props = {
|
||||
prePopulatedData?: Partial<IIssue>;
|
||||
@ -149,25 +145,17 @@ export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Transition
|
||||
show={isOpen}
|
||||
enter="transition ease-in-out duration-200 transform"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in-out duration-200 transform"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
{isOpen && (
|
||||
<form
|
||||
ref={ref}
|
||||
className="flex py-3 px-4 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-sm"
|
||||
className="flex py-3 px-2 border-[0.5px] border-custom-border-100 mr-2.5 items-center rounded gap-x-2 bg-custom-background-100 shadow-custom-shadow-2xs"
|
||||
onSubmit={handleSubmit(onSubmitHandler)}
|
||||
>
|
||||
<div className="w-[14px] h-[14px] rounded-full border border-custom-border-1000 flex-shrink-0" />
|
||||
<h4 className="text-sm text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
|
||||
<div className="w-3 h-3 rounded-full border border-custom-border-1000 flex-shrink-0" />
|
||||
<h4 className="text-xs text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
|
||||
<Inputs register={register} setFocus={setFocus} />
|
||||
</form>
|
||||
</Transition>
|
||||
)}
|
||||
|
||||
{isOpen && (
|
||||
<p className="text-xs ml-3 mt-3 italic text-custom-text-200">
|
||||
@ -181,7 +169,7 @@ export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
|
||||
className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Transition } from "@headlessui/react";
|
||||
import { PlusIcon } from "lucide-react";
|
||||
// store
|
||||
import { observer } from "mobx-react-lite";
|
||||
@ -39,7 +38,7 @@ const Inputs = (props: any) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4 className="text-sm font-medium leading-5 text-custom-text-300">{projectDetails?.identifier ?? "..."}</h4>
|
||||
<h4 className="text-xs font-medium leading-5 text-custom-text-300">{projectDetails?.identifier ?? "..."}</h4>
|
||||
<input
|
||||
autoComplete="off"
|
||||
placeholder="Issue Title"
|
||||
@ -151,26 +150,18 @@ export const BoardInlineCreateIssueForm: React.FC<Props> = observer((props) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Transition
|
||||
show={isOpen}
|
||||
enter="transition ease-in-out duration-200 transform"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in-out duration-200 transform"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
{isOpen && (
|
||||
<form
|
||||
ref={ref}
|
||||
onSubmit={handleSubmit(onSubmitHandler)}
|
||||
className="flex flex-col border-[0.5px] border-custom-border-100 justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow-custom-shadow-sm"
|
||||
className="flex flex-col border-[0.5px] border-custom-border-100 justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 mx-1.5 rounded bg-custom-background-300 shadow-custom-shadow-sm"
|
||||
>
|
||||
<Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
|
||||
</form>
|
||||
</Transition>
|
||||
)}
|
||||
|
||||
{isOpen && (
|
||||
<p className="text-xs ml-3 italic text-custom-text-200">
|
||||
<p className="text-xs ml-3 italic mb-2 text-custom-text-200">
|
||||
Press {"'"}Enter{"'"} to add another issue
|
||||
</p>
|
||||
)}
|
||||
@ -178,10 +169,10 @@ export const BoardInlineCreateIssueForm: React.FC<Props> = observer((props) => {
|
||||
{!isOpen && (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
|
||||
className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-3 rounded-md"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
@ -26,7 +26,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
|
||||
<>
|
||||
<div className="text-sm p-3 relative bg-custom-background-100 flex items-center gap-3">
|
||||
{display_properties && display_properties?.key && (
|
||||
<div className="flex-shrink-0 text-xs text-custom-text-300">
|
||||
<div className="flex-shrink-0 text-xs text-custom-text-300 font-medium">
|
||||
{issue?.project_detail?.identifier}-{issue.sequence_id}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Transition } from "@headlessui/react";
|
||||
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
@ -39,7 +38,7 @@ const Inputs = (props: any) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h4 className="text-sm font-medium leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
|
||||
<h4 className="text-xs font-medium text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
|
||||
<input
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
@ -150,39 +149,33 @@ export const ListInlineCreateIssueForm: React.FC<Props> = observer((props) => {
|
||||
|
||||
return (
|
||||
<div className="bg-custom-background-100">
|
||||
<Transition
|
||||
show={isOpen}
|
||||
enter="transition ease-in-out duration-200 transform"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in-out duration-200 transform"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
{isOpen && (
|
||||
<form
|
||||
ref={ref}
|
||||
onSubmit={handleSubmit(onSubmitHandler)}
|
||||
className="flex border-[0.5px] border-t-0 border-custom-border-100 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
|
||||
className="absolute flex items-center gap-x-3 border-[0.5px] w-full border-t-0 border-custom-border-100 px-3 bg-custom-background-100 shadow-custom-shadow-sm z-10"
|
||||
>
|
||||
<Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
|
||||
</form>
|
||||
</Transition>
|
||||
)}
|
||||
|
||||
{isOpen && (
|
||||
<p className="text-xs ml-3 mt-3 italic text-custom-text-200">
|
||||
<p className="text-xs ml-3 my-3 mt-14 italic text-custom-text-200">
|
||||
Press {"'"}Enter{"'"} to add another issue
|
||||
</p>
|
||||
)}
|
||||
|
||||
{!isOpen && (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-x-[6px] text-custom-primary-100 px-3 py-1 rounded-md"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
</button>
|
||||
<div className="w-full border-t-[0.5px] border-custom-border-200">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-x-[6px] text-custom-primary-100 p-3"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Transition } from "@headlessui/react";
|
||||
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
@ -39,7 +38,7 @@ const Inputs = (props: any) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h4 className="text-sm font-medium leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
|
||||
<h4 className="text-xs w-20 leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
|
||||
<input
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
@ -47,7 +46,7 @@ const Inputs = (props: any) => {
|
||||
{...register("name", {
|
||||
required: "Issue title is required.",
|
||||
})}
|
||||
className="w-full px-2 py-3 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
|
||||
className="w-full py-3 rounded-md bg-transparent text-sm leading-5 text-custom-text-200 outline-none"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
@ -154,15 +153,7 @@ export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Transition
|
||||
show={isOpen}
|
||||
enter="transition ease-in-out duration-200 transform"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in-out duration-200 transform"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
{isOpen && (
|
||||
<div>
|
||||
<form
|
||||
ref={ref}
|
||||
@ -172,7 +163,7 @@ export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props
|
||||
<Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
|
||||
</form>
|
||||
</div>
|
||||
</Transition>
|
||||
)}
|
||||
|
||||
{isOpen && (
|
||||
<p className="text-xs ml-3 mt-3 italic text-custom-text-200">
|
||||
@ -181,14 +172,16 @@ export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props
|
||||
)}
|
||||
|
||||
{!isOpen && (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
</button>
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 pt-3 rounded-md"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3.5 w-3.5 stroke-2" />
|
||||
<span className="text-sm font-medium text-custom-primary-100">New Issue</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user