mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-03-22 18:30:09 +00:00
Code Activity

fix: move tooltip inside of form input to prevent shifting (#1369)

Browse Source
This commit is contained in:
GameTec-live
2026-03-08 15:41:08 +01:00
committed by GitHub
parent 832b7fbff4
commit cad80e7d74
1 changed files with 32 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/routes/settings/admin/users/user-form.svelte
View File

@@ -2,6 +2,7 @@
import FormInput from '$lib/components/form/form-input.svelte'; import FormInput from '$lib/components/form/form-input.svelte';
import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte'; import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import { Input } from '$lib/components/ui/input';
import { Toggle } from '$lib/components/ui/toggle'; import { Toggle } from '$lib/components/ui/toggle';
import * as Tooltip from '$lib/components/ui/tooltip/index.js'; import * as Tooltip from '$lib/components/ui/tooltip/index.js';
import { m } from '$lib/paraglide/messages'; import { m } from '$lib/paraglide/messages';
@@ -76,34 +77,37 @@
<fieldset disabled={inputDisabled}> <fieldset disabled={inputDisabled}>
<div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2"> <div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2">
<FormInput label={m.username()} bind:input={$inputs.username} /> <FormInput label={m.username()} bind:input={$inputs.username} />
<div class="flex items-end"> <FormInput label={m.email()} bind:input={$inputs.email} labelFor="email">
<FormInput <div class="flex items-end">
inputClass="rounded-r-none border-r-0" <Input
label={m.email()} id="email"
bind:input={$inputs.email} class="rounded-r-none border-r-0"
/> aria-invalid={!!$inputs.email.error}
<Tooltip.Provider> bind:value={$inputs.email.value}
{@const label = $inputs.emailVerified.value />
? m.mark_as_unverified() <Tooltip.Provider>
: m.mark_as_verified()} {@const label = $inputs.emailVerified.value
<Tooltip.Root> ? m.mark_as_unverified()
<Tooltip.Trigger> : m.mark_as_verified()}
<Toggle <Tooltip.Root>
bind:pressed={$inputs.emailVerified.value} <Tooltip.Trigger>
aria-label={label} <Toggle
class="h-9 border-input bg-yellow-100 dark:bg-yellow-950 data-[state=on]:bg-green-100 dark:data-[state=on]:bg-green-950 rounded-l-none border px-2 py-1 shadow-xs flex items-center hover:data-[state=on]:bg-accent" bind:pressed={$inputs.emailVerified.value}
> aria-label={label}
{#if $inputs.emailVerified.value} class="h-9 border-input bg-yellow-100 dark:bg-yellow-950 data-[state=on]:bg-green-100 dark:data-[state=on]:bg-green-950 rounded-l-none border px-2 py-1 shadow-xs flex items-center hover:data-[state=on]:bg-accent"
<LucideMailCheck class="text-green-500 dark:text-green-600 size-5" /> >
{:else} {#if $inputs.emailVerified.value}
<LucideMailWarning class="text-yellow-500 dark:text-yellow-600 size-5" /> <LucideMailCheck class="text-green-500 dark:text-green-600 size-5" />
{/if} {:else}
</Toggle> <LucideMailWarning class="text-yellow-500 dark:text-yellow-600 size-5" />
</Tooltip.Trigger> {/if}
<Tooltip.Content>{label}</Tooltip.Content> </Toggle>
</Tooltip.Root> </Tooltip.Trigger>
</Tooltip.Provider> <Tooltip.Content>{label}</Tooltip.Content>
</div> </Tooltip.Root>
</Tooltip.Provider>
</div>
</FormInput>
<FormInput label={m.first_name()} oninput={onNameInput} bind:input={$inputs.firstName} /> <FormInput label={m.first_name()} oninput={onNameInput} bind:input={$inputs.firstName} />
<FormInput label={m.last_name()} oninput={onNameInput} bind:input={$inputs.lastName} /> <FormInput label={m.last_name()} oninput={onNameInput} bind:input={$inputs.lastName} />
<FormInput <FormInput