Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: animation of theme toggle button

Browse Source
This commit is contained in:
ernstmul
2025-03-03 15:04:52 +01:00
parent d09743fc64
commit 59c6e48ca2
3 changed files with 55 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+8 -2
View File
@@ -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"
}
}
}
pnpm-lock.yaml
Generated
+15 -9
View File
@@ -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)
src/lib/components/navbar.svelte
+32 -11
View File
@@ -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);
</script>
@@ -195,6 +197,7 @@
<Link.Button
on:click={() => {
showAccountMenu = !showAccountMenu;
shouldAnimateThemeToggle = false;
if (showAccountMenu) {
trackEvent('click_menu_dropdown');
}
@@ -235,17 +238,31 @@
direction="row"
alignItems="center">
<Typography.Text>Theme</Typography.Text>
<ToggleButton
bind:active={activeTheme}
buttons={[
{ id: 'light', label: 'Light', icon: IconSun },
{ id: 'dark', label: 'Dark', icon: IconMoon },
{
id: 'auto',
label: 'System',
icon: IconMode
}
]}></ToggleButton>
<div
class:keepTransformTransition={shouldAnimateThemeToggle}>
<ToggleButton
bind:active={activeTheme}
on:change={(event) => {
shouldAnimateThemeToggle = true;
}}
buttons={[
{
id: 'light',
label: 'Light',
icon: IconSun
},
{
id: 'dark',
label: 'Dark',
icon: IconMoon
},
{
id: 'auto',
label: 'System',
icon: IconMode
}
]}></ToggleButton>
</div>
</Layout.Stack>
</div>
</Layout.Stack>
@@ -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;
}
</style>