feat(frontend): collapsible right-panel sections with photo info
- add PanelSection with persisted collapse state - restructure album and photo panels into sections - add "Информация" section with EXIF/metadata (size, type, resolution, taken, coords)
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
import Icon from './Icon.svelte';
|
||||
import CoverPicker from './CoverPicker.svelte';
|
||||
import Comments from './Comments.svelte';
|
||||
import PanelSection from './PanelSection.svelte';
|
||||
import { albums } from '$lib/stores/albums.svelte';
|
||||
import { auth } from '$lib/stores/auth.svelte';
|
||||
import type { Album, Photo } from '$lib/types';
|
||||
@@ -86,6 +87,18 @@
|
||||
node.select();
|
||||
}
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (!bytes) return '—';
|
||||
const units = ['Б', 'КБ', 'МБ', 'ГБ'];
|
||||
let v = bytes;
|
||||
let i = 0;
|
||||
while (v >= 1024 && i < units.length - 1) {
|
||||
v /= 1024;
|
||||
i++;
|
||||
}
|
||||
return `${i > 0 && v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`;
|
||||
}
|
||||
|
||||
async function resetCover() {
|
||||
if (!album) return;
|
||||
try {
|
||||
@@ -102,76 +115,88 @@
|
||||
|
||||
{#if photoId}
|
||||
{#if photo}
|
||||
<div class="space-y-4 p-4">
|
||||
{#if editingName}
|
||||
<form class="relative" onsubmit={saveName}>
|
||||
<input
|
||||
bind:value={nameDraft}
|
||||
use:autofocus
|
||||
aria-label="Имя файла"
|
||||
class="border-border bg-bg text-text w-full rounded-lg border py-1 pr-16 pl-2 text-sm"
|
||||
/>
|
||||
<div class="absolute top-1/2 right-1 flex -translate-y-1/2 items-center gap-0.5">
|
||||
<button
|
||||
type="submit"
|
||||
class="text-primary hover:bg-bg-muted inline-flex items-center justify-center rounded-md p-1 disabled:opacity-50"
|
||||
aria-label="Сохранить"
|
||||
title="Сохранить"
|
||||
disabled={savingName || !nameDraft.trim()}
|
||||
>
|
||||
<Icon name="check" class="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-text-muted hover:text-text inline-flex items-center justify-center rounded-md p-1"
|
||||
aria-label="Отмена"
|
||||
title="Отмена"
|
||||
onclick={() => (editingName = false)}
|
||||
>
|
||||
<Icon name="close" class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{#if nameError}<p class="text-danger text-xs">{nameError}</p>{/if}
|
||||
{:else if canRename}
|
||||
<button
|
||||
type="button"
|
||||
class="text-text hover:text-primary block w-full truncate text-left text-sm font-semibold"
|
||||
title="Переименовать"
|
||||
onclick={startEdit}
|
||||
>
|
||||
{photo.original_filename}
|
||||
</button>
|
||||
{:else}
|
||||
<h2 class="text-text truncate text-sm font-semibold">{photo.original_filename}</h2>
|
||||
{/if}
|
||||
<div>
|
||||
<div class={metaRow}><span>Автор</span><span class="text-text">{photo.uploader.name}</span></div>
|
||||
{#if photo.taken_at}
|
||||
<div class={metaRow}>
|
||||
<span>Снято</span>
|
||||
<span class="text-text">{new Date(photo.taken_at).toLocaleString()}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="p-4">
|
||||
{#if editingName}
|
||||
<form class="relative" onsubmit={saveName}>
|
||||
<input
|
||||
bind:value={nameDraft}
|
||||
use:autofocus
|
||||
aria-label="Имя файла"
|
||||
class="border-border bg-bg text-text w-full rounded-lg border py-1 pr-16 pl-2 text-sm"
|
||||
/>
|
||||
<div class="absolute top-1/2 right-1 flex -translate-y-1/2 items-center gap-0.5">
|
||||
<button
|
||||
type="submit"
|
||||
class="text-primary hover:bg-bg-muted inline-flex items-center justify-center rounded-md p-1 disabled:opacity-50"
|
||||
aria-label="Сохранить"
|
||||
title="Сохранить"
|
||||
disabled={savingName || !nameDraft.trim()}
|
||||
>
|
||||
<Icon name="check" class="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-text-muted hover:text-text inline-flex items-center justify-center rounded-md p-1"
|
||||
aria-label="Отмена"
|
||||
title="Отмена"
|
||||
onclick={() => (editingName = false)}
|
||||
>
|
||||
<Icon name="close" class="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{#if nameError}<p class="text-danger mt-1 text-xs">{nameError}</p>{/if}
|
||||
{:else if canRename}
|
||||
<button
|
||||
type="button"
|
||||
class="text-text hover:text-primary block w-full truncate text-left text-sm font-semibold"
|
||||
title="Переименовать"
|
||||
onclick={startEdit}
|
||||
>
|
||||
{photo.original_filename}
|
||||
</button>
|
||||
{:else}
|
||||
<h2 class="text-text truncate text-sm font-semibold">{photo.original_filename}</h2>
|
||||
{/if}
|
||||
<div class={metaRow}>
|
||||
<span>Размер</span>
|
||||
<span class="text-text">{photo.width}×{photo.height}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-text-muted mb-1 block text-xs font-semibold tracking-wide uppercase">
|
||||
Комментарии
|
||||
</span>
|
||||
|
||||
<PanelSection id="photo-info" title="Информация">
|
||||
<dl class="space-y-1">
|
||||
<div class={metaRow}><span>Автор</span><span class="text-text">{photo.uploader.name}</span></div>
|
||||
<div class={metaRow}><span>Файл</span><span class="text-text">{formatSize(photo.size)}</span></div>
|
||||
<div class={metaRow}><span>Тип</span><span class="text-text">{photo.mime_type}</span></div>
|
||||
<div class={metaRow}>
|
||||
<span>Разрешение</span>
|
||||
<span class="text-text">{photo.width}×{photo.height}</span>
|
||||
</div>
|
||||
{#if photo.taken_at}
|
||||
<div class={metaRow}>
|
||||
<span>Снято</span>
|
||||
<span class="text-text">{new Date(photo.taken_at).toLocaleString()}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if photo.latitude != null && photo.longitude != null}
|
||||
<div class={metaRow}>
|
||||
<span>Координаты</span>
|
||||
<span class="text-text">{photo.latitude.toFixed(5)}, {photo.longitude.toFixed(5)}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class={metaRow}>
|
||||
<span>Загружено</span>
|
||||
<span class="text-text">{new Date(photo.created_at).toLocaleString()}</span>
|
||||
</div>
|
||||
</dl>
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection id="photo-comments" title="Комментарии">
|
||||
<Comments photoId={photo.id} />
|
||||
</div>
|
||||
</PanelSection>
|
||||
</div>
|
||||
{/if}
|
||||
{:else if album}
|
||||
<div class="space-y-5 p-4">
|
||||
<div>
|
||||
<span class="text-text-muted mb-2 block text-xs font-semibold tracking-wide uppercase">
|
||||
Обложка
|
||||
</span>
|
||||
<div>
|
||||
<PanelSection id="album-cover" title="Обложка">
|
||||
<div class="bg-bg-muted border-border aspect-video overflow-hidden rounded-lg border">
|
||||
{#if album.cover_thumb_url}
|
||||
<img src={album.cover_thumb_url} alt="" class="h-full w-full object-cover" />
|
||||
@@ -202,33 +227,35 @@
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</PanelSection>
|
||||
|
||||
<div>
|
||||
<PanelSection id="album-info" title="Информация">
|
||||
<h2 class="text-text text-lg font-semibold">{album.title}</h2>
|
||||
{#if album.description}<p class="text-text-muted text-sm">{album.description}</p>{/if}
|
||||
<p class="text-text-subtle mt-1 text-xs">
|
||||
{album.photos_count ?? 0} фото · {album.members_count ?? 0} участников
|
||||
</p>
|
||||
{#if error}<p class="text-danger mt-2 text-sm">{error}</p>{/if}
|
||||
</div>
|
||||
</PanelSection>
|
||||
|
||||
<nav class="space-y-0.5" aria-label="Навигация по альбому">
|
||||
<a class={navLink} href="/albums/{album.id}/members">
|
||||
<Icon name="group" class="size-4" />
|
||||
Участники
|
||||
</a>
|
||||
{#if canEdit}
|
||||
<a class={navLink} href="/albums/{album.id}/settings">
|
||||
<Icon name="settings" class="size-4" />
|
||||
Настройки
|
||||
<PanelSection id="album-nav" title="Навигация">
|
||||
<nav class="space-y-0.5" aria-label="Навигация по альбому">
|
||||
<a class={navLink} href="/albums/{album.id}/members">
|
||||
<Icon name="group" class="size-4" />
|
||||
Участники
|
||||
</a>
|
||||
<a class={navLink} href="/albums/{album.id}/settings#share">
|
||||
<Icon name="add_link" class="size-4" />
|
||||
Ссылки для просмотра
|
||||
</a>
|
||||
{/if}
|
||||
</nav>
|
||||
{#if canEdit}
|
||||
<a class={navLink} href="/albums/{album.id}/settings">
|
||||
<Icon name="settings" class="size-4" />
|
||||
Настройки
|
||||
</a>
|
||||
<a class={navLink} href="/albums/{album.id}/settings#share">
|
||||
<Icon name="add_link" class="size-4" />
|
||||
Ссылки для просмотра
|
||||
</a>
|
||||
{/if}
|
||||
</nav>
|
||||
</PanelSection>
|
||||
</div>
|
||||
|
||||
{#if picking}
|
||||
|
||||
Reference in New Issue
Block a user