diff --git a/mobile/lib/modules/home/ui/daily_title_text.dart b/mobile/lib/modules/home/ui/daily_title_text.dart index add168c70a..bffe496b8c 100644 --- a/mobile/lib/modules/home/ui/daily_title_text.dart +++ b/mobile/lib/modules/home/ui/daily_title_text.dart @@ -24,6 +24,31 @@ class DailyTitleText extends ConsumerWidget { var selectedDateGroup = ref.watch(homePageStateProvider).selectedDateGroup; var selectedItems = ref.watch(homePageStateProvider).selectedItems; + void _handleTitleIconClick() { + if (isMultiSelectEnable && + selectedDateGroup.contains(dateText) && + selectedDateGroup.length == 1 && + selectedItems.length <= assetGroup.length) { + // Multi select is active - click again on the icon while it is the only active group -> disable multi select + ref.watch(homePageStateProvider.notifier).disableMultiSelect(); + } else if (isMultiSelectEnable && + selectedDateGroup.contains(dateText) && + selectedItems.length != assetGroup.length) { + // Multi select is active - click again on the icon while it is not the only active group -> remove that group from selected group/items + ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText); + ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup); + } else if (isMultiSelectEnable && selectedDateGroup.contains(dateText) && selectedDateGroup.length > 1) { + ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText); + ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup); + } else if (isMultiSelectEnable && !selectedDateGroup.contains(dateText)) { + ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText); + ref.watch(homePageStateProvider.notifier).addMultipleSelectedItems(assetGroup); + } else { + ref.watch(homePageStateProvider.notifier).enableMultiSelect(assetGroup.toSet()); + ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText); + } + } + return SliverToBoxAdapter( child: Padding( padding: const EdgeInsets.only(top: 29.0, bottom: 29.0, left: 12.0, right: 12.0), @@ -39,33 +64,16 @@ class DailyTitleText extends ConsumerWidget { ), const Spacer(), GestureDetector( - onTap: () { - if (isMultiSelectEnable && - selectedDateGroup.contains(dateText) && - selectedDateGroup.length == 1 && - selectedItems.length == assetGroup.length) { - ref.watch(homePageStateProvider.notifier).disableMultiSelect(); - } else if (isMultiSelectEnable && - selectedDateGroup.contains(dateText) && - selectedItems.length != assetGroup.length) { - ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText); - ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup); - } else if (isMultiSelectEnable && - selectedDateGroup.contains(dateText) && - selectedDateGroup.length > 1) { - ref.watch(homePageStateProvider.notifier).removeSelectedDateGroup(dateText); - ref.watch(homePageStateProvider.notifier).removeMultipleSelectedItem(assetGroup); - } else if (isMultiSelectEnable && !selectedDateGroup.contains(dateText)) { - ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText); - ref.watch(homePageStateProvider.notifier).addMultipleSelectedItems(assetGroup); - } else { - ref.watch(homePageStateProvider.notifier).enableMultiSelect(assetGroup.toSet()); - ref.watch(homePageStateProvider.notifier).addSelectedDateGroup(dateText); - } - }, + onTap: _handleTitleIconClick, child: isMultiSelectEnable && selectedDateGroup.contains(dateText) - ? const Icon(Icons.check_circle_rounded) - : const Icon(Icons.check_circle_outline_rounded), + ? Icon( + Icons.check_circle_rounded, + color: Theme.of(context).primaryColor, + ) + : const Icon( + Icons.check_circle_outline_rounded, + color: Colors.grey, + ), ) ], ), diff --git a/mobile/lib/modules/home/ui/edit_bottom_app_bar.dart b/mobile/lib/modules/home/ui/edit_bottom_app_bar.dart new file mode 100644 index 0000000000..e69de29bb2 diff --git a/mobile/lib/modules/home/ui/profile_drawer.dart b/mobile/lib/modules/home/ui/profile_drawer.dart index 1d92742a9b..a62f813272 100644 --- a/mobile/lib/modules/home/ui/profile_drawer.dart +++ b/mobile/lib/modules/home/ui/profile_drawer.dart @@ -57,8 +57,8 @@ class ProfileDrawer extends ConsumerWidget { bool res = await ref.read(authenticationProvider.notifier).logout(); if (res) { + ref.watch(assetProvider.notifier).clearAllAsset(); AutoRouter.of(context).popUntilRoot(); - ref.read(assetProvider.notifier).clearAllAsset(); } }, ) diff --git a/mobile/lib/modules/home/ui/thumbnail_image.dart b/mobile/lib/modules/home/ui/thumbnail_image.dart index 6d35749933..ae8208186c 100644 --- a/mobile/lib/modules/home/ui/thumbnail_image.dart +++ b/mobile/lib/modules/home/ui/thumbnail_image.dart @@ -49,6 +49,7 @@ class ThumbnailImage extends HookConsumerWidget { } else if (isMultiSelectEnable && !selectedAsset.contains(asset)) { ref.watch(homePageStateProvider.notifier).addSingleSelectedItem(asset); } else { + print(asset.id); if (asset.type == 'IMAGE') { AutoRouter.of(context).push( ImageViewerRoute( diff --git a/mobile/lib/modules/home/views/home_page.dart b/mobile/lib/modules/home/views/home_page.dart index f302eeb36c..4c954fb9ba 100644 --- a/mobile/lib/modules/home/views/home_page.dart +++ b/mobile/lib/modules/home/views/home_page.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; +import 'package:immich_mobile/modules/home/providers/home_page_state.provider.dart'; import 'package:immich_mobile/modules/home/ui/daily_title_text.dart'; import 'package:immich_mobile/modules/home/ui/draggable_scrollbar.dart'; import 'package:immich_mobile/modules/home/ui/image_grid.dart'; @@ -9,6 +10,7 @@ import 'package:immich_mobile/modules/home/ui/monthly_title_text.dart'; import 'package:immich_mobile/modules/home/ui/profile_drawer.dart'; import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart'; import 'package:immich_mobile/modules/home/providers/asset.provider.dart'; +import 'package:sliver_tools/sliver_tools.dart'; class HomePage extends HookConsumerWidget { const HomePage({Key? key}) : super(key: key); @@ -18,6 +20,8 @@ class HomePage extends HookConsumerWidget { ScrollController _scrollController = useScrollController(); List _assetGroup = ref.watch(assetProvider); List _imageGridGroup = []; + var isMultiSelectEnable = ref.watch(homePageStateProvider).isMultiSelectEnable; + var homePageState = ref.watch(homePageStateProvider); _scrollControllerCallback() { var endOfPage = _scrollController.position.maxScrollExtent; @@ -85,20 +89,65 @@ class HomePage extends HookConsumerWidget { } return SafeArea( - child: DraggableScrollbar.semicircle( - backgroundColor: Theme.of(context).primaryColor, - controller: _scrollController, - heightScrollThumb: 48.0, - child: CustomScrollView( - controller: _scrollController, - slivers: [ - ImmichSliverAppBar( - imageGridGroup: _imageGridGroup, - onPopBack: onPopBackFromBackupPage, + child: Stack( + children: [ + DraggableScrollbar.semicircle( + backgroundColor: Theme.of(context).primaryColor, + controller: _scrollController, + heightScrollThumb: 48.0, + child: CustomScrollView( + controller: _scrollController, + slivers: [ + SliverAnimatedSwitcher( + child: isMultiSelectEnable + ? const SliverToBoxAdapter( + child: SizedBox( + height: 70, + child: null, + )) + : ImmichSliverAppBar( + imageGridGroup: _imageGridGroup, + onPopBack: onPopBackFromBackupPage, + ), + duration: const Duration(milliseconds: 250), + ), + ..._imageGridGroup + ], ), - ..._imageGridGroup, - ], - ), + ), + isMultiSelectEnable + ? Positioned( + top: 0, + left: 0, + child: Padding( + padding: const EdgeInsets.only(left: 8.0, top: 16), + child: Material( + elevation: 20, + borderRadius: BorderRadius.circular(35), + child: Container( + // width: 100, + // height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(35), + color: Colors.white, + ), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 2.0), + child: TextButton.icon( + onPressed: () { + ref.watch(homePageStateProvider.notifier).disableMultiSelect(); + }, + icon: const Icon(Icons.close_rounded), + label: Text( + homePageState.selectedItems.length.toString(), + style: const TextStyle(fontWeight: FontWeight.w600, fontSize: 16), + )), + ), + ), + ), + )) + : Container(), + ], ), ); } diff --git a/mobile/pubspec.lock b/mobile/pubspec.lock index dad4be5230..b566ebb8e1 100644 --- a/mobile/pubspec.lock +++ b/mobile/pubspec.lock @@ -721,6 +721,13 @@ packages: description: flutter source: sdk version: "0.0.99" + sliver_tools: + dependency: "direct main" + description: + name: sliver_tools + url: "https://pub.dartlang.org" + source: hosted + version: "0.2.5" source_gen: dependency: transitive description: diff --git a/mobile/pubspec.yaml b/mobile/pubspec.yaml index abf1410ac6..e92b81f4bd 100644 --- a/mobile/pubspec.yaml +++ b/mobile/pubspec.yaml @@ -30,6 +30,7 @@ dependencies: fluttertoast: ^8.0.8 video_player: ^2.2.18 chewie: ^1.2.2 + sliver_tools: ^0.2.5 dev_dependencies: flutter_test: