thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests 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 { Button, Input, ToggleSwitch } from "@plane/ui";
// icons
import { Sparkle, X } from "lucide-react";
import { LayoutPanelTop, Sparkle, X } from "lucide-react";
// types
import type { IUser, IIssue, ISearchIssueResponse } from "types";
// components
@ -491,7 +491,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
</div>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && (
<div>
<>
<Controller
control={control}
name="estimate_point"
@ -499,42 +499,76 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
<IssueEstimateSelect value={value} onChange={onChange} />
)}
/>
</div>
</>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
<Controller
control={control}
name="parent"
render={({ field: { onChange } }) => (
<ParentIssuesListModal
isOpen={parentIssueListModalOpen}
handleClose={() => setParentIssueListModalOpen(false)}
onChange={(issue) => {
onChange(issue.id);
setSelectedParentIssue(issue);
}}
projectId={projectId}
/>
)}
/>
)}
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
<CustomMenu ellipsis>
{watch("parent") ? (
<>
<CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
Change parent issue
<>
<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.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>
)}
</CustomMenu>
<Controller
control={control}
name="parent"
render={({ field: { onChange } }) => (
<ParentIssuesListModal
isOpen={parentIssueListModalOpen}
handleClose={() => setParentIssueListModalOpen(false)}
onChange={(issue) => {
onChange(issue.id);
setSelectedParentIssue(issue);
}}
projectId={projectId}
/>
)}
/>
</>
)}
</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"
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
handleFormSubmit={handleFormSubmit}
initialData={data ?? prePopulateData}