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

104
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,42 +499,76 @@ 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")) && (
<Controller <>
control={control} <CustomMenu
name="parent" customButton={
render={({ field: { onChange } }) => ( <button className="flex cursor-pointer items-center rounded-md border border-custom-border-200 text-xs shadow-sm duration-200">
<ParentIssuesListModal <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200 hover:bg-custom-background-80">
isOpen={parentIssueListModalOpen} {watch("parent") ? (
handleClose={() => setParentIssueListModalOpen(false)} <>
onChange={(issue) => { <LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
onChange(issue.id); <span className="whitespace-nowrap text-custom-text-100">
setSelectedParentIssue(issue); {selectedParentIssue &&
}} `${selectedParentIssue.project__identifier}-
projectId={projectId} ${selectedParentIssue.sequence_id}`}
/> </span>
)} </>
/> ) : (
)} <>
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && ( <LayoutPanelTop className="h-3.5 w-3.5 flex-shrink-0" />
<CustomMenu ellipsis> <span className="whitespace-nowrap">Add Parent</span>
{watch("parent") ? ( </>
<> )}
<CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}> </span>
Change parent issue </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.MenuItem>
<CustomMenu.MenuItem renderAs="button" onClick={() => setValue("parent", null)}> )}
Remove parent issue </CustomMenu>
</CustomMenu.MenuItem> <Controller
</> control={control}
) : ( name="parent"
<CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}> render={({ field: { onChange } }) => (
Select Parent Issue <ParentIssuesListModal
</CustomMenu.MenuItem> isOpen={parentIssueListModalOpen}
)} handleClose={() => setParentIssueListModalOpen(false)}
</CustomMenu> onChange={(issue) => {
onChange(issue.id);
setSelectedParentIssue(issue);
}}
projectId={projectId}
/>
)}
/>
</>
)} )}
</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}