Dokploy/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy synced 2025-06-26 18:27:59 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: improve domains page UX and button placement consistency

Browse Source
This commit is contained in:
Ali Issa 2025-01-31 02:59:23 -05:00
parent dc9a194bbe
commit 777980618f
2 changed files with 107 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
apps/dokploy/components/dashboard/application/domains/show-domains.tsx
View File

@ -7,7 +7,6 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react"; import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
@ -74,64 +73,64 @@ export const ShowDomains = ({ applicationId }: Props) => {
return ( return (
<div <div
key={item.domainId} key={item.domainId}
className="flex w-full items-center gap-4 max-sm:flex-wrap border p-4 rounded-lg" className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
> >
<Link <Link
className="md:basis-1/2 flex gap-2 lg:gap-3 items-center hover:underline transition-all w-full"
target="_blank" target="_blank"
href={`${item.https ? "https" : "http"}://${item.host}${item.path}`} href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
> >
<ExternalLink className="size-5" /> <span className="truncate max-w-full">{item.host}</span>
<ExternalLink className="size-4 min-w-4" />
</Link> </Link>
<Input disabled value={item.host} /> <div className="flex gap-8">
<Button variant="outline" disabled> <div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
{item.path} <span>{item.path}</span>
</Button> <span>{item.port}</span>
<Button variant="outline" disabled> <span>{item.https ? "HTTPS" : "HTTP"}</span>
{item.port} </div>
</Button>
<Button variant="outline" disabled> <div className="flex gap-2">
{item.https ? "HTTPS" : "HTTP"} <AddDomain
</Button> applicationId={applicationId}
<div className="flex flex-row gap-1"> domainId={item.domainId}
<AddDomain
applicationId={applicationId}
domainId={item.domainId}
>
<Button
variant="ghost"
size="icon"
className="group hover:bg-blue-500/10 "
> >
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" /> <Button
</Button> variant="ghost"
</AddDomain> size="icon"
<DialogAction className="group hover:bg-blue-500/10 "
title="Delete Domain" >
description="Are you sure you want to delete this domain?" <PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
type="destructive" </Button>
onClick={async () => { </AddDomain>
await deleteDomain({ <DialogAction
domainId: item.domainId, title="Delete Domain"
}) description="Are you sure you want to delete this domain?"
.then((data) => { type="destructive"
refetch(); onClick={async () => {
toast.success("Domain deleted successfully"); await deleteDomain({
domainId: item.domainId,
}) })
.catch(() => { .then(() => {
toast.error("Error deleting domain"); refetch();
}); toast.success("Domain deleted successfully");
}} })
> .catch(() => {
<Button toast.error("Error deleting domain");
variant="ghost" });
size="icon" }}
className="group hover:bg-red-500/10"
isLoading={isRemoving}
> >
<Trash2 className="size-4 text-primary group-hover:text-red-500" /> <Button
</Button> variant="ghost"
</DialogAction> size="icon"
className="group hover:bg-red-500/10"
isLoading={isRemoving}
>
<Trash2 className="size-4 text-primary group-hover:text-red-500" />
</Button>
</DialogAction>
</div>
</div> </div>
</div> </div>
); );

112
apps/dokploy/components/dashboard/compose/domains/show-domains.tsx
View File

@ -7,7 +7,6 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { api } from "@/utils/api"; import { api } from "@/utils/api";
import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react"; import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
@ -74,63 +73,70 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
return ( return (
<div <div
key={item.domainId} key={item.domainId}
className="flex w-full items-center gap-4 max-sm:flex-wrap border p-4 rounded-lg" className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
> >
<Link target="_blank" href={`http://${item.host}`}> <div className="md:basis-1/2 flex gap-6 w-full items-center">
<ExternalLink className="size-5" /> <span className="opacity-50 text-center font-medium text-sm">
</Link> {item.serviceName}
<Button variant="outline" disabled> </span>
{item.serviceName}
</Button> <Link
<Input disabled value={item.host} /> className="flex gap-2 lg:gap-3 items-center hover:underline transition-all w-full max-w-[calc(100%-4rem)]"
<Button variant="outline" disabled> target="_blank"
{item.path} href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
</Button>
<Button variant="outline" disabled>
{item.port}
</Button>
<Button variant="outline" disabled>
{item.https ? "HTTPS" : "HTTP"}
</Button>
<div className="flex flex-row gap-1">
<AddDomainCompose
composeId={composeId}
domainId={item.domainId}
> >
<Button <span className="truncate ">{item.host}</span>
variant="ghost" <ExternalLink className="size-4 min-w-4" />
size="icon" </Link>
className="group hover:bg-blue-500/10 " </div>
<div className="flex gap-8">
<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
<span>{item.path}</span>
<span>{item.port}</span>
<span>{item.https ? "HTTPS" : "HTTP"}</span>
</div>
<div className="flex gap-2">
<AddDomainCompose
composeId={composeId}
domainId={item.domainId}
> >
<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" /> <Button
</Button> variant="ghost"
</AddDomainCompose> size="icon"
<DialogAction className="group hover:bg-blue-500/10 "
title="Delete Domain" >
description="Are you sure you want to delete this domain?" <PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
type="destructive" </Button>
onClick={async () => { </AddDomainCompose>
await deleteDomain({ <DialogAction
domainId: item.domainId, title="Delete Domain"
}) description="Are you sure you want to delete this domain?"
.then((data) => { type="destructive"
refetch(); onClick={async () => {
toast.success("Domain deleted successfully"); await deleteDomain({
domainId: item.domainId,
}) })
.catch(() => { .then((data) => {
toast.error("Error deleting domain"); refetch();
}); toast.success("Domain deleted successfully");
}} })
> .catch(() => {
<Button toast.error("Error deleting domain");
variant="ghost" });
size="icon" }}
className="group hover:bg-red-500/10"
isLoading={isRemoving}
> >
<Trash2 className="size-4 text-primary group-hover:text-red-500" /> <Button
</Button> variant="ghost"
</DialogAction> size="icon"
className="group hover:bg-red-500/10"
isLoading={isRemoving}
>
<Trash2 className="size-4 text-primary group-hover:text-red-500" />
</Button>
</DialogAction>
</div>
</div> </div>
</div> </div>
); );