feat(frontend): replace emoji with inline Material Symbols icon system
Add a self-contained icon system: vendored Material Symbols registry, an <Icon> component that references a single <symbol> sprite via <use>, plus IconButton/IconSprite. Replace every emoji/Unicode glyph (logo, theme switcher, cover placeholder, like/comment counts, lightbox controls, back links) and add leading icons to key controls. Decorative icons are aria-hidden; icon-only buttons get labels; theme toggles expose aria-pressed; counters get accessible names. Recorded in openspec change material-icons-ui (all tasks complete).
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { api } from '$lib/api';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import type { Album, ShareLink } from '$lib/types';
|
||||
|
||||
const albumId = $derived($page.params.id);
|
||||
@@ -81,7 +82,10 @@
|
||||
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold">Настройки</h1>
|
||||
<a href="/albums/{albumId}" class="text-primary text-sm">← К альбому</a>
|
||||
<a href="/albums/{albumId}" class="text-primary inline-flex items-center gap-1 text-sm">
|
||||
<Icon name="arrow_back" class="size-4" />
|
||||
К альбому
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{#if error}<p class="text-danger mb-4 text-sm">{error}</p>{/if}
|
||||
@@ -103,7 +107,13 @@
|
||||
class="border-border bg-bg text-text w-full rounded-lg border px-3 py-2"
|
||||
></textarea>
|
||||
</label>
|
||||
<button class="bg-primary text-primary-fg rounded-lg px-4 py-2 text-sm" type="submit">Сохранить</button>
|
||||
<button
|
||||
class="bg-primary text-primary-fg inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm"
|
||||
type="submit"
|
||||
>
|
||||
<Icon name="save" class="size-4" />
|
||||
Сохранить
|
||||
</button>
|
||||
{#if saved}<span class="text-success ml-3 text-sm">Сохранено</span>{/if}
|
||||
</form>
|
||||
|
||||
@@ -117,9 +127,13 @@
|
||||
class="border-border bg-bg text-text w-32 rounded-lg border px-2 py-1.5"
|
||||
/>
|
||||
</label>
|
||||
<button class="bg-primary text-primary-fg rounded-lg px-4 py-2 text-sm" type="submit"
|
||||
>Создать ссылку</button
|
||||
<button
|
||||
class="bg-primary text-primary-fg inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm"
|
||||
type="submit"
|
||||
>
|
||||
<Icon name="add_link" class="size-4" />
|
||||
Создать ссылку
|
||||
</button>
|
||||
</form>
|
||||
<ul class="divide-border divide-y">
|
||||
{#each shareLinks as link (link.id)}
|
||||
@@ -129,7 +143,14 @@
|
||||
· <a class="text-primary" href="/share/{link.token}">/share/{link.token}</a>
|
||||
</span>
|
||||
{#if !link.revoked_at}
|
||||
<button type="button" class="text-danger" onclick={() => revoke(link.id)}>Отозвать</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-danger inline-flex shrink-0 items-center gap-1"
|
||||
onclick={() => revoke(link.id)}
|
||||
>
|
||||
<Icon name="link_off" class="size-4" />
|
||||
Отозвать
|
||||
</button>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
@@ -138,6 +159,10 @@
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="border-danger text-danger rounded-lg border px-4 py-2 text-sm"
|
||||
onclick={removeAlbum}>Удалить альбом</button
|
||||
class="border-danger text-danger inline-flex items-center gap-1.5 rounded-lg border px-4 py-2 text-sm"
|
||||
onclick={removeAlbum}
|
||||
>
|
||||
<Icon name="delete_forever" class="size-4" />
|
||||
Удалить альбом
|
||||
</button>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user