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

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

Browse Source
This commit is contained in:
Steffen Auer 2023-05-08 21:01:39 +02:00 committed by GitHub
parent b5a4aef829
commit 861de7f8b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mobile/lib/modules/album/ui/album_viewer_thumbnail.dart
View File

@ -98,7 +98,7 @@ class AlbumViewerThumbnail extends HookConsumerWidget {
left: 10, left: 10,
bottom: 5, bottom: 5,
child: Icon( child: Icon(
Icons.star, Icons.favorite,
color: Colors.white, color: Colors.white,
size: 18, size: 18,
), ),

2
mobile/lib/modules/album/views/library_page.dart
View File

@ -221,7 +221,7 @@ class LibraryPage extends HookConsumerWidget {
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [ children: [
buildLibraryNavButton( buildLibraryNavButton(
"library_page_favorites".tr(), Icons.star_border, () { "library_page_favorites".tr(), Icons.favorite_border, () {
AutoRouter.of(context).navigate(const FavoritesRoute()); AutoRouter.of(context).navigate(const FavoritesRoute());
}), }),
const SizedBox(width: 12.0), const SizedBox(width: 12.0),

2
mobile/lib/modules/asset_viewer/ui/top_control_app_bar.dart
View File

@ -35,7 +35,7 @@ class TopControlAppBar extends HookConsumerWidget {
onFavorite(); onFavorite();
}, },
icon: Icon( icon: Icon(
isFavorite ? Icons.star : Icons.star_border, isFavorite ? Icons.favorite : Icons.favorite_border,
color: Colors.grey[200], color: Colors.grey[200],
), ),
); );

2
mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
View File

@ -135,7 +135,7 @@ class ThumbnailImage extends HookConsumerWidget {
left: 10, left: 10,
bottom: 5, bottom: 5,
child: Icon( child: Icon(
Icons.star, Icons.favorite,
color: Colors.white, color: Colors.white,
size: 18, size: 18,
), ),

2
mobile/lib/modules/home/ui/control_bottom_app_bar.dart
View File

@ -44,7 +44,7 @@ class ControlBottomAppBar extends ConsumerWidget {
}, },
), ),
ControlBoxButton( ControlBoxButton(
iconData: Icons.star_rounded, iconData: Icons.favorite_border_rounded,
label: "control_bottom_app_bar_favorite".tr(), label: "control_bottom_app_bar_favorite".tr(),
onPressed: () { onPressed: () {
onFavorite(); onFavorite();

2
mobile/lib/modules/search/views/search_page.dart
View File

@ -200,7 +200,7 @@ class SearchPage extends HookConsumerWidget {
), ),
ListTile( ListTile(
leading: Icon( leading: Icon(
Icons.star_outline, Icons.favorite_border,
color: categoryIconColor, color: categoryIconColor,
), ),
title: title:

8
mobile/lib/shared/views/tab_controller_page.dart
View File

@ -40,8 +40,8 @@ class TabControllerPage extends ConsumerWidget {
right: 4, right: 4,
bottom: 4, bottom: 4,
), ),
icon: const Icon(Icons.photo_outlined), icon: const Icon(Icons.photo_library_outlined),
selectedIcon: const Icon(Icons.photo), selectedIcon: const Icon(Icons.photo_library),
label: const Text('tab_controller_nav_photos').tr(), label: const Text('tab_controller_nav_photos').tr(),
), ),
NavigationRailDestination( NavigationRailDestination(
@ -81,10 +81,10 @@ class TabControllerPage extends ConsumerWidget {
NavigationDestination( NavigationDestination(
label: 'tab_controller_nav_photos'.tr(), label: 'tab_controller_nav_photos'.tr(),
icon: const Icon( icon: const Icon(
Icons.photo_outlined, Icons.photo_library_outlined,
), ),
selectedIcon: Icon( selectedIcon: Icon(
Icons.photo, Icons.photo_library,
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
), ),
), ),

6
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
View File

@ -10,8 +10,8 @@
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte'; import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte'; import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte'; import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import Star from 'svelte-material-icons/Star.svelte'; import Heart from 'svelte-material-icons/Heart.svelte';
import StarOutline from 'svelte-material-icons/StarOutline.svelte'; import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
import ContentCopy from 'svelte-material-icons/ContentCopy.svelte'; import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte'; import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte'; import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
@ -100,7 +100,7 @@
/> />
{#if isOwner} {#if isOwner}
<CircleIconButton <CircleIconButton
logo={asset.isFavorite ? Star : StarOutline} logo={asset.isFavorite ? Heart : HeartOutline}
on:click={() => dispatch('favorite')} on:click={() => dispatch('favorite')}
title="Favorite" title="Favorite"
/> />

4
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View File

@ -6,7 +6,7 @@
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte'; import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte'; import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.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 ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
import ImageThumbnail from './image-thumbnail.svelte'; import ImageThumbnail from './image-thumbnail.svelte';
import VideoThumbnail from './video-thumbnail.svelte'; import VideoThumbnail from './video-thumbnail.svelte';
@ -112,7 +112,7 @@
<!-- Favorite asset star --> <!-- Favorite asset star -->
{#if asset.isFavorite && !publicSharedKey} {#if asset.isFavorite && !publicSharedKey}
<div class="absolute bottom-2 left-2 z-10"> <div class="absolute bottom-2 left-2 z-10">
<Star size="24" class="text-white" /> <Heart size="24" class="text-white" />
</div> </div>
{/if} {/if}

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

@ -2,12 +2,15 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import { api } from '@api'; import { api } from '@api';
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte'; 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 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 ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
import Magnify from 'svelte-material-icons/Magnify.svelte'; import Magnify from 'svelte-material-icons/Magnify.svelte';
import Map from 'svelte-material-icons/Map.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 { AppRoute } from '../../../constants';
import LoadingSpinner from '../loading-spinner.svelte'; import LoadingSpinner from '../loading-spinner.svelte';
import StatusBox from '../status-box.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> </script>
<SideBarSection> <SideBarSection>
@ -82,8 +89,8 @@
> >
<SideBarButton <SideBarButton
title="Photos" title="Photos"
logo={ImageOutline} logo={isPhotosSelected ? ImageMultiple : ImageMultipleOutline}
isSelected={$page.route.id === '/(user)/photos'} isSelected={isPhotosSelected}
> >
<svelte:fragment slot="moreInformation"> <svelte:fragment slot="moreInformation">
{#await getAssetCount()} {#await getAssetCount()}
@ -115,8 +122,8 @@
<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false"> <a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
<SideBarButton <SideBarButton
title="Sharing" title="Sharing"
logo={AccountMultipleOutline} logo={isSharingSelected ? AccountMultiple : AccountMultipleOutline}
isSelected={$page.route.id === '/(user)/sharing'} isSelected={isSharingSelected}
> >
<svelte:fragment slot="moreInformation"> <svelte:fragment slot="moreInformation">
{#await getAlbumCount()} {#await getAlbumCount()}
@ -137,8 +144,8 @@
<a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false"> <a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
<SideBarButton <SideBarButton
title="Favorites" title="Favorites"
logo={StarOutline} logo={isFavoritesSelected ? HeartMultiple : HeartMultipleOutline}
isSelected={$page.route.id == '/(user)/favorites'} isSelected={isFavoritesSelected}
> >
<svelte:fragment slot="moreInformation"> <svelte:fragment slot="moreInformation">
{#await getFavoriteCount()} {#await getFavoriteCount()}

4
web/src/routes/(user)/explore/+page.svelte
View File

@ -6,7 +6,7 @@
import ClockOutline from 'svelte-material-icons/ClockOutline.svelte'; import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte'; import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte'; import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
import StarOutline from 'svelte-material-icons/StarOutline.svelte'; import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
import type { PageData } from './$types'; import type { PageData } from './$types';
export let data: PageData; export let data: PageData;
@ -101,7 +101,7 @@
class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2" class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
draggable="false" draggable="false"
> >
<StarOutline size={24} /> <HeartMultipleOutline size={24} />
<span>Favorites</span> <span>Favorites</span>
</a> </a>
<a <a

4
web/src/routes/(user)/favorites/+page.svelte
View File

@ -8,7 +8,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Close from 'svelte-material-icons/Close.svelte'; import Close from 'svelte-material-icons/Close.svelte';
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte'; import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import StarMinusOutline from 'svelte-material-icons/StarMinusOutline.svelte'; import HeartMinusOutline from 'svelte-material-icons/HeartMinusOutline.svelte';
import Error from '../../+error.svelte'; import Error from '../../+error.svelte';
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte'; import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte'; import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
@ -80,7 +80,7 @@
/> />
<CircleIconButton <CircleIconButton
title="Remove Favorite" title="Remove Favorite"
logo={StarMinusOutline} logo={HeartMinusOutline}
on:click={handleRemoveFavorite} on:click={handleRemoveFavorite}
/> />
</svelte:fragment> </svelte:fragment>