mirror of
https://github.com/KevinMidboe/immich.git
synced 2025-10-29 17:40:28 +00:00
chore(web/mobile): use Heart Icon & small icon changes (#2397)
This commit is contained in:
@@ -10,8 +10,8 @@
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
|
||||
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
|
||||
import Star from 'svelte-material-icons/Star.svelte';
|
||||
import StarOutline from 'svelte-material-icons/StarOutline.svelte';
|
||||
import Heart from 'svelte-material-icons/Heart.svelte';
|
||||
import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
|
||||
import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
|
||||
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
|
||||
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
|
||||
@@ -100,7 +100,7 @@
|
||||
/>
|
||||
{#if isOwner}
|
||||
<CircleIconButton
|
||||
logo={asset.isFavorite ? Star : StarOutline}
|
||||
logo={asset.isFavorite ? Heart : HeartOutline}
|
||||
on:click={() => dispatch('favorite')}
|
||||
title="Favorite"
|
||||
/>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
|
||||
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
|
||||
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
|
||||
import Star from 'svelte-material-icons/Star.svelte';
|
||||
import Heart from 'svelte-material-icons/Heart.svelte';
|
||||
import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
|
||||
import ImageThumbnail from './image-thumbnail.svelte';
|
||||
import VideoThumbnail from './video-thumbnail.svelte';
|
||||
@@ -112,7 +112,7 @@
|
||||
<!-- Favorite asset star -->
|
||||
{#if asset.isFavorite && !publicSharedKey}
|
||||
<div class="absolute bottom-2 left-2 z-10">
|
||||
<Star size="24" class="text-white" />
|
||||
<Heart size="24" class="text-white" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -2,12 +2,15 @@
|
||||
import { page } from '$app/stores';
|
||||
import { 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 ImageOutline from 'svelte-material-icons/ImageOutline.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 StarOutline from 'svelte-material-icons/StarOutline.svelte';
|
||||
import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
|
||||
import HeartMultiple from 'svelte-material-icons/HeartMultiple.svelte';
|
||||
import { AppRoute } from '../../../constants';
|
||||
import LoadingSpinner from '../loading-spinner.svelte';
|
||||
import StatusBox from '../status-box.svelte';
|
||||
@@ -71,6 +74,10 @@
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const isFavoritesSelected = $page.route.id === '/(user)/favorites';
|
||||
const isPhotosSelected = $page.route.id === '/(user)/photos';
|
||||
const isSharingSelected = $page.route.id === '/(user)/sharing';
|
||||
</script>
|
||||
|
||||
<SideBarSection>
|
||||
@@ -82,8 +89,8 @@
|
||||
>
|
||||
<SideBarButton
|
||||
title="Photos"
|
||||
logo={ImageOutline}
|
||||
isSelected={$page.route.id === '/(user)/photos'}
|
||||
logo={isPhotosSelected ? ImageMultiple : ImageMultipleOutline}
|
||||
isSelected={isPhotosSelected}
|
||||
>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getAssetCount()}
|
||||
@@ -115,8 +122,8 @@
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
|
||||
<SideBarButton
|
||||
title="Sharing"
|
||||
logo={AccountMultipleOutline}
|
||||
isSelected={$page.route.id === '/(user)/sharing'}
|
||||
logo={isSharingSelected ? AccountMultiple : AccountMultipleOutline}
|
||||
isSelected={isSharingSelected}
|
||||
>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getAlbumCount()}
|
||||
@@ -137,8 +144,8 @@
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
|
||||
<SideBarButton
|
||||
title="Favorites"
|
||||
logo={StarOutline}
|
||||
isSelected={$page.route.id == '/(user)/favorites'}
|
||||
logo={isFavoritesSelected ? HeartMultiple : HeartMultipleOutline}
|
||||
isSelected={isFavoritesSelected}
|
||||
>
|
||||
<svelte:fragment slot="moreInformation">
|
||||
{#await getFavoriteCount()}
|
||||
|
||||
Reference in New Issue
Block a user