tbelway/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-10-31 10:49:11 -04:00
Code Issues Packages Projects Releases Wiki Activity

cho(web): Icon consistency and improvements (#9403)

Browse Source 
* Add change from outline to regular icon in sidebar when page selected to more icons. Also change Favorites to single heart consistent with mobile app.

* Forgot to remove a few unused lines. Fixed.
This commit is contained in:
Nicholas Flamy 2024-05-12 14:08:17 -04:00 committed by GitHub
parent f667c9597b
commit a97e0caeb9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/lib/components/shared-components/side-bar/side-bar.svelte
View File

@ -4,16 +4,20 @@
import { getAlbumCount, getAssetStatistics } from '@immich/sdk'; import { getAlbumCount, getAssetStatistics } from '@immich/sdk';
import { import {
mdiAccount, mdiAccount,
mdiAccountOutline,
mdiAccountMultiple, mdiAccountMultiple,
mdiAccountMultipleOutline, mdiAccountMultipleOutline,
mdiArchiveArrowDown,
mdiArchiveArrowDownOutline, mdiArchiveArrowDownOutline,
mdiHeartMultiple, mdiHeart,
mdiHeartMultipleOutline, mdiHeartOutline,
mdiImageAlbum, mdiImageAlbum,
mdiImageMultiple, mdiImageMultiple,
mdiImageMultipleOutline, mdiImageMultipleOutline,
mdiMagnify, mdiMagnify,
mdiMap, mdiMap,
mdiMapOutline,
mdiTrashCan,
mdiTrashCanOutline, mdiTrashCanOutline,
} from '@mdi/js'; } from '@mdi/js';
import LoadingSpinner from '../loading-spinner.svelte'; import LoadingSpinner from '../loading-spinner.svelte';
@ -31,9 +35,13 @@
} }
}; };
let isArchiveSelected: boolean;
let isFavoritesSelected: boolean; let isFavoritesSelected: boolean;
let isMapSelected: boolean;
let isPeopleSelected: boolean;
let isPhotosSelected: boolean; let isPhotosSelected: boolean;
let isSharingSelected: boolean; let isSharingSelected: boolean;
let isTrashSelected: boolean;
</script> </script>
<SideBarSection> <SideBarSection>
@ -60,11 +68,21 @@
{/if} {/if}
{#if $featureFlags.map} {#if $featureFlags.map}
<SideBarLink title="Map" routeId="/(user)/map" icon={mdiMap} /> <SideBarLink
title="Map"
routeId="/(user)/map"
bind:isSelected={isMapSelected}
icon={isMapSelected ? mdiMap : mdiMapOutline}
/>
{/if} {/if}
{#if $sidebarSettings.people} {#if $sidebarSettings.people}
<SideBarLink title="People" routeId="/(user)/people" icon={mdiAccount} /> <SideBarLink
title="People"
routeId="/(user)/people"
bind:isSelected={isPeopleSelected}
icon={isPeopleSelected ? mdiAccount : mdiAccountOutline}
/>
{/if} {/if}
{#if $sidebarSettings.sharing} {#if $sidebarSettings.sharing}
<SideBarLink <SideBarLink
@ -92,7 +110,7 @@
<SideBarLink <SideBarLink
title="Favorites" title="Favorites"
routeId="/(user)/favorites" routeId="/(user)/favorites"
icon={isFavoritesSelected ? mdiHeartMultiple : mdiHeartMultipleOutline} icon={isFavoritesSelected ? mdiHeart : mdiHeartOutline}
bind:isSelected={isFavoritesSelected} bind:isSelected={isFavoritesSelected}
> >
<svelte:fragment slot="moreInformation"> <svelte:fragment slot="moreInformation">
@ -118,7 +136,12 @@
</svelte:fragment> </svelte:fragment>
</SideBarLink> </SideBarLink>
<SideBarLink title="Archive" routeId="/(user)/archive" icon={mdiArchiveArrowDownOutline}> <SideBarLink
title="Archive"
routeId="/(user)/archive"
bind:isSelected={isArchiveSelected}
icon={isArchiveSelected ? mdiArchiveArrowDown : mdiArchiveArrowDownOutline}
>
<svelte:fragment slot="moreInformation"> <svelte:fragment slot="moreInformation">
{#await getStats({ isArchived: true })} {#await getStats({ isArchived: true })}
<LoadingSpinner /> <LoadingSpinner />
@ -132,7 +155,12 @@
</SideBarLink> </SideBarLink>
{#if $featureFlags.trash} {#if $featureFlags.trash}
<SideBarLink title="Trash" routeId="/(user)/trash" icon={mdiTrashCanOutline}> <SideBarLink
title="Trash"
routeId="/(user)/trash"
bind:isSelected={isTrashSelected}
icon={isTrashSelected ? mdiTrashCan : mdiTrashCanOutline}
>
<svelte:fragment slot="moreInformation"> <svelte:fragment slot="moreInformation">
{#await getStats({ isTrashed: true })} {#await getStats({ isTrashed: true })}
<LoadingSpinner /> <LoadingSpinner />