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

Update to icon buttons

Browse Source
This commit is contained in:
Jake Barnby
2025-11-14 18:52:14 +13:00
parent b1988cc52b
commit f6375138cf
1 changed files with 44 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
+44 -53
View File
@@ -8,7 +8,7 @@
import { Container } from '$lib/layout';
import { preferences } from '$lib/stores/preferences';
import { canWriteTables, canWriteRows } from '$lib/stores/roles';
import { Icon, Layout, Divider, Tooltip, Popover, ActionMenu } from '@appwrite.io/pink-svelte';
import { Icon, Layout, Divider, Tooltip } from '@appwrite.io/pink-svelte';
import type { PageData } from './$types';
import {
table,
@@ -179,13 +179,6 @@
justifyContent="flex-end"
style="padding-right: 40px;">
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
<Button
secondary
event={Click.DatabaseImportCsv}
disabled={!(hasColumns && hasValidColumns)}
on:click={() => (showImportCSV = true)}>
Import CSV
</Button>
{#if !$isSmallViewport}
<Button
secondary
@@ -196,45 +189,52 @@
Create row
</Button>
<Button
icon
size="s"
secondary
class="small-button-dimensions"
on:click={() => {
$expandTabs = !$expandTabs;
preferences.setKey('tableHeaderExpanded', $expandTabs);
<Tooltip placement="top">
<Button
icon
size="s"
secondary
class="small-button-dimensions"
on:click={() => (showImportCSV = true)}>
<Icon icon={IconUpload} size="s" />
</Button>
<svelte:fragment slot="tooltip">Import CSV</svelte:fragment>
</Tooltip>
<Tooltip placement="top">
<Button
icon
size="s"
secondary
class="small-button-dimensions"
on:click={() => {
trackEvent(Click.DatabaseExportCsv);
goto(getTableExportUrl());
}}>
<Icon
icon={!$expandTabs ? IconChevronDown : IconChevronUp}
size="s" />
</Button>
<Icon icon={IconDownload} size="s" />
</Button>
<Popover padding="none" placement="bottom-start" let:toggle let:showing>
<Button
secondary
disabled={!(hasColumns && hasValidColumns)}
on:click={toggle}>
Manage rows
<span slot="end" class="chevron-wrapper" class:rotate={showing}>
<Icon icon={IconChevronDown} size="s" />
</span>
</Button>
<Button
leadingIcon={IconUpload}
on:click={() => (showImportCSV = true)}>
Import CSV
</Button>
<svelte:fragment slot="tooltip">Export CSV</svelte:fragment>
</Tooltip>
<Button
leadingIcon={IconDownload}
on:click={() => {
trackEvent(Click.DatabaseExportCsv);
goto(getTableExportUrl());
}}>
Export CSV
</Button>
<Tooltip placement="top">
<Button
icon
size="s"
secondary
class="small-button-dimensions"
on:click={() => {
$expandTabs = !$expandTabs;
preferences.setKey('tableHeaderExpanded', $expandTabs);
}}>
<Icon
icon={!$expandTabs ? IconChevronDown : IconChevronUp}
size="s" />
</Button>
<svelte:fragment slot="tooltip">{!$expandTabs ? 'Expand' : 'Collapse'}</svelte:fragment>
</Tooltip>
<Tooltip disabled={isRefreshing || !data.rows.total} placement="top">
<Button
@@ -365,15 +365,6 @@
height: 32px !important;
}
.chevron-wrapper {
display: inline-flex;
transition: transform 0.15s ease-out;
}
.chevron-wrapper.rotate {
transform: rotate(180deg);
}
:global(.rotating) {
animation: rotate 1s linear infinite;
}