calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-06-10 17:43:15 +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" }}
>
<CollapsibleSessionToolbar>
<Button
size="sm"
variant="destructive"
onClick={disconnect}
>
{t("sshTerminate")}
</Button>
<Button
size="sm"
variant="secondary"
@@ -323,13 +330,6 @@ export default function VncClient({
>
{t("vncPasteClipboard")}
</Button>
<Button
size="sm"
variant="destructive"
onClick={disconnect}
>
{t("sshTerminate")}
</Button>
</CollapsibleSessionToolbar>
<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={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"
)}
>
<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}
</div>
{/* Gray backdrop that visually "disappears" into the toolbar
and peeks out behind the top of the orange pull tab. */}
<div
aria-hidden="true"
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"
{/* Secondary toggle backdrop kept as a distinct style under
the main handle button. */}
<button
type="button"
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
type="button"
@@ -39,7 +44,7 @@ export default function CollapsibleSessionToolbar({
open ? t("sessionToolbarHide") : t("sessionToolbarShow")
}
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 ? (
<ChevronUp className="h-3 w-3" />