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

style: create/update issue modal ui improvement (#2453)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-10-17 17:26:40 +05:30 committed by GitHub
parent 4b51d9ed6c
commit d689c63368
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
web/components/issues/form.tsx
View File

@ -24,7 +24,7 @@ import { CreateLabelModal } from "components/labels";
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
import { Button, Input, ToggleSwitch } from "@plane/ui"; import { Button, Input, ToggleSwitch } from "@plane/ui";
// icons // icons
import { Sparkle, X } from "lucide-react"; import { LayoutPanelTop, Sparkle, X } from "lucide-react";
// types // types
import type { IUser, IIssue, ISearchIssueResponse } from "types"; import type { IUser, IIssue, ISearchIssueResponse } from "types";
// components // components
@ -491,7 +491,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
</div> </div>
)} )}
{(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && ( {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
<div> <>
<Controller <Controller
control={control} control={control}
name="estimate_point" name="estimate_point"
@ -499,9 +499,60 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
<IssueEstimateSelect value={value} onChange={onChange} /> <IssueEstimateSelect value={value} onChange={onChange} />
)} )}
/> />
</div> </>
)} )}
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && ( {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
<>
<CustomMenu
customButton={
<button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200">
<span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80">
{watch("parent") ? (
<>
<LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
<span className="whitespace-nowrap text-custom-text-100">
{selectedParentIssue &&
`${selectedParentIssue.project__identifier}-
${selectedParentIssue.sequence_id}`}
</span>
</>
) : (
<>
<LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
<span className="whitespace-nowrap">Add Parent</span>
</>
)}
</span>
</button>
}
>
{watch("parent") ? (
<>
<CustomMenu.MenuItem
renderAs="button"
className="!p-1"
onClick={() => setParentIssueListModalOpen(true)}
>
Change parent issue
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
renderAs="button"
className="!p-1"
onClick={() => setValue("parent", null)}
>
Remove parent issue
</CustomMenu.MenuItem>
</>
) : (
<CustomMenu.MenuItem
renderAs="button"
className="!p-1"
onClick={() => setParentIssueListModalOpen(true)}
>
Select Parent Issue
</CustomMenu.MenuItem>
)}
</CustomMenu>
<Controller <Controller
control={control} control={control}
name="parent" name="parent"
@ -517,24 +568,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
/> />
)} )}
/> />
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
<CustomMenu ellipsis>
{watch("parent") ? (
<>
<CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
Change parent issue
</CustomMenu.MenuItem>
<CustomMenu.MenuItem renderAs="button" onClick={() => setValue("parent", null)}>
Remove parent issue
</CustomMenu.MenuItem>
</> </>
) : (
<CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
Select Parent Issue
</CustomMenu.MenuItem>
)}
</CustomMenu>
)} )}
</div> </div>
</div> </div>

2
web/components/issues/modal.tsx
View File

@ -439,7 +439,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-3xl">
<IssueForm <IssueForm
handleFormSubmit={handleFormSubmit} handleFormSubmit={handleFormSubmit}
initialData={data ?? prePopulateData} initialData={data ?? prePopulateData}