From cd61ad4e68d1bd6d6355c7968f6a3368eef95c50 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 16 Apr 2025 17:53:21 +0200 Subject: [PATCH] feat: responsiveContainerHeader (WIP), refactor view selector and other stuff --- package.json | 2 +- pnpm-lock.yaml | 24 ++-- src/lib/components/columnSelector.svelte | 92 ++++++++++++ src/lib/components/index.ts | 1 + src/lib/components/viewSelector.svelte | 102 +------------ src/lib/components/viewToggle.svelte | 48 +++++++ src/lib/layout/displaySettingsModal.svelte | 56 ++++++++ src/lib/layout/index.ts | 1 + .../layout/responsiveContainerHeader.svelte | 136 ++++++++++++++++++ .../attributes/edit.svelte | 2 +- .../site-[site]/deployments/+page.svelte | 47 +++++- 11 files changed, 401 insertions(+), 110 deletions(-) create mode 100644 src/lib/components/columnSelector.svelte create mode 100644 src/lib/components/viewToggle.svelte create mode 100644 src/lib/layout/displaySettingsModal.svelte create mode 100644 src/lib/layout/responsiveContainerHeader.svelte diff --git a/package.json b/package.json index 2877f3075..81d2b248a 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23", "@appwrite.io/pink-legacy": "^1.0.3", - "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@6b17cb23", + "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29469d7", "@popperjs/core": "^2.11.8", "@sentry/sveltekit": "^8.38.0", "@stripe/stripe-js": "^3.5.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3469cc543..81ad7c8b0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^1.0.3 version: 1.0.3 '@appwrite.io/pink-svelte': - specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@6b17cb23 - version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@6b17cb23(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3) + specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29469d7 + version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29469d7(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3) '@popperjs/core': specifier: ^2.11.8 version: 2.11.8 @@ -221,14 +221,14 @@ packages: resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e} version: 1.2.1 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29469d70d89184306f1766f80ec4af4fab5c4939': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29469d70d89184306f1766f80ec4af4fab5c4939} 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@6b17cb23ba11fbe98d56b96058a79ecc48b23120': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23ba11fbe98d56b96058a79ecc48b23120} + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23} version: 1.0.0-next.7 peerDependencies: svelte: ^4.0.0 @@ -242,8 +242,8 @@ packages: '@appwrite.io/pink-legacy@1.0.3': resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==} - '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@6b17cb23': - resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@6b17cb23} + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29469d7': + resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29469d7} version: 1.0.0-next.85 peerDependencies: react-dom: ^18.0.0 @@ -3536,11 +3536,11 @@ snapshots: '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@e2f082e': {} - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23(svelte@5.25.3)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29469d70d89184306f1766f80ec4af4fab5c4939(svelte@5.25.3)': dependencies: svelte: 5.25.3 - '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23ba11fbe98d56b96058a79ecc48b23120(svelte@5.25.3)': + '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23(svelte@5.25.3)': dependencies: svelte: 5.25.3 @@ -3553,9 +3553,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@6b17cb23(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)': + '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@29469d7(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)': dependencies: - '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@6b17cb23ba11fbe98d56b96058a79ecc48b23120(svelte@5.25.3) + '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@29469d70d89184306f1766f80ec4af4fab5c4939(svelte@5.25.3) '@floating-ui/dom': 1.6.13 '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3) '@melt-ui/svelte': 0.86.6(svelte@5.25.3) diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte new file mode 100644 index 000000000..67e621ee2 --- /dev/null +++ b/src/lib/components/columnSelector.svelte @@ -0,0 +1,92 @@ + + +{#if $columns?.length} + + {@render children(toggle, selectedColumnsNumber)} + + + {#each $columns as column} + {#if !column?.exclude} + (column.hide = !column.hide)} + disabled={allowNoColumns + ? false + : selectedColumnsNumber <= 1 && column.hide !== true}> + + (column.hide = !column.hide)} /> + {column.title} + + + {/if} + {/each} + + + +{/if} diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index d827c596f..b20b38d1f 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -81,3 +81,4 @@ export { default as Sidebar } from './sidebar.svelte'; export { default as BottomSheet } from './bottom-sheet/index'; export { default as Confirm } from './confirm.svelte'; export { default as UsageCard } from './usageCard.svelte'; +export { default as ViewToggle } from './viewToggle.svelte'; diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte index 85550757b..c09cec650 100644 --- a/src/lib/components/viewSelector.svelte +++ b/src/lib/components/viewSelector.svelte @@ -16,6 +16,8 @@ } from '@appwrite.io/pink-svelte'; import { IconViewBoards, IconViewGrid, IconViewList } from '@appwrite.io/pink-icons-svelte'; import { goto } from '$app/navigation'; + import ViewToggle from './viewToggle.svelte'; + import ColumnSelector from './columnSelector.svelte'; export let columns: Writable; export let view: View; @@ -23,68 +25,11 @@ export let hideView = false; export let hideColumns = false; export let allowNoColumns = false; - - onMount(async () => { - if (isCustomCollection) { - const prefs = preferences.getCustomCollectionColumns(page.params.collection); - columns.set( - $columns.map((column) => { - column.hide = prefs?.includes(column.id) ?? false; - return column; - }) - ); - } else { - const prefs = preferences.get(page.route); - - // Override the shown columns only if a preference was set - if (prefs?.columns) { - columns.set( - $columns.map((column) => { - column.hide = prefs.columns?.includes(column.id) ?? false; - return column; - }) - ); - } - } - - columns.subscribe((ctx) => { - const columns = ctx.filter((n) => n.hide === true).map((n) => n.id); - - if (isCustomCollection) { - preferences.setCustomCollectionColumns(columns); - } else { - preferences.setColumns(columns); - } - }); - }); - - function getViewLink(view: View): string { - const url = new URL(page.url); - url.searchParams.set('view', view); - return url.toString(); - } - - function updateViewPreferences(view: View) { - preferences.setView(view); - } - - function onViewChange(event: CustomEvent) { - updateViewPreferences(event.detail); - goto(getViewLink(event.detail), { - replaceState: true - }); - } - - $: selectedColumnsNumber = $columns.reduce((acc, column) => { - if (column.hide === true) return acc; - - return ++acc; - }, 0); {#if !hideColumns && view === View.Table} - {#if $columns?.length} - + + {#snippet children(toggle, selectedColumnsNumber)} - - - - {#each $columns as column} - {#if !column?.exclude} - (column.hide = !column.hide)} - checked={!column.hide} - disabled={allowNoColumns - ? false - : selectedColumnsNumber <= 1 && column.hide !== true} /> - {/if} - {/each} - - - - - {/if} + {/snippet} + {/if} {#if !hideView} - + {/if} diff --git a/src/lib/components/viewToggle.svelte b/src/lib/components/viewToggle.svelte new file mode 100644 index 000000000..350c18d21 --- /dev/null +++ b/src/lib/components/viewToggle.svelte @@ -0,0 +1,48 @@ + + + diff --git a/src/lib/layout/displaySettingsModal.svelte b/src/lib/layout/displaySettingsModal.svelte new file mode 100644 index 000000000..20a0a7706 --- /dev/null +++ b/src/lib/layout/displaySettingsModal.svelte @@ -0,0 +1,56 @@ + + + + + {#if !hideView} + + Layout + + + {/if} + {#if !hideColumns && $columns?.length} + + Columns + + {#snippet children(toggle, selectedColumnsNumber)} + + Columns + + + {/snippet} + + + {/if} + + diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts index 2d7362505..98acd4b51 100644 --- a/src/lib/layout/index.ts +++ b/src/lib/layout/index.ts @@ -21,3 +21,4 @@ export { default as WizardSecondaryContainer } from './wizardSecondaryContainer. export { default as WizardSecondaryContent } from './wizardSecondaryContent.svelte'; export { default as WizardSecondaryFooter } from './wizardSecondaryFooter.svelte'; export { default as Wizard } from './wizard.svelte'; +export { default as ResponsiveContainerHeader } from './responsiveContainerHeader.svelte'; diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte new file mode 100644 index 000000000..ee7fed506 --- /dev/null +++ b/src/lib/layout/responsiveContainerHeader.svelte @@ -0,0 +1,136 @@ + + +
+ + {#if $isSmallViewport} + + +
+ {@render children()} +
+ {#if numberOfOptions === 1} + {#if hasSearch} + {@render searchButton(true)} + {:else if hasFilters && $columns?.length} + {@render filtersButton(true)} + {:else if hasDisplaySettings} + {@render settingsButton(true)} + {/if} + {/if} + + {#if numberOfOptions > 1} + + {#if hasSearch} + {@render searchButton()} + {/if} + {#if hasFilters && $columns?.length} + {@render filtersButton()} + {/if} + {#if hasDisplaySettings} + {@render settingsButton()} + {/if} + + {/if} + + {#if showSearch && hasSearch} + + {/if} + + {:else} + + + {#if hasSearch} + + {/if} + {#if hasFilters && $columns?.length} + + {/if} + + + {#if hasDisplaySettings} + + {/if} + {@render children()} + + + {/if} + + +
+ +{#snippet searchButton(icon = false)} + +{/snippet} + +{#snippet settingsButton(icon = false)} + +{/snippet} + +{#snippet filtersButton(icon = false)} + +{/snippet} + +{#if showDisplaySettingsModal} + +{/if} diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte index ead3c07ea..dd4fbd74a 100644 --- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte +++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte @@ -92,7 +92,7 @@ this={option.component} editing bind:data={selectedAttribute} - on:close={() => (option = null)} /> + onclose={() => (option = null)} /> {/if} {/if} diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte index 7e14e16c1..ed933f485 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/+page.svelte @@ -1,7 +1,7 @@