martin/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE synced 2025-02-12 02:39:17 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

Add new animation for switching themes.

Browse Source
This commit is contained in:
Bram Suurd 2024-11-06 01:05:24 +01:00
parent 2f9f51ec7c
commit 249946bbf0
6 changed files with 125 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/package-lock.json generated
View File

@ -12,6 +12,7 @@
"@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-icons": "^1.3.1",
"@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-slot": "^1.1.0",
@ -21,7 +22,7 @@
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"cmdk": "^1.0.0", "cmdk": "^1.0.0",
"framer-motion": "^11.11.10", "framer-motion": "^11.11.11",
"fuse.js": "^7.0.0", "fuse.js": "^7.0.0",
"lucide-react": "^0.453.0", "lucide-react": "^0.453.0",
"mini-svg-data-uri": "^1.4.4", "mini-svg-data-uri": "^1.4.4",
@ -1335,6 +1336,14 @@
} }
} }
}, },
"node_modules/@radix-ui/react-icons": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.1.tgz",
"integrity": "sha512-QvYompk0X+8Yjlo/Fv4McrzxohDdM5GgLHyQcPpcsPvlOSXCGFjdbuyGL5dzRbg0GpknAjQJJZzdiRK7iWVuFQ==",
"peerDependencies": {
"react": "^16.x || ^17.x || ^18.x || ^19.x"
}
},
"node_modules/@radix-ui/react-id": { "node_modules/@radix-ui/react-id": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",

3
frontend/package.json
View File

@ -22,6 +22,7 @@
"@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-icons": "^1.3.1",
"@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-slot": "^1.1.0",
@ -31,7 +32,7 @@
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"cmdk": "^1.0.0", "cmdk": "^1.0.0",
"framer-motion": "^11.11.10", "framer-motion": "^11.11.11",
"fuse.js": "^7.0.0", "fuse.js": "^7.0.0",
"lucide-react": "^0.453.0", "lucide-react": "^0.453.0",
"mini-svg-data-uri": "^1.4.4", "mini-svg-data-uri": "^1.4.4",

7
frontend/src/app/layout.tsx
View File

@ -68,7 +68,12 @@ export default function RootLayout({
<link rel="preconnect" href="https://api.github.com" /> <link rel="preconnect" href="https://api.github.com" />
</head> </head>
<body className={inter.className}> <body className={inter.className}>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem> <ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<div className="flex w-full flex-col justify-center"> <div className="flex w-full flex-col justify-center">
<Navbar /> <Navbar />
<div className="flex min-h-screen flex-col justify-center"> <div className="flex min-h-screen flex-col justify-center">

29
frontend/src/components/Navbar.tsx
View File

@ -6,11 +6,9 @@ import { useEffect, useState } from "react";
import { navbarLinks } from "@/config/siteConfig"; import { navbarLinks } from "@/config/siteConfig";
import { cn } from "@/lib/utils";
import { MoonIcon, SunIcon } from "lucide-react";
import { useTheme } from "next-themes";
import CommandMenu from "./CommandMenu"; import CommandMenu from "./CommandMenu";
import StarOnGithubButton from "./ui/star-on-github-button"; import StarOnGithubButton from "./ui/star-on-github-button";
import { ModeToggle } from "./ui/theme-toggle";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
@ -22,7 +20,6 @@ export const dynamic = "force-dynamic";
function Navbar() { function Navbar() {
const [isScrolled, setIsScrolled] = useState(false); const [isScrolled, setIsScrolled] = useState(false);
const { theme, setTheme } = useTheme();
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
@ -56,7 +53,6 @@ function Navbar() {
/> />
<span className="hidden lg:block">Proxmox VE Helper-Scripts</span> <span className="hidden lg:block">Proxmox VE Helper-Scripts</span>
</Link> </Link>
{/* <MobileNav /> */}
<div className="flex gap-2"> <div className="flex gap-2">
<CommandMenu /> <CommandMenu />
<StarOnGithubButton /> <StarOnGithubButton />
@ -81,28 +77,7 @@ function Navbar() {
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
))} ))}
<TooltipProvider> <ModeToggle />
<Tooltip delayDuration={100}>
<TooltipTrigger asChild>
<Button
variant="ghost"
type="button"
size="icon"
className={cn("px-2")}
aria-label="Toggle theme"
onClick={() =>
setTheme(theme === "dark" ? "light" : "dark")
}
>
<SunIcon className="size-[1.2rem] text-neutral-800 dark:hidden dark:text-neutral-200" />
<MoonIcon className="hidden size-[1.2rem] text-neutral-800 dark:block dark:text-neutral-200" />
</Button>
</TooltipTrigger>
<TooltipContent side="bottom" className="text-xs">
Theme Toggle
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div> </div>
</div> </div>
</div> </div>

42
frontend/src/components/ui/theme-toggle.tsx Normal file
View File

@ -0,0 +1,42 @@
"use client";
import { useTheme } from "next-themes";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
import { Button } from "./button";
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
export function ModeToggle() {
const { setTheme, theme: currentTheme } = useTheme();
const handleChangeTheme = (theme: "light" | "dark") => {
if (theme === currentTheme) return;
if (!document.startViewTransition) return setTheme(theme);
document.startViewTransition(() => setTheme(theme));
};
return (
<TooltipProvider>
<Tooltip delayDuration={100}>
<TooltipTrigger asChild>
<Button
variant="ghost"
type="button"
size="icon"
className="px-2"
aria-label="Toggle theme"
onClick={() =>
handleChangeTheme(currentTheme === "dark" ? "light" : "dark")
}
>
<SunIcon className="size-[1.2rem] text-neutral-800 dark:hidden dark:text-neutral-200" />
<MoonIcon className="hidden size-[1.2rem] text-neutral-800 dark:block dark:text-neutral-200" />
</Button>
</TooltipTrigger>
<TooltipContent side="bottom" className="text-xs">
Theme Toggle
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}

63
frontend/src/styles/globals.css
View File

@ -30,6 +30,29 @@
--chart-3: 197 37% 24%; --chart-3: 197 37% 24%;
--chart-4: 43 74% 66%; --chart-4: 43 74% 66%;
--chart-5: 27 87% 67%; --chart-5: 27 87% 67%;
--expo-out: linear(
0 0%,
0.1684 2.66%,
0.3165 5.49%,
0.446 8.52%,
0.5581 11.78%,
0.6535 15.29%,
0.7341 19.11%,
0.8011 23.3%,
0.8557 27.93%,
0.8962 32.68%,
0.9283 38.01%,
0.9529 44.08%,
0.9711 51.14%,
0.9833 59.06%,
0.9915 68.74%,
1 100%
);
}
::selection {
background-color: hsl(var(--accent));
color: hsl(var(--foreground));
} }
.dark { .dark {
@ -58,8 +81,48 @@
--chart-4: 280 65% 60%; --chart-4: 280 65% 60%;
--chart-5: 340 75% 55%; --chart-5: 340 75% 55%;
} }
::view-transition-group(root) {
animation-duration: 0.7s;
animation-timing-function: var(--expo-out);
} }
::view-transition-new(root) {
animation-name: reveal-light;
}
::view-transition-old(root),
.dark::view-transition-old(root) {
animation: none;
z-index: -1;
}
.dark::view-transition-new(root) {
animation-name: reveal-dark;
}
@keyframes reveal-dark {
from {
clip-path: polygon(50% -71%, -50% 71%, -50% 71%, 50% -71%);
}
to {
clip-path: polygon(50% -71%, -50% 71%, 50% 171%, 171% 50%);
}
}
@keyframes reveal-light {
from {
clip-path: polygon(171% 50%, 50% 171%, 50% 171%, 171% 50%);
}
to {
clip-path: polygon(171% 50%, 50% 171%, -50% 71%, 50% -71%);
}
}
}
@layer base { @layer base {
* { * {
@apply border-border; @apply border-border;