beenull/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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,
bottom: 5,
child: Icon(
Icons.star,
Icons.favorite,
color: Colors.white,
size: 18,
),

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

@ -221,7 +221,7 @@ class LibraryPage extends HookConsumerWidget {
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
buildLibraryNavButton(
"library_page_favorites".tr(), Icons.star_border, () {
"library_page_favorites".tr(), Icons.favorite_border, () {
AutoRouter.of(context).navigate(const FavoritesRoute());
}),
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();
},
icon: Icon(
isFavorite ? Icons.star : Icons.star_border,
isFavorite ? Icons.favorite : Icons.favorite_border,
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,
bottom: 5,
child: Icon(
Icons.star,
Icons.favorite,
color: Colors.white,
size: 18,
),

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

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

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

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

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

@ -40,8 +40,8 @@ class TabControllerPage extends ConsumerWidget {
right: 4,
bottom: 4,
),
icon: const Icon(Icons.photo_outlined),
selectedIcon: const Icon(Icons.photo),
icon: const Icon(Icons.photo_library_outlined),
selectedIcon: const Icon(Icons.photo_library),
label: const Text('tab_controller_nav_photos').tr(),
),
NavigationRailDestination(
@ -81,10 +81,10 @@ class TabControllerPage extends ConsumerWidget {
NavigationDestination(
label: 'tab_controller_nav_photos'.tr(),
icon: const Icon(
Icons.photo_outlined,
Icons.photo_library_outlined,
),
selectedIcon: Icon(
Icons.photo,
Icons.photo_library,
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 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"
/>

4
web/src/lib/components/assets/thumbnail/thumbnail.svelte
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}

23
web/src/lib/components/shared-components/side-bar/side-bar.svelte
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()}

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

@ -6,7 +6,7 @@
import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.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';
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"
draggable="false"
>
<StarOutline size={24} />
<HeartMultipleOutline size={24} />
<span>Favorites</span>
</a>
<a

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

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