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 value = options[0];
export let icons: typeof LinkButton[] | undefined = undefined;
export let icons: (typeof LinkButton)[] | undefined = undefined;
let showMenu = false;
@@ -24,8 +24,8 @@
showMenu = false;
};
$: index = options.findIndex(option => option === value)
$: icon = icons?.[index]
$: index = options.findIndex((option) => option === value);
$: icon = icons?.[index];
</script>
<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 {
Cover = 'Cover',
List = 'List'
List = 'List',
}
export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settings', {
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;
const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
const viewOptions = [{
const viewOptions = [
{
name: AlbumViewMode.Cover,
icon: ViewGridOutline
}, {
icon: ViewGridOutline,
},
{
name: AlbumViewMode.List,
icon: FormatListBulletedSquare
}]
const viewOptionNames = viewOptions.map(option => option.name)
const viewOptionIcons = viewOptions.map(option => option.icon)
icon: FormatListBulletedSquare,
},
];
const viewOptionNames = viewOptions.map((option) => option.name);
const viewOptionIcons = viewOptions.map((option) => option.icon);
const {
albums: unsortedAlbums,
@@ -103,8 +106,8 @@
};
const dateLocaleString = (dateString: string) => {
return new Date(dateString).toLocaleDateString($locale, dateFormats.album)
}
return new Date(dateString).toLocaleDateString($locale, dateFormats.album);
};
onMount(() => {
removeAlbumsIfEmpty();
@@ -162,18 +165,18 @@
>
{#each $albums as album (album.id)}
<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:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)}
tabindex="0"
>
<td class="w-1/4 text-ellipsis px-2 text-md">{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.albumName}</td>
<td class="text-md w-1/4 text-ellipsis px-2">
{album.assetCount}
{album.assetCount == 1 ? `item` : `items`}
</td>
<td class="w-1/4 text-ellipsis px-2 text-md">{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.updatedAt)}</td>
<td class="text-md w-1/4 text-ellipsis px-2">{dateLocaleString(album.createdAt)}</td>
</tr>
{/each}
</tbody>