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

style: quick add issue UI improvements in all the layouts (#2615)

Browse Source 
* 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 2023-11-03 19:17:50 +05:30 committed by GitHub
parent 79cad16aba
commit 0d2c399555
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx
View File

@ -1,6 +1,5 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Transition } from "@headlessui/react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
// store // store
@ -66,7 +65,7 @@ const Inputs = (props: any) => {
return ( 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 <input
type="text" type="text"
autoComplete="off" autoComplete="off"
@ -74,7 +73,7 @@ const Inputs = (props: any) => {
{...register("name", { {...register("name", {
required: "Issue title is required.", 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 ( return (
<> <>
<Transition {isOpen && (
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"
>
<div <div
ref={ref} ref={ref}
className={`transition-all z-20 w-full ${ className={`transition-all z-20 w-full ${
@ -198,21 +189,21 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) =
> >
<form <form
onSubmit={handleSubmit(onSubmitHandler)} 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} /> <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
</form> </form>
</div> </div>
</Transition> )}
{!isOpen && ( {!isOpen && (
<div className="hidden group-hover:block border-[0.5px] border-custom-border-200 rounded"> <div className="hidden group-hover:block border-[0.5px] border-custom-border-200 rounded">
<button <button
type="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)} 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> <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
</button> </button>
</div> </div>

36
web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx
View File

@ -1,25 +1,21 @@
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { Transition } from "@headlessui/react";
import { PlusIcon } from "lucide-react";
// store
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { PlusIcon } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// constants
import { createIssuePayload } from "constants/issue";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useKeypress from "hooks/use-keypress"; import useKeypress from "hooks/use-keypress";
import useProjectDetails from "hooks/use-project-details"; import useProjectDetails from "hooks/use-project-details";
import useOutsideClickDetector from "hooks/use-outside-click-detector"; import useOutsideClickDetector from "hooks/use-outside-click-detector";
// helpers
import { renderDateFormat } from "helpers/date-time.helper";
// types // types
import { IIssue } from "types"; import { IIssue } from "types";
import { renderDateFormat } from "helpers/date-time.helper"; // constants
import { createIssuePayload } from "constants/issue";
type Props = { type Props = {
prePopulatedData?: Partial<IIssue>; prePopulatedData?: Partial<IIssue>;
@ -149,25 +145,17 @@ export const GanttInlineCreateIssueForm: React.FC<Props> = observer((props) => {
return ( return (
<> <>
<Transition {isOpen && (
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"
>
<form <form
ref={ref} 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)} onSubmit={handleSubmit(onSubmitHandler)}
> >
<div className="w-[14px] h-[14px] rounded-full border border-custom-border-1000 flex-shrink-0" /> <div className="w-3 h-3 rounded-full border border-custom-border-1000 flex-shrink-0" />
<h4 className="text-sm text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4> <h4 className="text-xs text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
<Inputs register={register} setFocus={setFocus} /> <Inputs register={register} setFocus={setFocus} />
</form> </form>
</Transition> )}
{isOpen && ( {isOpen && (
<p className="text-xs ml-3 mt-3 italic text-custom-text-200"> <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" className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
onClick={() => setIsOpen(true)} 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> <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
</button> </button>
)} )}

23
web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx
View File

@ -1,7 +1,6 @@
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { Transition } from "@headlessui/react";
import { PlusIcon } from "lucide-react"; import { PlusIcon } from "lucide-react";
// store // store
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
@ -39,7 +38,7 @@ const Inputs = (props: any) => {
return ( return (
<div> <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 <input
autoComplete="off" autoComplete="off"
placeholder="Issue Title" placeholder="Issue Title"
@ -151,26 +150,18 @@ export const BoardInlineCreateIssueForm: React.FC<Props> = observer((props) => {
return ( return (
<div> <div>
<Transition {isOpen && (
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"
>
<form <form
ref={ref} ref={ref}
onSubmit={handleSubmit(onSubmitHandler)} 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} /> <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
</form> </form>
</Transition> )}
{isOpen && ( {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 Press {"'"}Enter{"'"} to add another issue
</p> </p>
)} )}
@ -178,10 +169,10 @@ export const BoardInlineCreateIssueForm: React.FC<Props> = observer((props) => {
{!isOpen && ( {!isOpen && (
<button <button
type="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)} 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> <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
</button> </button>
)} )}

2
web/components/issues/issue-layouts/list/block.tsx
View File

@ -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"> <div className="text-sm p-3 relative bg-custom-background-100 flex items-center gap-3">
{display_properties && display_properties?.key && ( {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} {issue?.project_detail?.identifier}-{issue.sequence_id}
</div> </div>
)} )}

25
web/components/issues/issue-layouts/list/inline-create-issue-form.tsx
View File

@ -1,7 +1,6 @@
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { Transition } from "@headlessui/react";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
@ -39,7 +38,7 @@ const Inputs = (props: any) => {
return ( 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 <input
type="text" type="text"
autoComplete="off" autoComplete="off"
@ -150,39 +149,33 @@ export const ListInlineCreateIssueForm: React.FC<Props> = observer((props) => {
return ( return (
<div className="bg-custom-background-100"> <div className="bg-custom-background-100">
<Transition {isOpen && (
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"
>
<form <form
ref={ref} ref={ref}
onSubmit={handleSubmit(onSubmitHandler)} 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} /> <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
</form> </form>
</Transition> )}
{isOpen && ( {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 Press {"'"}Enter{"'"} to add another issue
</p> </p>
)} )}
{!isOpen && ( {!isOpen && (
<div className="w-full border-t-[0.5px] border-custom-border-200">
<button <button
type="button" type="button"
className="flex items-center gap-x-[6px] text-custom-primary-100 px-3 py-1 rounded-md" className="flex items-center gap-x-[6px] text-custom-primary-100 p-3"
onClick={() => setIsOpen(true)} onClick={() => setIsOpen(true)}
> >
<PlusIcon className="h-3 w-3" /> <PlusIcon className="h-3.5 w-3.5 stroke-2" />
<span className="text-sm font-medium text-custom-primary-100">New Issue</span> <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
</button> </button>
</div>
)} )}
</div> </div>
); );

23
web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx
View File

@ -1,7 +1,6 @@
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { Transition } from "@headlessui/react";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
@ -39,7 +38,7 @@ const Inputs = (props: any) => {
return ( 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 <input
type="text" type="text"
autoComplete="off" autoComplete="off"
@ -47,7 +46,7 @@ const Inputs = (props: any) => {
{...register("name", { {...register("name", {
required: "Issue title is required.", 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 ( return (
<div> <div>
<Transition {isOpen && (
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"
>
<div> <div>
<form <form
ref={ref} ref={ref}
@ -172,7 +163,7 @@ export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props
<Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} /> <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
</form> </form>
</div> </div>
</Transition> )}
{isOpen && ( {isOpen && (
<p className="text-xs ml-3 mt-3 italic text-custom-text-200"> <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 && ( {!isOpen && (
<div className="flex items-center">
<button <button
type="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 pt-3 rounded-md"
onClick={() => setIsOpen(true)} 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> <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
</button> </button>
</div>
)} )}
</div> </div>
); );