KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-12-08 20:29:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Alex Tran
2023-08-16 23:03:18 -05:00
parent e9acee95c1
commit 974227a95e
3 changed files with 26 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/lib/components/elements/dropdown.svelte
View File

@@ -11,7 +11,7 @@
export let options: DropdownOption[] = []; export let options: DropdownOption[] = [];
export let value = options[0]; export let value = options[0];
export let icons: typeof LinkButton[] | undefined = undefined; export let icons: (typeof LinkButton)[] | undefined = undefined;
let showMenu = false; let showMenu = false;
@@ -24,8 +24,8 @@
showMenu = false; showMenu = false;
}; };
$: index = options.findIndex(option => option === value) $: index = options.findIndex((option) => option === value);
$: icon = icons?.[index] $: icon = icons?.[index];
</script> </script>
<div id="dropdown-button" use:clickOutside on:outclick={handleClickOutside}> <div id="dropdown-button" use:clickOutside on:outclick={handleClickOutside}>

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

@@ -46,10 +46,10 @@ export interface AlbumViewSettings {
export enum AlbumViewMode { export enum AlbumViewMode {
Cover = 'Cover', Cover = 'Cover',
List = 'List' 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: AlbumViewMode.Cover view: AlbumViewMode.Cover,
}); });

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

@@ -29,15 +29,18 @@
export let data: PageData; export let data: PageData;
const sortByOptions = ['Most recent photo', 'Last modified', 'Album title']; const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
const viewOptions = [{ const viewOptions = [
{
name: AlbumViewMode.Cover, name: AlbumViewMode.Cover,
icon: ViewGridOutline icon: ViewGridOutline,
}, { },
{
name: AlbumViewMode.List, name: AlbumViewMode.List,
icon: FormatListBulletedSquare icon: FormatListBulletedSquare,
}] },
const viewOptionNames = viewOptions.map(option => option.name) ];
const viewOptionIcons = viewOptions.map(option => option.icon) const viewOptionNames = viewOptions.map((option) => option.name);
const viewOptionIcons = viewOptions.map((option) => option.icon);
const { const {
albums: unsortedAlbums, albums: unsortedAlbums,
@@ -103,8 +106,8 @@
}; };
const dateLocaleString = (dateString: string) => { const dateLocaleString = (dateString: string) => {
return new Date(dateString).toLocaleDateString($locale, dateFormats.album) return new Date(dateString).toLocaleDateString($locale, dateFormats.album);
} };
onMount(() => { onMount(() => {
removeAlbumsIfEmpty(); removeAlbumsIfEmpty();
@@ -162,18 +165,18 @@
> >
{#each $albums as album (album.id)} {#each $albums as album (album.id)}
<tr <tr
class="flex h-[50px] w-full place-items-center text-center odd:bg-immich-gray even:bg-immich-bg odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 border-[3px] border-transparent p-5 hover:cursor-pointer hover:border-immich-primary/75 dark:hover:border-immich-dark-primary/75" class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-5 text-center odd:bg-immich-gray even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75"
on:click={() => goto(`albums/${album.id}`)} on:click={() => goto(`albums/${album.id}`)}
on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)} on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)}
tabindex="0" tabindex="0"
> >
<td class="w-1/4 text-ellipsis px-2 text-md">{album.albumName}</td> <td class="text-md w-1/4 text-ellipsis px-2">{album.albumName}</td>
<td class="w-1/4 text-ellipsis px-2 text-md"> <td class="text-md w-1/4 text-ellipsis px-2">
{album.assetCount} {album.assetCount}
{album.assetCount == 1 ? `item` : `items`} {album.assetCount == 1 ? `item` : `items`}
</td> </td>
<td class="w-1/4 text-ellipsis px-2 text-md">{dateLocaleString(album.updatedAt)}</td> <td class="text-md w-1/4 text-ellipsis px-2">{dateLocaleString(album.updatedAt)}</td>
<td class="w-1/4 text-ellipsis px-2 text-md">{dateLocaleString(album.createdAt)}</td> <td class="text-md w-1/4 text-ellipsis px-2">{dateLocaleString(album.createdAt)}</td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>