Skip to content

Commit f01c411

Browse files
ArmanNikArmanNik
committed
feat: add missing responsive headers
1 parent 4b94159 commit f01c411

File tree

4 files changed

+55
-76
lines changed

4 files changed

+55
-76
lines changed

‎src/lib/layout/responsiveContainerHeader.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
1818
let {
1919
columns,
20-
view = View.Table,
20+
view = $bindable(View.Table),
2121
hideView = false,
2222
hideColumns = false,
2323
hasSearch = false,

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,31 @@
11
<script lang="ts">
2-
import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
2+
import { Empty, PaginationWithLimit } from '$lib/components';
33
import { Button } from '$lib/elements/forms';
4-
import { Container } from '$lib/layout';
4+
import { Container, ResponsiveContainerHeader } from '$lib/layout';
55
import { columns, showCreate } from './store';
66
import Table from './table.svelte';
77
import Grid from './grid.svelte';
88
import type { PageData } from './$types';
99
import { canWriteCollections } from '$lib/stores/roles';
10-
import { Icon, Layout } from '@appwrite.io/pink-svelte';
10+
import { Icon } from '@appwrite.io/pink-svelte';
1111
import { IconPlus } from '@appwrite.io/pink-icons-svelte';
1212
1313
export let data: PageData;
1414
</script>
1515

1616
<Container>
17-
<Layout.Stack direction="row" justifyContent="space-between">
18-
<Layout.Stack direction="row" alignItems="center">
19-
<SearchQuery placeholder="Search by name or ID" />
20-
</Layout.Stack>
21-
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
22-
<ViewSelector
23-
{columns}
24-
view={data.view}
25-
hideColumns={!data.collections.total}
26-
hideView={!data.collections.total} />
27-
{#if $canWriteCollections}
28-
<Button on:click={() => ($showCreate = true)} event="create_collection">
29-
<Icon icon={IconPlus} slot="start" size="s" />
30-
Create collection
31-
</Button>
32-
{/if}
33-
</Layout.Stack>
34-
</Layout.Stack>
17+
<ResponsiveContainerHeader
18+
bind:view={data.view}
19+
{columns}
20+
hasSearch
21+
searchPlaceholder="Search by name or ID">
22+
{#if $canWriteCollections}
23+
<Button on:click={() => ($showCreate = true)} event="create_collection">
24+
<Icon icon={IconPlus} slot="start" size="s" />
25+
Create collection
26+
</Button>
27+
{/if}
28+
</ResponsiveContainerHeader>
3529

3630
{#if data.collections.total}
3731
{#if data.view === 'grid'}

‎src/routes/(console)/project-[region]-[project]/messaging/+page.svelte

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
11
<script lang="ts">
22
import { base } from '$app/paths';
33
import { page } from '$app/state';
4-
import {
5-
Empty,
6-
EmptyFilter,
7-
EmptySearch,
8-
Id,
9-
PaginationWithLimit,
10-
SearchQuery,
11-
ViewSelector
12-
} from '$lib/components';
13-
import { Filters, hasPageQueries } from '$lib/components/filters';
4+
import { Empty, EmptyFilter, EmptySearch, Id, PaginationWithLimit } from '$lib/components';
5+
import { hasPageQueries } from '$lib/components/filters';
146
import { Button } from '$lib/elements/forms';
157
import { toLocaleDateTime } from '$lib/helpers/date';
16-
import { Container } from '$lib/layout';
8+
import { Container, ResponsiveContainerHeader } from '$lib/layout';
179
import { MessagingProviderType } from '@appwrite.io/console';
1810
import CreateMessageDropdown from './createMessageDropdown.svelte';
1911
import FailedModal from './failedModal.svelte';
@@ -105,18 +97,18 @@
10597
</script>
10698

10799
<Container>
108-
<Layout.Stack direction="row" justifyContent="space-between">
109-
<Layout.Stack direction="row" alignItems="center">
110-
<SearchQuery placeholder="Search by description, type, status, or ID" />
111-
</Layout.Stack>
112-
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
113-
<Filters query={data.query} {columns} analyticsSource="messaging_messages" />
114-
<ViewSelector view={data.view} {columns} hideView />
115-
{#if $canWriteMessages}
116-
<CreateMessageDropdown />
117-
{/if}
118-
</Layout.Stack>
119-
</Layout.Stack>
100+
<ResponsiveContainerHeader
101+
{columns}
102+
bind:view={data.view}
103+
hideView
104+
hasFilters
105+
hasSearch
106+
analyticsSource="messaging_messages"
107+
searchPlaceholder="Search by description, type, status, or ID">
108+
{#if $canWriteMessages}
109+
<CreateMessageDropdown />
110+
{/if}
111+
</ResponsiveContainerHeader>
120112

121113
{#if data.messages.total}
122114
<Table.Root

‎src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,20 @@
11
<script lang="ts">
22
import { page } from '$app/state';
33
import { Button } from '$lib/elements/forms';
4-
import {
5-
Empty,
6-
EmptySearch,
7-
SearchQuery,
8-
PaginationWithLimit,
9-
EmptyFilter,
10-
ViewSelector
11-
} from '$lib/components';
4+
import { Empty, EmptySearch, PaginationWithLimit, EmptyFilter } from '$lib/components';
125
import Create from './create.svelte';
136
import { goto } from '$app/navigation';
14-
import { Container } from '$lib/layout';
7+
import { Container, ResponsiveContainerHeader } from '$lib/layout';
158
import { base } from '$app/paths';
169
import type { Models } from '@appwrite.io/console';
1710
import type { PageData } from './$types';
1811
import { showCreate } from './store';
19-
import { Filters, hasPageQueries } from '$lib/components/filters';
12+
import { hasPageQueries } from '$lib/components/filters';
2013
import Table from './table.svelte';
2114
import type { Column } from '$lib/helpers/types';
2215
import { writable } from 'svelte/store';
2316
import { canWriteTopics } from '$lib/stores/roles';
24-
import { Icon, Layout } from '@appwrite.io/pink-svelte';
17+
import { Icon } from '@appwrite.io/pink-svelte';
2518
import { View } from '$lib/helpers/load';
2619
import { IconPlus } from '@appwrite.io/pink-icons-svelte';
2720
import { Click, trackEvent } from '$lib/actions/analytics';
@@ -72,26 +65,26 @@
7265
</script>
7366

7467
<Container>
75-
<Layout.Stack direction="row" justifyContent="space-between">
76-
<Layout.Stack direction="row" alignItems="center">
77-
<SearchQuery placeholder="Search by name or ID" />
78-
</Layout.Stack>
79-
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
80-
<Filters query={data.query} {columns} analyticsSource="messaging_topics_filter" />
81-
<ViewSelector view={View.Table} {columns} hideView />
82-
{#if $canWriteTopics}
83-
<Button
84-
on:click={() => {
85-
$showCreate = true;
86-
trackEvent(Click.MessagingTopicCreateClick);
87-
}}
88-
event="create_topic">
89-
<Icon icon={IconPlus} slot="start" size="s" />
90-
Create topic
91-
</Button>
92-
{/if}
93-
</Layout.Stack>
94-
</Layout.Stack>
68+
<ResponsiveContainerHeader
69+
{columns}
70+
view={View.Table}
71+
hideView
72+
hasFilters
73+
hasSearch
74+
analyticsSource="messaging_topics_filter"
75+
searchPlaceholder="Search by name or ID">
76+
{#if $canWriteTopics}
77+
<Button
78+
on:click={() => {
79+
$showCreate = true;
80+
trackEvent(Click.MessagingTopicCreateClick);
81+
}}
82+
event="create_topic">
83+
<Icon icon={IconPlus} slot="start" size="s" />
84+
Create topic
85+
</Button>
86+
{/if}
87+
</ResponsiveContainerHeader>
9588

9689
{#if data.topics.total}
9790
<Table columns={$columns} {data} />

0 commit comments

Comments
 (0)