From 11152f9b3db5ee8c6fb53b09aefe05df1ca22234 Mon Sep 17 00:00:00 2001 From: Conner Hnatiuk <46903591+ConnerWithAnE@users.noreply.github.com> Date: Sun, 26 May 2024 18:13:32 -0600 Subject: [PATCH] fix(mobile): appBar on album viewer screen animates out and doesnt alter asset grid position (#9741) * Animated out top bar added, currenlty need to move up current app bar as it is too far down * album viewer appBar animates out and does not cause screen shift * Formatting --------- Co-authored-by: Alex --- .../lib/pages/common/album_viewer.page.dart | 42 ++++--- .../album/album_viewer_editable_title.dart | 104 +++++++++--------- .../asset_grid/immich_asset_grid_view.dart | 6 +- 3 files changed, 84 insertions(+), 68 deletions(-) diff --git a/mobile/lib/pages/common/album_viewer.page.dart b/mobile/lib/pages/common/album_viewer.page.dart index a7cb8c218a..e1e0419d52 100644 --- a/mobile/lib/pages/common/album_viewer.page.dart +++ b/mobile/lib/pages/common/album_viewer.page.dart @@ -133,7 +133,7 @@ class AlbumViewerPage extends HookConsumerWidget { Widget buildTitle(Album album) { return Padding( - padding: const EdgeInsets.only(left: 8, right: 8, top: 24), + padding: const EdgeInsets.only(left: 8, right: 8), child: userId == album.ownerId && album.isRemote ? AlbumViewerEditableTitle( album: album, @@ -228,9 +228,30 @@ class AlbumViewerPage extends HookConsumerWidget { } return Scaffold( - appBar: ref.watch(multiselectProvider) - ? null - : album.when( + body: Stack( + children: [ + album.widgetWhen( + onData: (data) => MultiselectGrid( + renderListProvider: albumRenderlistProvider(albumId), + topWidget: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + buildHeader(data), + if (data.isRemote) buildControlButton(data), + ], + ), + onRemoveFromAlbum: onRemoveFromAlbumPressed, + editEnabled: data.ownerId == userId, + ), + ), + AnimatedPositioned( + duration: const Duration(milliseconds: 300), + top: ref.watch(multiselectProvider) + ? -(kToolbarHeight + MediaQuery.of(context).padding.top) + : 0, + left: 0, + right: 0, + child: album.when( data: (data) => AlbumViewerAppbar( titleFocusNode: titleFocusNode, album: data, @@ -242,19 +263,8 @@ class AlbumViewerPage extends HookConsumerWidget { error: (error, stackTrace) => AppBar(title: const Text("Error")), loading: () => AppBar(), ), - body: album.widgetWhen( - onData: (data) => MultiselectGrid( - renderListProvider: albumRenderlistProvider(albumId), - topWidget: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - buildHeader(data), - if (data.isRemote) buildControlButton(data), - ], ), - onRemoveFromAlbum: onRemoveFromAlbumPressed, - editEnabled: data.ownerId == userId, - ), + ], ), ); } diff --git a/mobile/lib/widgets/album/album_viewer_editable_title.dart b/mobile/lib/widgets/album/album_viewer_editable_title.dart index 5114d7ba7f..788c61d8a4 100644 --- a/mobile/lib/widgets/album/album_viewer_editable_title.dart +++ b/mobile/lib/widgets/album/album_viewer_editable_title.dart @@ -36,58 +36,62 @@ class AlbumViewerEditableTitle extends HookConsumerWidget { [], ); - return TextField( - onChanged: (value) { - if (value.isEmpty) { - } else { - ref.watch(albumViewerProvider.notifier).setEditTitleText(value); - } - }, - focusNode: titleFocusNode, - style: context.textTheme.headlineMedium, - controller: titleTextEditController, - onTap: () { - FocusScope.of(context).requestFocus(titleFocusNode); + return Material( + color: Colors.transparent, + child: TextField( + onChanged: (value) { + if (value.isEmpty) { + } else { + ref.watch(albumViewerProvider.notifier).setEditTitleText(value); + } + }, + focusNode: titleFocusNode, + style: context.textTheme.headlineMedium, + controller: titleTextEditController, + onTap: () { + FocusScope.of(context).requestFocus(titleFocusNode); - ref.watch(albumViewerProvider.notifier).setEditTitleText(album.name); - ref.watch(albumViewerProvider.notifier).enableEditAlbum(); + ref.watch(albumViewerProvider.notifier).setEditTitleText(album.name); + ref.watch(albumViewerProvider.notifier).enableEditAlbum(); - if (titleTextEditController.text == 'Untitled') { - titleTextEditController.clear(); - } - }, - decoration: InputDecoration( - contentPadding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8), - suffixIcon: titleFocusNode.hasFocus - ? IconButton( - onPressed: () { - titleTextEditController.clear(); - }, - icon: Icon( - Icons.cancel_rounded, - color: context.primaryColor, - ), - splashRadius: 10, - ) - : null, - enabledBorder: OutlineInputBorder( - borderSide: const BorderSide(color: Colors.transparent), - borderRadius: BorderRadius.circular(10), - ), - focusedBorder: OutlineInputBorder( - borderSide: const BorderSide(color: Colors.transparent), - borderRadius: BorderRadius.circular(10), - ), - focusColor: Colors.grey[300], - fillColor: context.isDarkTheme - ? const Color.fromARGB(255, 32, 33, 35) - : Colors.grey[200], - filled: titleFocusNode.hasFocus, - hintText: 'share_add_title'.tr(), - hintStyle: TextStyle( - fontSize: 28, - color: context.isDarkTheme ? Colors.grey[300] : Colors.grey[700], - fontWeight: FontWeight.bold, + if (titleTextEditController.text == 'Untitled') { + titleTextEditController.clear(); + } + }, + decoration: InputDecoration( + contentPadding: + const EdgeInsets.symmetric(horizontal: 8, vertical: 8), + suffixIcon: titleFocusNode.hasFocus + ? IconButton( + onPressed: () { + titleTextEditController.clear(); + }, + icon: Icon( + Icons.cancel_rounded, + color: context.primaryColor, + ), + splashRadius: 10, + ) + : null, + enabledBorder: OutlineInputBorder( + borderSide: const BorderSide(color: Colors.transparent), + borderRadius: BorderRadius.circular(10), + ), + focusedBorder: OutlineInputBorder( + borderSide: const BorderSide(color: Colors.transparent), + borderRadius: BorderRadius.circular(10), + ), + focusColor: Colors.grey[300], + fillColor: context.isDarkTheme + ? const Color.fromARGB(255, 32, 33, 35) + : Colors.grey[200], + filled: titleFocusNode.hasFocus, + hintText: 'share_add_title'.tr(), + hintStyle: TextStyle( + fontSize: 28, + color: context.isDarkTheme ? Colors.grey[300] : Colors.grey[700], + fontWeight: FontWeight.bold, + ), ), ), ); diff --git a/mobile/lib/widgets/asset_grid/immich_asset_grid_view.dart b/mobile/lib/widgets/asset_grid/immich_asset_grid_view.dart index 40c6c52914..61104d282d 100644 --- a/mobile/lib/widgets/asset_grid/immich_asset_grid_view.dart +++ b/mobile/lib/widgets/asset_grid/immich_asset_grid_view.dart @@ -238,8 +238,10 @@ class ImmichAssetGridViewState extends ConsumerState { } bool appBarOffset() { - return ref.watch(tabProvider).index == 0 && - ModalRoute.of(context)?.settings.name == TabControllerRoute.name; + return (ref.watch(tabProvider).index == 0 && + ModalRoute.of(context)?.settings.name == + TabControllerRoute.name) || + (ModalRoute.of(context)?.settings.name == AlbumViewerRoute.name); } final listWidget = ScrollablePositionedList.builder(