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

Move menu bottomsheet to console

Browse Source
This commit is contained in:
ernstmul
2025-01-23 11:15:09 +01:00
parent 0609a7c315
commit da1af0af99
8 changed files with 152 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -22,8 +22,8 @@
"@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193",
"@appwrite.io/pink": "0.25.0",
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674",
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5824678",
"@popperjs/core": "^2.11.8",
"@sentry/sveltekit": "^8.38.0",
"@stripe/stripe-js": "^3.5.0",
pnpm-lock.yaml
Generated
+14 -14
View File
@@ -18,11 +18,11 @@ importers:
specifier: 0.25.0
version: 0.25.0
'@appwrite.io/pink-icons-svelte':
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958(svelte@4.2.19)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678(svelte@4.2.19)
'@appwrite.io/pink-svelte':
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5824678
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5824678(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
'@popperjs/core':
specifier: ^2.11.8
version: 2.11.8
@@ -218,14 +218,14 @@ packages:
resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193}
version: 1.2.1
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1fe7674343bab0dc86d4cbc98c74055c9e87be0b':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1fe7674343bab0dc86d4cbc98c74055c9e87be0b}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@58246784b25c0184134dd08be1bd13639d8c6863':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@58246784b25c0184134dd08be1bd13639d8c6863}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
@@ -233,8 +233,8 @@ packages:
'@appwrite.io/pink-icons@0.25.0':
resolution: {integrity: sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q==}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5824678':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@5824678}
version: 1.0.0-next.85
peerDependencies:
react-dom: ^18.0.0
@@ -4041,19 +4041,19 @@ snapshots:
'@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@9193': {}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@1fe7674343bab0dc86d4cbc98c74055c9e87be0b(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@5824678(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@72b1958(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@58246784b25c0184134dd08be1bd13639d8c6863(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
'@appwrite.io/pink-icons@0.25.0': {}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@1fe7674(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@5824678(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@1fe7674343bab0dc86d4cbc98c74055c9e87be0b(svelte@4.2.19)
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@58246784b25c0184134dd08be1bd13639d8c6863(svelte@4.2.19)
'@floating-ui/dom': 1.6.12
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.2(svelte@4.2.19))(svelte@4.2.19)
'@melt-ui/svelte': 0.86.2(svelte@4.2.19)
src/lib/components/bottom-sheet/SheetMenuBlock.svelte
+54
View File
@@ -0,0 +1,54 @@
<script lang="ts">
import type { SheetMenu, SubMenu } from '$lib/components/bottom-sheet/index.js';
import { ActionMenu } from '@appwrite.io/pink-svelte';
export let menu: SubMenu;
export let isOpen: boolean;
export let navigateSubMenu: (menu: SheetMenu) => void;
</script>
{#if menu.title}
<span class="menu-title">{menu.title}</span>
{/if}
<ActionMenu.Root noPadding={true}>
{#each menu.items as menuItem}
{#if menuItem.href}
<ActionMenu.Item.Anchor
size="l"
leadingIcon={menuItem.leadingIcon}
trailingIcon={menuItem.trailingIcon}
href={menuItem.href}
on:click={() => {
isOpen = false;
}}>
<span class="anchor">{menuItem.name}</span>
</ActionMenu.Item.Anchor>
{:else}
<ActionMenu.Item.Button
size="l"
leadingIcon={menuItem.leadingIcon}
trailingIcon={menuItem.trailingIcon}
on:click={() => {
if (menuItem.subMenu) {
navigateSubMenu(menuItem.subMenu);
} else if (menuItem.onClick !== undefined) {
menuItem.onClick();
isOpen = false;
}
}}>
{menuItem.name}
</ActionMenu.Item.Button>
{/if}
{/each}
</ActionMenu.Root>
<style lang="scss">
.menu-title {
padding: var(--space-3) var(--space-5);
display: block;
text-transform: uppercase;
font-size: var(--font-size-xs, 12px);
line-height: 130%; /* 15.6px */
letter-spacing: 0.96px;
}
</style>
src/lib/components/bottom-sheet/bottomSheetMenu.svelte
+50
View File
@@ -0,0 +1,50 @@
<script lang="ts">
import SheetMenuBlock from './SheetMenuBlock.svelte';
import { BottomSheet } from '@appwrite.io/pink-svelte';
import type { $$Props, SheetMenu } from '$lib/components/bottom-sheet/index';
export let menu: $$Props['menu'];
export let isOpen: $$Props['isOpen'] = false;
let sheetContainerRef: $$Props['sheetContainerRef'];
let activeMenu = menu;
let showDivider = true;
function navigateSubMenu(subMenu: SheetMenu) {
if (sheetContainerRef) {
const currentHeight = sheetContainerRef.offsetHeight;
sheetContainerRef.style.overflowY = 'hidden';
sheetContainerRef.style.maxHeight = `${currentHeight}px`;
activeMenu = subMenu;
requestAnimationFrame(() => {
if (sheetContainerRef) {
const newHeight = sheetContainerRef.scrollHeight;
sheetContainerRef.style.maxHeight = `${newHeight + 5}px`;
}
});
} else {
activeMenu = subMenu;
}
showDivider = activeMenu.bottom !== undefined;
}
function restoreMenu(isOpenState: boolean) {
showDivider = activeMenu.bottom !== undefined;
if (!isOpenState) {
setTimeout(() => {
activeMenu = menu;
}, 400);
}
}
$: restoreMenu(isOpen);
</script>
<BottomSheet.Default bind:isOpen useSlots={true} bind:sheetContainerRef bind:showDivider>
<div slot="top"><SheetMenuBlock menu={activeMenu.top} {navigateSubMenu} bind:isOpen /></div>
<div slot="bottom">
{#if activeMenu.bottom}<SheetMenuBlock
menu={activeMenu.bottom}
{navigateSubMenu}
bind:isOpen />{/if}
</div>
</BottomSheet.Default>
src/lib/components/bottom-sheet/index.ts
+27
View File
@@ -0,0 +1,27 @@
import Menu from './bottomSheetMenu.svelte';
import type { ComponentType } from 'svelte';
export type $$Props = {
isOpen: boolean;
useSlots?: boolean;
sheetContainerRef?: HTMLDialogElement;
showDivider?: boolean;
menu: SheetMenu;
};
export type SubMenu = {
title?: string;
items: MenuItem[];
};
type MenuItem = {
name: string;
leadingIcon?: ComponentType;
trailingIcon?: ComponentType;
onClick?: () => void;
href?: string;
subMenu?: { top: SubMenu; bottom: SubMenu };
};
export type SheetMenu = { top: SubMenu; bottom: SubMenu };
export default { Menu };
src/lib/components/breadcrumbs.svelte
+2 -1
View File
@@ -1,7 +1,8 @@
<script lang="ts">
import { createMenubar, melt } from '@melt-ui/svelte';
import { Badge, Icon, BottomSheet, type SheetMenu } from '@appwrite.io/pink-svelte';
import { Badge, Icon, type SheetMenu } from '@appwrite.io/pink-svelte';
import { IconChevronDown, IconChevronRight, IconPlus } from '@appwrite.io/pink-icons-svelte';
import { BottomSheet } from '$lib/components';
type Project = {
name: string;
src/lib/components/index.ts
+1
View File
@@ -80,3 +80,4 @@ export { default as BottomModalAlert } from './bottomModalAlert.svelte';
export { default as Navbar } from './navbar.svelte';
export { default as Breadcrumbs } from './breadcrumbs.svelte';
export { default as Sidebar } from './sidebar.svelte';
export { default as BottomSheet } from './bottom-sheet/index';
src/lib/components/navbar.svelte
+2 -3
View File
@@ -7,8 +7,7 @@
Tooltip,
Card,
ActionList,
Input,
BottomSheet
Input
} from '@appwrite.io/pink-svelte';
import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
import type { BaseNavbarProps } from '@appwrite.io/pink-svelte/dist/navbar/Base.svelte';
@@ -22,7 +21,7 @@
IconSun,
IconUser
} from '@appwrite.io/pink-icons-svelte';
import { DropList, Support, Breadcrumbs } from '$lib/components';
import { DropList, Support, Breadcrumbs, BottomSheet } from '$lib/components';
import { Feedback } from '$lib/components/feedback';
import { feedback } from '$lib/stores/feedback';
import { isMac } from '$lib/helpers/platform';