Skip to content

Commit

Permalink
chore: bug fixes & improvement (#3218)
Browse files Browse the repository at this point in the history 
* chore: draft issue validation added to prevent saving empty or whitespace title

* chore: resolve scrolling issue in page empty state

* chore: kanban layout quick add issue improvement
  • Loading branch information
@anmolsinghbhatia
anmolsinghbhatia authored Dec 21, 2023
1 parent 22b0bb4 commit ee08feb
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 61 deletions.
120 changes: 61 additions & 59 deletions web/components/common/new-empty-state.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,69 +41,71 @@ export const NewEmptyState: React.FC<Props> = ({
setIsHovered(false);
};
return (
<div className=" flex h-full w-full flex-col items-center justify-center ">
<div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-16">
<h3 className="text-2xl font-semibold">{title}</h3>
{description && <p className=" text-lg">{description}</p>}
<div className="relative w-full max-w-6xl">
<Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
</div>
<div className="flex items-center justify-center overflow-y-auto">
<div className=" flex h-full w-full flex-col items-center justify-center ">
<div className="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-custom-border-200 px-10 py-7 shadow-sm md:m-16">
<h3 className="text-2xl font-semibold">{title}</h3>
{description && <p className=" text-lg">{description}</p>}
<div className="relative w-full max-w-6xl">
<Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
</div>

<div className="relative flex items-start justify-center">
{primaryButton && (
<Button
className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
size="lg"
variant="primary"
onClick={primaryButton.onClick}
disabled={disabled}
>
{primaryButton.text}
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className={`absolute bg-blue-300 ${
comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
} z-10 h-2.5 w-2.5 animate-ping rounded-full`}
/>
<div
className={`absolute bg-blue-400/40 ${
comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
} h-1.5 w-1.5 rounded-full`}
/>
</Button>
)}
{comicBox &&
isHovered &&
(comicBox.direction === "right" ? (
<div
className={`absolute left-1/2 top-0 flex max-w-sm ${
comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
} pb-5`}
<div className="relative flex items-start justify-center">
{primaryButton && (
<Button
className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
size="lg"
variant="primary"
onClick={primaryButton.onClick}
disabled={disabled}
>
<div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
<div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
</div>
<div className="rounded-md border border-custom-border-200 bg-custom-background-100">
<h1 className="p-5">
<h3 className="text-lg font-semibold">{comicBox?.title}</h3>
<h4 className="mt-1 text-sm">{comicBox?.description}</h4>
</h1>
</div>
</div>
) : (
<div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
<div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
<div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
{primaryButton.text}
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
className={`absolute bg-blue-300 ${
comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
} z-10 h-2.5 w-2.5 animate-ping rounded-full`}
/>
<div
className={`absolute bg-blue-400/40 ${
comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
} h-1.5 w-1.5 rounded-full`}
/>
</Button>
)}
{comicBox &&
isHovered &&
(comicBox.direction === "right" ? (
<div
className={`absolute left-1/2 top-0 flex max-w-sm ${
comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
} pb-5`}
>
<div className="relative mt-5 h-0 w-0 border-b-[11px] border-r-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
<div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
</div>
<div className="rounded-md border border-custom-border-200 bg-custom-background-100">
<h1 className="p-5">
<h3 className="text-lg font-semibold">{comicBox?.title}</h3>
<h4 className="mt-1 text-sm">{comicBox?.description}</h4>
</h1>
</div>
</div>
<div className="rounded-md border border-custom-border-200 bg-custom-background-100">
<h1 className="p-5">
<h3 className="text-lg font-semibold">{comicBox?.title}</h3>
<h4 className="mt-1 text-sm">{comicBox?.description}</h4>
</h1>
) : (
<div className="absolute right-1/2 top-0 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
<div className="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-custom-border-200 border-y-transparent">
<div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-custom-background-100 border-y-transparent" />
</div>
<div className="rounded-md border border-custom-border-200 bg-custom-background-100">
<h1 className="p-5">
<h3 className="text-lg font-semibold">{comicBox?.title}</h3>
<h4 className="mt-1 text-sm">{comicBox?.description}</h4>
</h1>
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const Inputs = (props: any) => {
}, [setFocus]);

return (
<div>
<div className="w-full">
<h4 className="text-xs font-medium leading-5 text-custom-text-300">{projectDetail?.identifier ?? "..."}</h4>
<input
autoComplete="off"
Expand Down
2 changes: 1 addition & 1 deletion web/components/issues/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
*/

const onDiscardClose = () => {
if (formDirtyState !== null) {
if (formDirtyState !== null && formDirtyState.name.trim() !== "") {
setShowConfirmDiscard(true);
} else {
handleClose();
Expand Down

0 comments on commit ee08feb

Please sign in to comment.