calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-07-06 12:19:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Perfect toolbar

Browse Source
This commit is contained in:
Owen
2026-06-08 17:39:07 -07:00
parent 2c7b8006cf
commit 780e8babe4
2 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/vnc/VncClient.tsx
View File

@@ -298,6 +298,13 @@ export default function VncClient({
style={{ display: connected ? "flex" : "none" }} style={{ display: connected ? "flex" : "none" }}
> >
<CollapsibleSessionToolbar> <CollapsibleSessionToolbar>
<Button
size="sm"
variant="destructive"
onClick={disconnect}
>
{t("sshTerminate")}
</Button>
<Button <Button
size="sm" size="sm"
variant="secondary" variant="secondary"
@@ -323,13 +330,6 @@ export default function VncClient({
> >
{t("vncPasteClipboard")} {t("vncPasteClipboard")}
</Button> </Button>
<Button
size="sm"
variant="destructive"
onClick={disconnect}
>
{t("sshTerminate")}
</Button>
</CollapsibleSessionToolbar> </CollapsibleSessionToolbar>
<div <div

21
src/components/CollapsibleSessionToolbar.tsx
View File

@@ -19,18 +19,23 @@ export default function CollapsibleSessionToolbar({
<div className="pointer-events-none absolute inset-x-0 top-0 z-10"> <div className="pointer-events-none absolute inset-x-0 top-0 z-10">
<div <div
className={cn( className={cn(
"pointer-events-auto absolute inset-x-0 top-0 bg-black text-white shadow-lg transition-transform duration-200 ease-out", "pointer-events-auto absolute inset-x-0 top-0 isolate transition-transform duration-200 ease-out",
open ? "translate-y-0" : "-translate-y-full" open ? "translate-y-0" : "-translate-y-full"
)} )}
> >
<div className="flex flex-wrap items-center gap-2 p-2"> <div className="relative z-20 flex flex-wrap items-center gap-2 bg-background p-2">
{children} {children}
</div> </div>
{/* Gray backdrop that visually "disappears" into the toolbar {/* Secondary toggle backdrop kept as a distinct style under
and peeks out behind the top of the orange pull tab. */} the main handle button. */}
<div <button
aria-hidden="true" type="button"
className="pointer-events-none absolute left-1/2 top-full h-4 w-36 -translate-x-1/2 -translate-y-2 rounded-md bg-neutral-300 shadow-sm dark:bg-neutral-500" onClick={() => setOpen((v) => !v)}
aria-label={
open ? t("sessionToolbarHide") : t("sessionToolbarShow")
}
aria-expanded={open}
className="absolute left-1/2 top-full -z-20 h-4 w-72 -translate-x-1/2 -translate-y-2 rounded-md bg-neutral-200 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary dark:bg-neutral-500"
/> />
<button <button
type="button" type="button"
@@ -39,7 +44,7 @@ export default function CollapsibleSessionToolbar({
open ? t("sessionToolbarHide") : t("sessionToolbarShow") open ? t("sessionToolbarHide") : t("sessionToolbarShow")
} }
aria-expanded={open} aria-expanded={open}
className="absolute left-1/2 top-full flex h-5 w-6 -translate-x-1/2 items-center justify-center rounded-b-md bg-primary text-primary-foreground shadow-md transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary" className="absolute left-1/2 top-full -z-10 flex h-5 w-6 -translate-x-1/2 items-center justify-center rounded-b-sm bg-primary text-primary-foreground transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
> >
{open ? ( {open ? (
<ChevronUp className="h-3 w-3" /> <ChevronUp className="h-3 w-3" />