From a0d03925e09d479dc9d405f1793e2bd9bae3c582 Mon Sep 17 00:00:00 2001 From: Conner Hnatiuk <46903591+ConnerWithAnE@users.noreply.github.com> Date: Thu, 25 Apr 2024 08:36:35 -0600 Subject: [PATCH] fix(mobile): appBar on home screen animates out and doesnt alter asset grid position (#9026) --- .../disable_multi_select_button.dart | 2 +- .../ui/asset_grid/immich_asset_grid_view.dart | 21 ++++++++- mobile/lib/modules/home/views/home_page.dart | 46 +++++++++++++------ 3 files changed, 51 insertions(+), 18 deletions(-) diff --git a/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart b/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart index 3c97f54cfc..9d26745b16 100644 --- a/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart +++ b/mobile/lib/modules/home/ui/asset_grid/disable_multi_select_button.dart @@ -17,7 +17,7 @@ class DisableMultiSelectButton extends ConsumerWidget { return Align( alignment: Alignment.topLeft, child: Padding( - padding: const EdgeInsets.only(left: 16.0, top: 16.0), + padding: const EdgeInsets.only(left: 16.0, top: 8.0), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 4.0), child: ElevatedButton.icon( diff --git a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart index 2ab9db56be..9392a244bf 100644 --- a/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart +++ b/mobile/lib/modules/home/ui/asset_grid/immich_asset_grid_view.dart @@ -16,9 +16,11 @@ import 'package:immich_mobile/modules/home/ui/asset_grid/thumbnail_placeholder.d import 'package:immich_mobile/shared/ui/immich_toast.dart'; import 'package:fluttertoast/fluttertoast.dart'; import 'package:immich_mobile/modules/home/ui/control_bottom_app_bar.dart'; +import 'package:immich_mobile/routing/router.dart'; import 'package:immich_mobile/shared/models/asset.dart'; import 'package:immich_mobile/modules/asset_viewer/providers/scroll_to_date_notifier.provider.dart'; import 'package:immich_mobile/shared/providers/haptic_feedback.provider.dart'; +import 'package:immich_mobile/shared/providers/tab.provider.dart'; import 'package:scrollable_positioned_list/scrollable_positioned_list.dart'; import 'asset_grid_data_structure.dart'; @@ -235,8 +237,14 @@ class ImmichAssetGridViewState extends ConsumerState<ImmichAssetGridView> { } } + bool appBarOffset() { + return ref.watch(tabProvider).index == 0 && + ModalRoute.of(context)?.settings.name == TabControllerRoute.name; + } + final listWidget = ScrollablePositionedList.builder( - padding: const EdgeInsets.only( + padding: EdgeInsets.only( + top: appBarOffset() ? 60 : 0, bottom: 220, ), itemBuilder: _itemBuilder, @@ -256,6 +264,9 @@ class ImmichAssetGridViewState extends ConsumerState<ImmichAssetGridView> { controller: _itemScrollController, backgroundColor: context.themeData.hintColor, labelTextBuilder: _labelBuilder, + padding: appBarOffset() + ? const EdgeInsets.only(top: 60) + : const EdgeInsets.only(), labelConstraints: const BoxConstraints(maxHeight: 28), scrollbarAnimationDuration: const Duration(milliseconds: 300), scrollbarTimeToFade: const Duration(milliseconds: 1000), @@ -264,7 +275,13 @@ class ImmichAssetGridViewState extends ConsumerState<ImmichAssetGridView> { : listWidget; return widget.onRefresh == null ? child - : RefreshIndicator(onRefresh: widget.onRefresh!, child: child); + : appBarOffset() + ? RefreshIndicator( + onRefresh: widget.onRefresh!, + edgeOffset: 30, + child: child, + ) + : RefreshIndicator(onRefresh: widget.onRefresh!, child: child); } void _scrollToDate() { diff --git a/mobile/lib/modules/home/views/home_page.dart b/mobile/lib/modules/home/views/home_page.dart index 86788b8296..687355c000 100644 --- a/mobile/lib/modules/home/views/home_page.dart +++ b/mobile/lib/modules/home/views/home_page.dart @@ -98,21 +98,37 @@ class HomePage extends HookConsumerWidget { } } - return Scaffold( - appBar: ref.watch(multiselectProvider) ? null : const ImmichAppBar(), - body: MultiselectGrid( - topWidget: (currentUser != null && currentUser.memoryEnabled) - ? const MemoryLane() - : const SizedBox(), - renderListProvider: timelineUsers.length > 1 - ? multiUserAssetsProvider(timelineUsers) - : assetsProvider(currentUser?.isarId), - buildLoadingIndicator: buildLoadingIndicator, - onRefresh: refreshAssets, - stackEnabled: true, - archiveEnabled: true, - editEnabled: true, - ), + return Stack( + children: [ + MultiselectGrid( + topWidget: (currentUser != null && currentUser.memoryEnabled) + ? const MemoryLane() + : const SizedBox(), + renderListProvider: timelineUsers.length > 1 + ? multiUserAssetsProvider(timelineUsers) + : assetsProvider(currentUser?.isarId), + buildLoadingIndicator: buildLoadingIndicator, + onRefresh: refreshAssets, + stackEnabled: true, + archiveEnabled: true, + editEnabled: true, + ), + AnimatedPositioned( + duration: const Duration(milliseconds: 300), + top: ref.watch(multiselectProvider) + ? -(kToolbarHeight + MediaQuery.of(context).padding.top) + : 0, + left: 0, + right: 0, + child: Container( + height: kToolbarHeight + MediaQuery.of(context).padding.top, + color: context.themeData.appBarTheme.backgroundColor, + child: const SafeArea( + child: ImmichAppBar(), + ), + ), + ), + ], ); } }