From 59c6e48ca2a030fc10849f95367889a49caea04f Mon Sep 17 00:00:00 2001 From: ernstmul Date: Mon, 3 Mar 2025 15:04:52 +0100 Subject: [PATCH] Fix: animation of theme toggle button --- package.json | 10 ++++++-- pnpm-lock.yaml | 24 +++++++++++------- src/lib/components/navbar.svelte | 43 ++++++++++++++++++++++++-------- 3 files changed, 55 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index d55dc621b..64914b6cf 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@dd94b87a ", "@appwrite.io/pink-legacy": "^1.0.2", - "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@af8d85a", + "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9251adb", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", "@stripe/stripe-js": "^3.5.0", @@ -37,6 +37,7 @@ "ignore": "^6.0.2", "nanoid": "^5.0.8", "nanotar": "^0.1.1", + "pink-svelte": "link:../../../Library/pnpm/global/5/node_modules/@appwrite.io/pink-svelte", "plausible-tracker": "^0.3.9", "pretty-bytes": "^6.1.1", "prismjs": "^1.29.0", @@ -80,5 +81,10 @@ "vitest": "^1.6.0" }, "type": "module", - "packageManager": "pnpm@10.4.1" + "packageManager": "pnpm@10.4.1", + "pnpm": { + "overrides": { + "pink-svelte": "link:../../../Library/pnpm/global/5/node_modules/@appwrite.io/pink-svelte" + } + } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc52d2bba..59586cd80 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,9 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +overrides: + pink-svelte: link:../../../Library/pnpm/global/5/node_modules/@appwrite.io/pink-svelte + importers: .: @@ -21,8 +24,8 @@ importers: specifier: ^1.0.2 version: 1.0.2 '@appwrite.io/pink-svelte': - specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@af8d85a - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@af8d85a(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) + specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9251adb + version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9251adb(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -62,6 +65,9 @@ importers: nanotar: specifier: ^0.1.1 version: 0.1.1 + pink-svelte: + specifier: link:../../../Library/pnpm/global/5/node_modules/@appwrite.io/pink-svelte + version: link:../../../Library/pnpm/global/5/node_modules/@appwrite.io/pink-svelte plausible-tracker: specifier: ^0.3.9 version: 0.3.9 @@ -215,8 +221,8 @@ packages: resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb} version: 1.2.1 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@af8d85aaf667fa1918b812468dfbbf10718a0355': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@af8d85aaf667fa1918b812468dfbbf10718a0355} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9251adbe6cbe884afc7e103128486154b78bb151': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9251adbe6cbe884afc7e103128486154b78bb151} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 @@ -236,8 +242,8 @@ packages: '@appwrite.io/pink-legacy@1.0.2': resolution: {integrity: sha512-1AYNcfbV+x0Tyj56CoieSq5g7+u+7F5/LDVN/z+Hx1kp9gj7xc1eT39Dy832xxfihImF6ksjp0FXEMVSBR8cew==} - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@af8d85a': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@af8d85a} + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9251adb': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9251adb} version: 1.0.0-next.85 peerDependencies: react-dom: ^18.0.0 @@ -4099,7 +4105,7 @@ snapshots: '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb': {} - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@af8d85aaf667fa1918b812468dfbbf10718a0355(svelte@4.2.19)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9251adbe6cbe884afc7e103128486154b78bb151(svelte@4.2.19)': dependencies: svelte: 4.2.19 @@ -4116,9 +4122,9 @@ snapshots: '@appwrite.io/pink-icons': 1.0.0 the-new-css-reset: 1.11.3 - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@af8d85a(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@9251adb(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)': dependencies: - '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@af8d85aaf667fa1918b812468dfbbf10718a0355(svelte@4.2.19) + '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@9251adbe6cbe884afc7e103128486154b78bb151(svelte@4.2.19) '@floating-ui/dom': 1.6.13 '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19) '@melt-ui/svelte': 0.86.3(svelte@4.2.19) diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte index cd6f6aacc..2ab656133 100644 --- a/src/lib/components/navbar.svelte +++ b/src/lib/components/navbar.svelte @@ -94,12 +94,14 @@ export let showAccountMenu = false; let activeTheme = $app.theme; + let shouldAnimateThemeToggle = false; $: { if (activeTheme) { updateTheme(activeTheme); } } + $: currentOrg = organizations.find((org) => org.isSelected); $: selectedProject = currentOrg?.projects.find((project) => project.isSelected); @@ -195,6 +197,7 @@ { showAccountMenu = !showAccountMenu; + shouldAnimateThemeToggle = false; if (showAccountMenu) { trackEvent('click_menu_dropdown'); } @@ -235,17 +238,31 @@ direction="row" alignItems="center"> Theme - +
+ { + shouldAnimateThemeToggle = true; + }} + buttons={[ + { + id: 'light', + label: 'Light', + icon: IconSun + }, + { + id: 'dark', + label: 'Dark', + icon: IconMoon + }, + { + id: 'auto', + label: 'System', + icon: IconMode + } + ]}> +
@@ -405,4 +422,8 @@ /* `desltop` is not a typo—it comes from the `pink2/legacy` module! */ inline-size: var(--p-drop-width-size-desltop); } + + :global(.keepTransformTransition span) { + transition: transform 0.2s ease-out !important; + }