mirror of
https://github.com/KevinMidboe/immich.git
synced 2025-10-29 17:40:28 +00:00
feat(mobile): Library page rework (album sorting, favorites) (#1501)
* Add album sorting * Change AppBar to match photos page behaviour * Add buttons * First crude implementation of the favorites page * Clean up * Add favorite button * i18n * Add star indicator to thumbnail * Add favorite logic to separate provider and fix favorite behavior in album * Review feedback (Add isFavorite variable) * dev: style buttons * dev: styled drop down button --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Matthias Rupp
GitHub
@@ -1,4 +1,5 @@
|
||||
import 'package:auto_route/auto_route.dart';
|
||||
import 'package:collection/collection.dart';
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
@@ -6,6 +7,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:immich_mobile/modules/album/providers/album.provider.dart';
|
||||
import 'package:immich_mobile/modules/album/ui/album_thumbnail_card.dart';
|
||||
import 'package:immich_mobile/routing/router.dart';
|
||||
import 'package:openapi/api.dart';
|
||||
|
||||
class LibraryPage extends HookConsumerWidget {
|
||||
const LibraryPage({Key? key}) : super(key: key);
|
||||
@@ -22,14 +24,11 @@ class LibraryPage extends HookConsumerWidget {
|
||||
[],
|
||||
);
|
||||
|
||||
Widget buildAppBar() {
|
||||
return const SliverAppBar(
|
||||
AppBar buildAppBar() {
|
||||
return AppBar(
|
||||
centerTitle: true,
|
||||
floating: true,
|
||||
pinned: false,
|
||||
snap: false,
|
||||
automaticallyImplyLeading: false,
|
||||
title: Text(
|
||||
title: const Text(
|
||||
'IMMICH',
|
||||
style: TextStyle(
|
||||
fontFamily: 'SnowburstOne',
|
||||
@@ -40,6 +39,74 @@ class LibraryPage extends HookConsumerWidget {
|
||||
);
|
||||
}
|
||||
|
||||
final selectedAlbumSortOrder = useState(0);
|
||||
|
||||
List<AlbumResponseDto> sortedAlbums() {
|
||||
if (selectedAlbumSortOrder.value == 0) {
|
||||
return albums.sortedBy((album) => album.createdAt).reversed.toList();
|
||||
}
|
||||
return albums.sortedBy((album) => album.albumName);
|
||||
}
|
||||
|
||||
Widget buildSortButton() {
|
||||
final options = [
|
||||
"library_page_sort_created".tr(),
|
||||
"library_page_sort_title".tr()
|
||||
];
|
||||
|
||||
return PopupMenuButton(
|
||||
position: PopupMenuPosition.over,
|
||||
itemBuilder: (BuildContext context) {
|
||||
return options.mapIndexed<PopupMenuEntry<int>>((index, option) {
|
||||
final selected = selectedAlbumSortOrder.value == index;
|
||||
return PopupMenuItem(
|
||||
value: index,
|
||||
child: Row(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 12.0),
|
||||
child: Icon(
|
||||
Icons.check,
|
||||
color: selected
|
||||
? Theme.of(context).primaryColor
|
||||
: Colors.transparent,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
option,
|
||||
style: TextStyle(
|
||||
color: selected ? Theme.of(context).primaryColor : null,
|
||||
fontSize: 12.0,
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}).toList();
|
||||
},
|
||||
onSelected: (int value) {
|
||||
selectedAlbumSortOrder.value = value;
|
||||
},
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.swap_vert_rounded,
|
||||
size: 18,
|
||||
color: Theme.of(context).primaryColor,
|
||||
),
|
||||
Text(
|
||||
options[selectedAlbumSortOrder.value],
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Theme.of(context).primaryColor,
|
||||
fontSize: 12.0,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildCreateAlbumButton() {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
@@ -80,17 +147,90 @@ class LibraryPage extends HookConsumerWidget {
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildLibraryNavButton(
|
||||
String label,
|
||||
IconData icon,
|
||||
Function() onClick,
|
||||
) {
|
||||
return Expanded(
|
||||
child: OutlinedButton.icon(
|
||||
onPressed: onClick,
|
||||
label: Padding(
|
||||
padding: const EdgeInsets.only(left: 8.0),
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 12.0,
|
||||
color: Theme.of(context).brightness == Brightness.dark
|
||||
? Colors.white
|
||||
: Colors.black,
|
||||
),
|
||||
),
|
||||
),
|
||||
style: OutlinedButton.styleFrom(
|
||||
padding: const EdgeInsets.all(12),
|
||||
side: BorderSide(
|
||||
color: Theme.of(context).brightness == Brightness.dark
|
||||
? Colors.grey[600]!
|
||||
: Colors.grey[300]!,
|
||||
),
|
||||
alignment: Alignment.centerLeft,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(6.0),
|
||||
),
|
||||
),
|
||||
icon: Icon(icon, color: Theme.of(context).primaryColor),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Scaffold(
|
||||
appBar: buildAppBar(),
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
buildAppBar(),
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: const Text(
|
||||
'library_page_albums',
|
||||
style: TextStyle(fontWeight: FontWeight.bold),
|
||||
).tr(),
|
||||
padding: const EdgeInsets.only(
|
||||
left: 12.0,
|
||||
right: 12.0,
|
||||
top: 24.0,
|
||||
bottom: 12.0,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
buildLibraryNavButton(
|
||||
"library_page_favorites".tr(), Icons.star_border, () {
|
||||
AutoRouter.of(context).navigate(const FavoritesRoute());
|
||||
}),
|
||||
const SizedBox(width: 12.0),
|
||||
buildLibraryNavButton(
|
||||
"library_page_sharing".tr(), Icons.group_outlined, () {
|
||||
AutoRouter.of(context).navigate(const SharingRoute());
|
||||
}),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 12.0,
|
||||
left: 12.0,
|
||||
right: 12.0,
|
||||
bottom: 20.0,
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
const Text(
|
||||
'library_page_albums',
|
||||
style: TextStyle(fontWeight: FontWeight.bold),
|
||||
).tr(),
|
||||
buildSortButton(),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
SliverPadding(
|
||||
@@ -100,7 +240,7 @@ class LibraryPage extends HookConsumerWidget {
|
||||
spacing: 12,
|
||||
children: [
|
||||
buildCreateAlbumButton(),
|
||||
for (var album in albums)
|
||||
for (var album in sortedAlbums())
|
||||
AlbumThumbnailCard(
|
||||
album: album,
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user