chore(web/mobile): use Heart Icon & small icon changes (#2397)

This commit is contained in:
Steffen Auer
2023-05-08 21:01:39 +02:00
committed by GitHub
parent b5a4aef829
commit 861de7f8b3
12 changed files with 34 additions and 27 deletions

View File

@@ -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"
/>

View File

@@ -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}

View File

@@ -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()}