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

Merge pull request #1657 from appwrite/feat-wip-account-menu-changes

Browse Source 
Feat wip account menu changes
This commit is contained in:
Ernst Mulders
2025-02-12 09:45:38 +01:00
committed by GitHub
parent 6c78d687d7 5222e0a82e
commit 2bbceed8f6
2 changed files with 53 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/navbar.svelte
+34 -16
View File
@@ -7,9 +7,10 @@
Tooltip,
Card,
ActionMenu,
Input,
ToggleButton,
Button,
Avatar
Avatar,
Typography
} from '@appwrite.io/pink-svelte';
import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
import type { BaseNavbarProps } from '@appwrite.io/pink-svelte/dist/navbar/Base.svelte';
@@ -32,6 +33,7 @@
import { app } from '$lib/stores/app';
import { isTabletViewport } from '$lib/stores/viewport';
import { isCloud } from '$lib/system.js';
import { user } from '$lib/stores/user';
let showSupport = false;
@@ -76,6 +78,11 @@
export let sideBarIsOpen: $$Props['sideBarIsOpen'] = false;
export let showAccountMenu = false;
let activeTheme = 'dark';
$: {
updateTheme(activeTheme);
}
$: currentOrg = organizations.find((org) => org.isSelected);
</script>
@@ -157,30 +164,41 @@
<Layout.Stack gap="xxs">
<ActionMenu.Root>
<Layout.Stack gap="xxs">
<div
style:padding-inline-start="10px"
style:padding-inline-end="8px"
style:padding-block="4px">
<Typography.Text variant="m-500">
{$user.email}
</Typography.Text>
</div>
<ActionMenu.Item.Anchor
leadingIcon={IconUser}
trailingIcon={IconUser}
size="l"
href={`${base}/account`}>
Account</ActionMenu.Item.Anchor>
<ActionMenu.Item.Button
leadingIcon={IconLogoutRight}
trailingIcon={IconLogoutRight}
size="l"
on:click={logout}>Sign out</ActionMenu.Item.Button>
</Layout.Stack>
</ActionMenu.Root>
<Input.Select
value={$app.theme === 'auto' ? 'system' : $app.theme}
name="mode"
on:change={(event) => {
updateTheme(event.detail);
}}
bind:group={$app.theme}
options={[
{ label: 'Light', value: 'light', leadingIcon: IconSun },
{ label: 'Dark', value: 'dark', leadingIcon: IconMoon },
{ label: 'System', value: 'system', leadingIcon: IconMode }
]} />
<div style:padding-inline-start="13px" style:padding-inline-end="8px">
<Layout.Stack
justifyContent="space-between"
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: 'system', label: 'System', icon: IconMode }
]}></ToggleButton>
</Layout.Stack>
</div>
</Layout.Stack>
</Card.Base>
</div>
src/routes/+layout.svelte
+19 -3
View File
@@ -90,19 +90,29 @@
$: {
if (browser) {
const isCloudClass = isCloud ? 'is-cloud' : '';
if ($app.theme === 'auto') {
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
if (darkThemeMq.matches) {
document.body.setAttribute('class', `theme-dark ${isCloudClass}`);
document.body.setAttribute('class', `theme-dark ${isCloudClass} no-transition`);
$app.themeInUse = 'dark';
} else {
document.body.setAttribute('class', `theme-light ${isCloudClass}`);
document.body.setAttribute(
'class',
`theme-light ${isCloudClass} no-transition`
);
$app.themeInUse = 'light';
}
} else {
document.body.setAttribute('class', `theme-${$app.theme} ${isCloudClass}`);
document.body.setAttribute(
'class',
`theme-${$app.theme} ${isCloudClass} no-transition`
);
$app.themeInUse = $app.theme;
}
requestAnimationFrame(() => {
document.body.classList.remove('no-transition');
});
}
}
</script>
@@ -123,6 +133,12 @@
<style lang="scss" global>
@use '@appwrite.io/pink-legacy/src/abstract/variables/devices';
.no-transition {
* {
transition: none !important;
}
}
.tippy-box {
--p-tooltip-text-color: var(--color-neutral-10);
--p-tooltip--bg-color: var(--color-neutral-80);