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

Add pulldown toolbar

Browse Source
This commit is contained in:
Owen
2026-06-08 16:00:38 -07:00
parent 135a5d38af
commit 35066c1388
4 changed files with 93 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
messages/en-US.json
View File

@@ -3581,5 +3581,7 @@
"rdpFilesReadyToPaste": "Files ready to paste",
"rdpFilesReadyToPasteDescription": "{count} file(s) copied to remote clipboard — press Ctrl+V on the remote desktop to paste.",
"rdpUploadFailed": "Upload failed",
"rdpUnicodeKeyboardMode": "Unicode keyboard mode"
"rdpUnicodeKeyboardMode": "Unicode keyboard mode",
"sessionToolbarShow": "Show toolbar",
"sessionToolbarHide": "Hide toolbar"
}

79
src/app/rdp/RdpClient.tsx
View File

@@ -36,6 +36,7 @@ import { Alert, AlertDescription } from "@app/components/ui/alert";
import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
import PoweredByPangolin from "@app/components/PoweredByPangolin";
import AuthPageFooterNotices from "@app/components/AuthPageFooterNotices";
import CollapsibleSessionToolbar from "@app/components/CollapsibleSessionToolbar";
import { useTranslations } from "next-intl";
import {
loadEncryptedLocalStorage,
@@ -464,34 +465,16 @@ export default function RdpClient({
className="fixed inset-0 z-50 flex flex-col bg-neutral-900"
style={{ display: showLogin ? "none" : "flex" }}
>
<div className="flex flex-wrap items-center gap-2 bg-black p-2 text-white">
<CollapsibleSessionToolbar>
<Button
size="sm"
variant="secondary"
onClick={() => ui()?.setScale(1)}
variant="destructive"
onClick={() => {
ui()?.shutdown();
setShowLogin(true);
}}
>
{t("rdpFit")}
</Button>
<Button
size="sm"
variant="secondary"
onClick={() => ui()?.setScale(2)}
>
{t("rdpFull")}
</Button>
<Button
size="sm"
variant="secondary"
onClick={() => ui()?.setScale(3)}
>
{t("rdpReal")}
</Button>
<Button
size="sm"
variant="secondary"
onClick={() => ui()?.ctrlAltDel()}
>
{t("browserGatewayCtrlAltDel")}
{t("sshTerminate")}
</Button>
<Button
size="sm"
@@ -500,13 +483,6 @@ export default function RdpClient({
>
{t("rdpMeta")}
</Button>
{/* <Button
size="sm"
variant="secondary"
onClick={toggleCursorKind}
>
Toggle cursor
</Button> */}
<Button
size="sm"
variant="secondary"
@@ -539,14 +515,39 @@ export default function RdpClient({
</Button>
<Button
size="sm"
variant="destructive"
onClick={() => {
ui()?.shutdown();
setShowLogin(true);
}}
variant="secondary"
onClick={() => ui()?.setScale(1)}
>
{t("sshTerminate")}
{t("rdpFit")}
</Button>
<Button
size="sm"
variant="secondary"
onClick={() => ui()?.setScale(2)}
>
{t("rdpFull")}
</Button>
<Button
size="sm"
variant="secondary"
onClick={() => ui()?.setScale(3)}
>
{t("rdpReal")}
</Button>
<Button
size="sm"
variant="secondary"
onClick={() => ui()?.ctrlAltDel()}
>
{t("browserGatewayCtrlAltDel")}
</Button>
{/* <Button
size="sm"
variant="secondary"
onClick={toggleCursorKind}
>
Toggle cursor
</Button> */}
<label className="ml-2 flex items-center gap-2">
<input
type="checkbox"
@@ -558,7 +559,7 @@ export default function RdpClient({
/>
{t("rdpUnicodeKeyboardMode")}
</label>
</div>
</CollapsibleSessionToolbar>
{moduleReady && (
<iron-remote-desktop

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

@@ -27,6 +27,7 @@ import { Alert, AlertDescription } from "@app/components/ui/alert";
import BrandedAuthSurface from "@app/components/BrandedAuthSurface";
import PoweredByPangolin from "@app/components/PoweredByPangolin";
import AuthPageFooterNotices from "@app/components/AuthPageFooterNotices";
import CollapsibleSessionToolbar from "@app/components/CollapsibleSessionToolbar";
import { useTranslations } from "next-intl";
import {
loadEncryptedLocalStorage,
@@ -296,7 +297,7 @@ export default function VncClient({
className="fixed inset-0 z-50 flex flex-col bg-neutral-900"
style={{ display: connected ? "flex" : "none" }}
>
<div className="flex flex-wrap items-center gap-2 bg-black p-2 text-white">
<CollapsibleSessionToolbar>
<Button
size="sm"
variant="secondary"
@@ -329,7 +330,7 @@ export default function VncClient({
>
{t("sshTerminate")}
</Button>
</div>
</CollapsibleSessionToolbar>
<div
ref={screenRef}

47
src/components/CollapsibleSessionToolbar.tsx Normal file
View File

@@ -0,0 +1,47 @@
"use client";
import { useState, type ReactNode } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { cn } from "@app/lib/cn";
import { useTranslations } from "next-intl";
export default function CollapsibleSessionToolbar({
children,
defaultOpen = false
}: {
children: ReactNode;
defaultOpen?: boolean;
}) {
const t = useTranslations();
const [open, setOpen] = useState(defaultOpen);
return (
<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",
open ? "translate-y-0" : "-translate-y-full"
)}
>
<div className="flex flex-wrap items-center gap-2 p-2">
{children}
</div>
<button
type="button"
onClick={() => setOpen((v) => !v)}
aria-label={
open ? t("sessionToolbarHide") : t("sessionToolbarShow")
}
aria-expanded={open}
className="absolute left-1/2 top-full flex h-7 w-12 -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"
>
{open ? (
<ChevronUp className="h-4 w-4" />
) : (
<ChevronDown className="h-4 w-4" />
)}
</button>
</div>
</div>
);
}