remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: toolbar now renders outside overflow container, supports 4 corner positions (top-left/right, bottom-left/right)
Deploy / release (push) Skipped
Details
Deploy / deploy (push) Successful in 2m3s
Details

Browse Source
This commit is contained in:
openhands committed 2026-07-26 17:59:04 +02:00
1 parent e336ac3c66
commit 86d15d0d92
2 files changed
+147 -125
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/client/client-view.tsx
+145 -123
View File
@@ -1,6 +1,6 @@
"use client";
import { ChevronLeft, ChevronRight, LogOut } from "lucide-react";
import { LogOut } from "lucide-react";
import Link from "next/link";
import { signOut } from "next-auth/react";
import {
@@ -9,7 +9,6 @@ import {
useEffect,
useState,
} from "react";
import { createPortal } from "react-dom";
function ToolbarBtn({
onClick,
@@ -99,147 +98,170 @@ export function ClientView({
const sep = base.includes("?") ? "&" : "?";
const clientSrc = `${base}${sep}sso=${encodeURIComponent(ticket)}`;
const [mounted, setMounted] = useState(false);
const [position, setPosition] = useState<"left" | "right">("right");
const POSITIONS = ["top-left", "top-right", "bottom-right", "bottom-left"] as const;
type Position = (typeof POSITIONS)[number];
useEffect(() => { setMounted(true); }, []);
const [position, setPosition] = useState<Position>("top-right");
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const urlPos = params.get("toolbar");
if (urlPos === "left" || urlPos === "right") {
setPosition(urlPos);
if ((POSITIONS as readonly string[]).includes(urlPos ?? "")) {
setPosition(urlPos as Position);
return;
}
try {
const stored = localStorage.getItem("client_toolbar_position");
if (stored === "left" || stored === "right") {
setPosition(stored);
if ((POSITIONS as readonly string[]).includes(stored ?? "")) {
setPosition(stored as Position);
return;
}
} catch { /* private mode */ }
if (defaultToolbarPosition === "left" || defaultToolbarPosition === "right")
setPosition(defaultToolbarPosition as "left" | "right");
if ((POSITIONS as readonly string[]).includes(defaultToolbarPosition))
setPosition(defaultToolbarPosition as Position);
}, [defaultToolbarPosition]);
function togglePosition() {
const next = position === "left" ? "right" : "left";
function cyclePosition() {
const idx = POSITIONS.indexOf(position);
const next = POSITIONS[(idx + 1) % POSITIONS.length];
setPosition(next);
try { localStorage.setItem("client_toolbar_position", next); } catch {}
}
const toolbar = (
<div className={`fixed top-2 sm:top-4 ${position === "left" ? "left-2 sm:left-4" : "right-2 sm:right-4"} z-[9999] flex items-center gap-1 sm:gap-2`}>
<ToolbarBtn href="/" title="Home">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
role="img"
aria-label="Home"
>
<title>Home</title>
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" />
</svg>
</ToolbarBtn>
<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
role="img"
aria-label="Reload"
>
<title>Reload</title>
<polyline points="23 4 23 10 17 10" />
<polyline points="1 20 1 14 7 14" />
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
</svg>
</ToolbarBtn>
<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
role="img"
aria-label="Fullscreen"
>
<title>Fullscreen</title>
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
</svg>
</ToolbarBtn>
<div
className="h-7 sm:h-8 px-1.5 sm:px-2 rounded-lg border-2 flex items-center justify-center gap-1 shadow-lg select-none"
style={{
borderColor:
"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
background:
"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
color:
"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
}}
title="Online users"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
role="img"
aria-label="Online users"
>
<title>Online users</title>
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
<span className="text-[10px] sm:text-xs font-bold">{onlineCount}</span>
</div>
<ToolbarBtn onClick={togglePosition} title={`Move to ${position === "left" ? "right" : "left"}`}>
{position === "left" ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
</ToolbarBtn>
<ToolbarBtn
onClick={() => signOut({ callbackUrl: "/" })}
title="Logout"
>
<LogOut size={14} />
</ToolbarBtn>
</div>
);
const posStyle: React.CSSProperties = {};
if (position === "top-left") { posStyle.top = posStyle.left = "0.5rem"; }
else if (position === "top-right") { posStyle.top = posStyle.right = "0.5rem"; }
else if (position === "bottom-right") { posStyle.bottom = posStyle.right = "0.5rem"; }
else if (position === "bottom-left") { posStyle.bottom = posStyle.left = "0.5rem"; }
return (
<div
className="relative w-screen h-screen overflow-hidden"
style={{ backgroundColor: "var(--color-background)" }}
>
{mounted && createPortal(toolbar, document.body)}
<>
<div
className="fixed z-[9999] flex items-center gap-1 sm:gap-2"
style={posStyle}
>
<ToolbarBtn href="/" title="Home">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
role="img"
aria-label="Home"
>
<title>Home</title>
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" />
</svg>
</ToolbarBtn>
<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
role="img"
aria-label="Reload"
>
<title>Reload</title>
<polyline points="23 4 23 10 17 10" />
<polyline points="1 20 1 14 7 14" />
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
</svg>
</ToolbarBtn>
<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
role="img"
aria-label="Fullscreen"
>
<title>Fullscreen</title>
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
</svg>
</ToolbarBtn>
<div
className="h-7 sm:h-8 px-1.5 sm:px-2 rounded-lg border-2 flex items-center justify-center gap-1 shadow-lg select-none"
style={{
borderColor:
"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
background:
"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
color:
"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
}}
title="Online users"
>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
role="img"
aria-label="Online users"
>
<title>Online users</title>
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
<span className="text-[10px] sm:text-xs font-bold">{onlineCount}</span>
</div>
<ToolbarBtn onClick={cyclePosition} title={position}>
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
role="img"
aria-label="Move toolbar"
>
<title>Move toolbar</title>
<path d="M12 5v14M5 12h14" />
<path d="M15 9l-3-3-3 3M9 15l3 3 3-3" />
</svg>
</ToolbarBtn>
<ToolbarBtn
onClick={() => signOut({ callbackUrl: "/" })}
title="Logout"
>
<LogOut size={14} />
</ToolbarBtn>
</div>
<iframe
id="nitro"
src={clientSrc}
className="absolute inset-0 w-full h-full border-0 m-0 p-0 overflow-hidden"
title={hotelName}
allow="autoplay; gamepad"
/>
</div>
<div
className="relative w-screen h-screen overflow-hidden"
style={{ backgroundColor: "var(--color-background)" }}
>
<iframe
id="nitro"
src={clientSrc}
className="absolute inset-0 w-full h-full border-0 m-0 p-0 overflow-hidden"
title={hotelName}
allow="autoplay; gamepad"
/>
</div>
</>
);
}
src/app/client/page.tsx
+2 -2
View File
@@ -19,7 +19,7 @@ export default async function ClientPage() {
const [hotelName, clientUrl, defaultToolbarPosition] = await Promise.all([
resolveHotelName(),
siteSettings.get("nitro_client_url", ""),
siteSettings.get("client_toolbar_position", "right"),
siteSettings.get("client_toolbar_position", "top-right"),
]);
const ip = (await headers()).get("x-real-client-ip") ?? "0.0.0.0";
@@ -35,7 +35,7 @@ export default async function ClientPage() {
clientUrl={clientUrl || "/nitro-client/"}
hotelName={hotelName}
initialOnline={onlineCount}
defaultToolbarPosition={defaultToolbarPosition ?? "right"}
defaultToolbarPosition={defaultToolbarPosition ?? "top-right"}
/>
);
}