fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 09:49:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update style of add system dialog

Browse Source
This commit is contained in:
Henry Dollman
2025-02-06 20:01:04 -05:00
parent 44d930a700
commit 31d52d5e15
2 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
beszel/site/src/components/add-system.tsx
View File

@@ -44,14 +44,9 @@ export function AddSystemButton({ className }: { className?: string }) {
KEY: "${publicKey}"`)
}
function copyDockerRun(port: string) {
copyToClipboard(`docker run -d \
--name beszel-agent \
--network host \
--restart unless-stopped \
-v /var/run/docker.sock:/var/run/docker.sock:ro \
-e KEY="${publicKey}" \
-e PORT=${port} \
henrygd/beszel-agent:latest`)
copyToClipboard(
`docker run -d --name beszel-agent --network host --restart unless-stopped -v /var/run/docker.sock:/var/run/docker.sock:ro -e KEY="${publicKey}" -e PORT=${port} henrygd/beszel-agent:latest`
)
}
function copyInstallCommand(port: string) {
@@ -91,7 +86,7 @@ export function AddSystemButton({ className }: { className?: string }) {
</Trans>
</Button>
</DialogTrigger>
<DialogContent className="w-[90%] sm:max-w-[440px] rounded-lg">
<DialogContent className="w-[90%] sm:w-auto sm:ns-dialog max-w-full rounded-lg">
<Tabs defaultValue="docker">
<DialogHeader>
<DialogTitle className="mb-2">
@@ -106,7 +101,7 @@ export function AddSystemButton({ className }: { className?: string }) {
</DialogHeader>
{/* Docker */}
<TabsContent value="docker">
<DialogDescription className="mb-4 leading-normal">
<DialogDescription className="mb-4 leading-normal w-0 min-w-full">
<Trans>
The agent must be running on the system to connect. Copy the
<code className="bg-muted px-1 rounded-sm leading-3">docker-compose.yml</code> for the agent below.
@@ -115,7 +110,7 @@ export function AddSystemButton({ className }: { className?: string }) {
</TabsContent>
{/* Binary */}
<TabsContent value="binary">
<DialogDescription className="mb-4 leading-normal">
<DialogDescription className="mb-4 leading-normal w-0 min-w-full">
<Trans>
The agent must be running on the system to connect. Copy the installation command for the agent below.
</Trans>
@@ -168,24 +163,24 @@ export function AddSystemButton({ className }: { className?: string }) {
</div>
{/* Docker */}
<TabsContent value="docker">
<DialogFooter className="flex justify-end gap-2 sm:w-[calc(100%+20px)] sm:-ms-[20px]">
<div className="flex gap-0 border border-muted rounded-lg">
<DialogFooter className="flex justify-end gap-x-2 gap-y-3 flex-col">
<div className="flex gap-0 rounded-lg">
<Button
type="button"
variant={"ghost"}
variant="outline"
onClick={() => copyDockerCompose(port.current.value)}
className="rounded-r-none border-r-0"
className="rounded-e-none dark:border-e-0 grow"
>
<Trans>Copy</Trans> docker compose
</Button>
<div className="w-px h-full bg-muted"></div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className={"px-2 rounded-l-none border-l-0"}>
<Button variant="outline" className={"px-2 rounded-s-none border-s-0"}>
<ChevronDownIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => copyDockerRun(port.current.value)}>
<Trans>Copy</Trans> docker run
</DropdownMenuItem>
@@ -199,8 +194,8 @@ export function AddSystemButton({ className }: { className?: string }) {
</TabsContent>
{/* Binary */}
<TabsContent value="binary">
<DialogFooter className="flex justify-end gap-2 sm:w-[calc(100%+20px)] sm:-ms-[20px]">
<Button type="button" variant={"ghost"} onClick={() => copyInstallCommand(port.current.value)}>
<DialogFooter className="flex justify-end gap-x-2 gap-y-3 flex-col">
<Button type="button" variant="outline" onClick={() => copyInstallCommand(port.current.value)}>
<Trans>Copy Linux command</Trans>
</Button>
<Button>

10
beszel/site/src/index.css
View File

@@ -78,9 +78,19 @@
body {
@apply bg-background text-foreground;
}
}
@layer utilities {
.link {
@apply text-primary font-medium underline-offset-4 hover:underline;
}
/* New system dialog width */
.ns-dialog {
min-width: 30.3rem;
}
:where(:lang(zh), :lang(zh-CN), :lang(ko)) .ns-dialog {
min-width: 27.9rem;
}
}
.recharts-tooltip-wrapper {