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

more components

Browse Source
This commit is contained in:
ernstmul
2024-12-31 14:10:39 +01:00
parent d7a758b403
commit 85c3c3a144
5 changed files with 57 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/eventModal.svelte
+13 -11
View File
@@ -13,7 +13,7 @@
type EventResource,
type EventService
} from '$lib/constants';
import { tooltip } from '$lib/actions/tooltip';
import { Tooltip } from '@appwrite.io/pink-svelte';
import { trackEvent } from '$lib/actions/analytics';
// Props
@@ -352,16 +352,18 @@
</div>
<div class="options-list">
{#key copyParent}
<button
on:click={(e) => {
customInput = inputValue;
toggleShowInput(e);
}}
use:tooltip={{ content: 'Edit event', appendTo: copyParent }}
class="options-list-button"
aria-label="edit event">
<span class="icon-pencil" aria-hidden="true" />
</button>
<Tooltip>
<button
on:click={(e) => {
customInput = inputValue;
toggleShowInput(e);
}}
class="options-list-button"
aria-label="edit event">
<span class="icon-pencil" aria-hidden="true" />
</button>
<div slot="tooltip">Edit event</div>
</Tooltip>
<button
disabled={!inputValue}
class="options-list-button"
src/lib/components/trim.svelte
+1 -8
View File
@@ -17,14 +17,7 @@
<svelte:window on:resize={throttle(onResize, 250)} />
<span
class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`}
bind:this={container}
use:tooltip={{
disabled: !showTooltip,
content: container?.innerText ?? undefined,
maxWidth: '30rem'
}}>
<span class={`text ${alternativeTrim ? 'u-trim-1' : 'u-trim'}`} bind:this={container}>
<Tooltip inline={false}
><span class="text u-trim"><slot /></span><span slot="tooltip"
>{container?.innerText ?? undefined}</span
src/lib/elements/selectSearchItem.svelte
+12 -13
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { tooltip } from '$lib/actions/tooltip';
import { Tooltip } from '@appwrite.io/pink-svelte';
export let data: string[] = [];
</script>
@@ -11,17 +11,16 @@
<slot />
</span>
{#if data?.length}
<span
class="u-flex u-flex-1 u-trim-1 u-gap-4"
use:tooltip={{
content: data.map((e) => e ?? 'null').join(' | ')
}}>
{#each data as item, i}
{#if i}
<span class="u-text-color-gray">|</span>
{/if}
<span class="text" style="white-space: nowrap" data-private>{item}</span>
{/each}
</span>
<Tooltip>
<span class="u-flex u-flex-1 u-trim-1 u-gap-4">
{#each data as item, i}
{#if i}
<span class="u-text-color-gray">|</span>
{/if}
<span class="text" style="white-space: nowrap" data-private>{item}</span>
{/each}
</span>
<div slot="tooltip">{data.map((e) => e ?? 'null').join(' | ')}</div>
</Tooltip>
{/if}
</div>
src/lib/layout/containerButton.svelte
+4 -7
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import { tooltip } from '$lib/actions/tooltip';
import { BillingPlan } from '$lib/constants';
import { Button } from '$lib/elements/forms';
import { tierToPlan } from '$lib/stores/billing';
import { organization } from '$lib/stores/organization';
import { Tooltip } from '@appwrite.io/pink-svelte';
export let title: string;
export let tooltipContent =
@@ -22,11 +22,7 @@
export let buttonType: 'primary' | 'secondary' | 'text' = 'primary';
</script>
<div
use:tooltip={{
content: tooltipContent,
disabled: !disabled
}}>
<Tooltip {disabled}>
<Button
size="s"
text={buttonType === 'text'}
@@ -40,4 +36,5 @@
{/if}
<span class="text">{buttonText}</span>
</Button>
</div>
<div slot="tooltip">{tooltipContent}</div>
</Tooltip>
src/lib/layout/navigation.svelte
+27 -30
View File
@@ -15,6 +15,7 @@
import { showSupportModal } from '$routes/(console)/wizard/support/store';
import { getContext } from 'svelte';
import type { Writable } from 'svelte/store';
import { Tooltip } from '@appwrite.io/pink-svelte';
export let isOpen = false;
@@ -63,38 +64,34 @@
<section class="drop-section">
<ul class="drop-list">
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${projectPath}/overview`
)}
on:click={() => trackEvent('click_menu_overview')}
href={projectPath}
use:tooltip={{
content: 'Overview',
placement: 'right',
disabled: !narrow
}}>
<span class="icon-chart-bar" aria-hidden="true" />
<span class="text">Overview</span>
</a>
<Tooltip placement="right" disabled={!narrow} inline={false}>
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${projectPath}/overview`
)}
on:click={() => trackEvent('click_menu_overview')}
href={projectPath}>
<span class="icon-chart-bar" aria-hidden="true" />
<span class="text">Overview</span>
</a>
<div slot="tooltip">Overview</div>
</Tooltip>
</li>
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${projectPath}/auth`
)}
on:click={() => trackEvent('click_menu_auth')}
href={`${projectPath}/auth`}
use:tooltip={{
content: 'Auth',
placement: 'right',
disabled: !narrow
}}>
<span class="icon-user-group" aria-hidden="true" />
<span class="text">Auth</span>
</a>
<Tooltip placement="right" disabled={!narrow} inline={false}>
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${projectPath}/auth`
)}
on:click={() => trackEvent('click_menu_auth')}
href={`${projectPath}/auth`}>
<span class="icon-user-group" aria-hidden="true" />
<span class="text">Auth</span>
</a>
<div slot="tooltip">Auth</div>
</Tooltip>
</li>
{#if $canSeeDatabases}
<li class="drop-list-item">