helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(web): material icons (#4636)

Browse source
This commit is contained in:
Jason Rasmussen 2023-10-25 09:48:25 -04:00 • committed by GitHub
parent d5e19e45cd
commit 2ad389f64e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
89 changed files with 557 additions and 534 deletions
Download patch file Download diff file Expand all files Collapse all files

53
web/src/lib/components/shared-components/side-bar/side-bar.svelte
View file

@ -1,25 +1,27 @@
<script lang="ts">
import { page } from '$app/stores';
import { locale, sidebarSettings } from '$lib/stores/preferences.store';
import { featureFlags } from '$lib/stores/server-config.store';
import { AssetApiGetAssetStatsRequest, api } from '@api';
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
import AccountMultiple from 'svelte-material-icons/AccountMultiple.svelte';
import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
import ImageMultipleOutline from 'svelte-material-icons/ImageMultipleOutline.svelte';
import ImageMultiple from 'svelte-material-icons/ImageMultiple.svelte';
import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
import Magnify from 'svelte-material-icons/Magnify.svelte';
import Map from 'svelte-material-icons/Map.svelte';
import Account from 'svelte-material-icons/Account.svelte';
import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
import HeartMultiple from 'svelte-material-icons/HeartMultiple.svelte';
import {
mdiAccount,
mdiAccountMultiple,
mdiAccountMultipleOutline,
mdiArchiveArrowDownOutline,
mdiHeartMultiple,
mdiHeartMultipleOutline,
mdiImageAlbum,
mdiImageMultiple,
mdiImageMultipleOutline,
mdiMagnify,
mdiMap,
mdiTrashCanOutline,
} from '@mdi/js';
import { AppRoute } from '../../../constants';
import LoadingSpinner from '../loading-spinner.svelte';
import StatusBox from '../status-box.svelte';
import SideBarButton from './side-bar-button.svelte';
import { locale, sidebarSettings } from '$lib/stores/preferences.store';
import SideBarSection from './side-bar-section.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
const getStats = async (dto: AssetApiGetAssetStatsRequest) => {
const { data: stats } = await api.assetApi.getAssetStats(dto);
@ -45,7 +47,7 @@
<a data-sveltekit-preload-data="hover" data-sveltekit-noscroll href={AppRoute.PHOTOS} draggable="false">
<SideBarButton
title="Photos"
logo={isPhotosSelected ? ImageMultiple : ImageMultipleOutline}
icon={isPhotosSelected ? mdiImageMultiple : mdiImageMultipleOutline}
isSelected={isPhotosSelected}
>
<svelte:fragment slot="moreInformation">
@ -62,23 +64,23 @@
</a>
{#if $featureFlags.search}
<a data-sveltekit-preload-data="hover" data-sveltekit-noscroll href={AppRoute.EXPLORE} draggable="false">
<SideBarButton title="Explore" logo={Magnify} isSelected={$page.route.id === '/(user)/explore'} />
<SideBarButton title="Explore" icon={mdiMagnify} isSelected={$page.route.id === '/(user)/explore'} />
</a>
{/if}
{#if $featureFlags.map}
<a data-sveltekit-preload-data="hover" href={AppRoute.MAP} draggable="false">
<SideBarButton title="Map" logo={Map} isSelected={$page.route.id === '/(user)/map'} />
<SideBarButton title="Map" icon={mdiMap} isSelected={$page.route.id === '/(user)/map'} />
</a>
{/if}
{#if $sidebarSettings.people}
<a data-sveltekit-preload-data="hover" href={AppRoute.PEOPLE} draggable="false">
<SideBarButton title="People" logo={Account} isSelected={$page.route.id === '/(user)/people'} />
<SideBarButton title="People" icon={mdiAccount} isSelected={$page.route.id === '/(user)/people'} />
</a>
{/if}
<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
<SideBarButton
title="Sharing"
logo={isSharingSelected ? AccountMultiple : AccountMultipleOutline}
icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
isSelected={isSharingSelected}
>
<svelte:fragment slot="moreInformation">
@ -100,7 +102,7 @@
<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
<SideBarButton
title="Favorites"
logo={isFavoritesSelected ? HeartMultiple : HeartMultipleOutline}
icon={isFavoritesSelected ? mdiHeartMultiple : mdiHeartMultipleOutline}
isSelected={isFavoritesSelected}
>
<svelte:fragment slot="moreInformation">
@ -116,7 +118,12 @@
</SideBarButton>
</a>
<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} draggable="false">
<SideBarButton title="Albums" logo={ImageAlbum} flippedLogo={true} isSelected={$page.route.id === '/(user)/albums'}>
<SideBarButton
title="Albums"
icon={mdiImageAlbum}
flippedLogo={true}
isSelected={$page.route.id === '/(user)/albums'}
>
<svelte:fragment slot="moreInformation">
{#await getAlbumCount()}
<LoadingSpinner />
@ -129,7 +136,7 @@
</SideBarButton>
</a>
<a data-sveltekit-preload-data="hover" href={AppRoute.ARCHIVE} draggable="false">
<SideBarButton title="Archive" logo={ArchiveArrowDownOutline} isSelected={$page.route.id === '/(user)/archive'}>
<SideBarButton title="Archive" icon={mdiArchiveArrowDownOutline} isSelected={$page.route.id === '/(user)/archive'}>
<svelte:fragment slot="moreInformation">
{#await getStats({ isArchived: true })}
<LoadingSpinner />
@ -145,7 +152,7 @@
{#if $featureFlags.trash}
<a data-sveltekit-preload-data="hover" href={AppRoute.TRASH} draggable="false">
<SideBarButton title="Trash" logo={TrashCanOutline} isSelected={isTrashSelected}>
<SideBarButton title="Trash" icon={mdiTrashCanOutline} isSelected={isTrashSelected}>
<svelte:fragment slot="moreInformation">
{#await getStats({ isTrashed: true })}
<LoadingSpinner />