sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-09-28 17:49:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

add default and advanced resize

Browse Source
This commit is contained in:
Eduard Gert
2026-05-22 09:53:08 +02:00
parent 8d4f35352f
commit 580cfa0dc5
10 changed files with 105 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/ui/frontend/src/layouts/ConnectionStatusSwitch.tsx
+10 -26
View File
@@ -33,11 +33,7 @@ const STATUS_KEY: Record<ConnectionState, string> = {
const EVENT_BROWSER_LOGIN_CANCEL = "browser-login:cancel";
const EVENT_TRIGGER_LOGIN = "trigger-login";
const NEEDS_LOGIN_STATES = new Set([
"NeedsLogin",
"SessionExpired",
"LoginFailed",
]);
const NEEDS_LOGIN_STATES = new Set(["NeedsLogin", "SessionExpired", "LoginFailed"]);
const errorMessage = formatErrorMessage;
@@ -164,10 +160,7 @@ export const ConnectionStatusSwitch = () => {
if (action === "disconnect" && daemonState === "Connected") {
return ConnectionState.Disconnecting;
}
if (
(action === "connect" || action === "logging-in") &&
daemonState !== "Connected"
) {
if ((action === "connect" || action === "logging-in") && daemonState !== "Connected") {
return ConnectionState.Connecting;
}
switch (daemonState) {
@@ -271,11 +264,7 @@ export const ConnectionStatusSwitch = () => {
return;
}
if (action === "disconnect") {
if (
daemonState === "Idle" ||
daemonState === "Disconnected" ||
unreachable
) {
if (daemonState === "Idle" || daemonState === "Disconnected" || unreachable) {
setAction(null);
}
}
@@ -307,11 +296,9 @@ export const ConnectionStatusSwitch = () => {
};
const isTransitioning =
connState === ConnectionState.Connecting ||
connState === ConnectionState.Disconnecting;
connState === ConnectionState.Connecting || connState === ConnectionState.Disconnecting;
const isOn =
connState === ConnectionState.Connected ||
connState === ConnectionState.Connecting;
connState === ConnectionState.Connected || connState === ConnectionState.Connecting;
const showLocal = connState === ConnectionState.Connected;
const fqdn = status?.local.fqdn || "";
const ip = status?.local.ip || "";
@@ -321,7 +308,7 @@ export const ConnectionStatusSwitch = () => {
<img
src={netbirdFullLogo}
alt={"NetBird"}
className={"h-7 w-auto select-none mb-4"}
className={"h-7 w-auto select-none mb-4 wails-no-draggable"}
draggable={false}
/>
@@ -330,23 +317,20 @@ export const ConnectionStatusSwitch = () => {
checked={isOn}
onCheckedChange={handleSwitch}
disabled={isTransitioning || unreachable}
className={cn(
unreachable && "opacity-80",
isTransitioning && "animate-pulse",
)}
className={cn(unreachable && "opacity-80", isTransitioning && "animate-pulse")}
/>
<div className={"flex flex-col items-center"}>
<h1
className={
"text-sm font-medium text-nb-gray-200 tracking-wide transition-colors duration-300"
"text-sm font-medium text-nb-gray-200 tracking-wide transition-colors duration-300 wails-no-draggable"
}
>
{t(STATUS_KEY[connState])}
</h1>
<p
className={cn(
"font-mono text-xs leading-tight min-h-[1em] text-nb-gray-300 mt-2 transition-opacity duration-300",
"font-mono text-xs leading-tight min-h-[1em] text-nb-gray-300 mt-2 transition-opacity duration-300 wails-no-draggable",
showLocal && fqdn ? "opacity-100" : "opacity-0",
)}
>
@@ -354,7 +338,7 @@ export const ConnectionStatusSwitch = () => {
</p>
<p
className={cn(
"font-mono text-xs leading-tight min-h-[1em] text-nb-gray-300 mt-0.5 transition-opacity duration-300",
"font-mono text-xs leading-tight min-h-[1em] text-nb-gray-300 mt-0.5 transition-opacity duration-300 wails-no-draggable",
showLocal && ip ? "opacity-100" : "opacity-0",
)}
>
client/ui/frontend/src/layouts/Header.tsx
+23 -4
View File
@@ -8,6 +8,7 @@ import {
Settings,
type LucideIcon,
} from "lucide-react";
import { Window } from "@wailsio/runtime";
import { WindowManager } from "@bindings/services";
import {
DropdownMenu,
@@ -22,6 +23,14 @@ import { cn } from "@/lib/cn";
type ViewMode = "default" | "advanced";
// Window dimensions per view. Height matches the Settings window (640) so the
// chrome height is identical across surfaces; width grows from the compact
// 380 default to 900 in advanced.
const VIEW_SIZE: Record<ViewMode, { width: number; height: number }> = {
default: { width: 380, height: 640 },
advanced: { width: 900, height: 640 },
};
export const Header = () => {
const { t } = useTranslation();
const [menuOpen, setMenuOpen] = useState(false);
@@ -38,7 +47,10 @@ export const Header = () => {
const selectMode = (mode: ViewMode) => {
setMenuOpen(false);
if (mode === viewMode) return;
setViewMode(mode);
const { width, height } = VIEW_SIZE[mode];
void Window.SetSize(width, height).catch(() => {});
};
return (
@@ -54,12 +66,19 @@ export const Header = () => {
<div className={"flex justify-center ml-4"}>
<ProfileDropdown onManageProfiles={openManageProfiles} />
</div>
<div className={"flex justify-end"}>
<div className={"flex justify-end wails-no-draggable"}>
<DropdownMenu modal={false} open={menuOpen} onOpenChange={setMenuOpen}>
<DropdownMenuTrigger asChild>
<IconButton icon={MoreVertical} iconClassName={"text-nb-gray-200"} />
<DropdownMenuTrigger asChild className={"wails-no-draggable"}>
<IconButton
icon={MoreVertical}
iconClassName={"text-nb-gray-200 wails-no-draggable"}
/>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" sideOffset={8} className="min-w-52">
<DropdownMenuContent
align="end"
sideOffset={8}
className="min-w-52 data-[state=closed]:!animate-none data-[state=closed]:!duration-0"
>
<DropdownMenuItem onClick={openSettings}>
<div className="flex items-center gap-2">
<Settings size={14} />