KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2026-01-10 11:15:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Album view mode type definition for typescript support in if statements

Browse Source
This commit is contained in:
Kevin
2023-08-16 22:03:49 +02:00
parent 8cf611125d
commit e9acee95c1
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/lib/stores/preferences.store.ts
View File

@@ -44,7 +44,12 @@ export interface AlbumViewSettings {
view: string; view: string;
} }
export enum AlbumViewMode {
Cover = 'Cover',
List = 'List'
}
export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settings', { export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settings', {
sortBy: 'Most recent photo', sortBy: 'Most recent photo',
view: 'Cover' view: AlbumViewMode.Cover
}); });

10
web/src/routes/(user)/albums/+page.svelte
View File

@@ -19,7 +19,7 @@
import Dropdown from '$lib/components/elements/dropdown.svelte'; import Dropdown from '$lib/components/elements/dropdown.svelte';
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte'; import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import { dateFormats } from '$lib/constants'; import { dateFormats } from '$lib/constants';
import { locale } from '$lib/stores/preferences.store'; import { locale, AlbumViewMode } from '$lib/stores/preferences.store';
import { import {
notificationController, notificationController,
NotificationType, NotificationType,
@@ -30,10 +30,10 @@
const sortByOptions = ['Most recent photo', 'Last modified', 'Album title']; const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
const viewOptions = [{ const viewOptions = [{
name: 'Cover', name: AlbumViewMode.Cover,
icon: ViewGridOutline icon: ViewGridOutline
}, { }, {
name: 'List', name: AlbumViewMode.List,
icon: FormatListBulletedSquare icon: FormatListBulletedSquare
}] }]
const viewOptionNames = viewOptions.map(option => option.name) const viewOptionNames = viewOptions.map(option => option.name)
@@ -137,7 +137,7 @@
</div> </div>
<!-- Album Card --> <!-- Album Card -->
{#if $albumViewSettings.view === 'Cover'} {#if $albumViewSettings.view === AlbumViewMode.Cover}
<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]"> <div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
{#each $albums as album (album.id)} {#each $albums as album (album.id)}
<a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}> <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
@@ -145,7 +145,7 @@
</a> </a>
{/each} {/each}
</div> </div>
{:else if $albumViewSettings.view === 'List'} {:else if $albumViewSettings.view === AlbumViewMode.List}
<table class="mt-5 w-full text-left"> <table class="mt-5 w-full text-left">
<thead <thead
class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary" class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"