c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-04-17 21:46:25 +02:00
Code Releases Activity

feat(mobile): Use NavigationRail when the screen is in landscape mode ()

Browse source
This commit is contained in:
Damiano Ferrari 2025-02-03 20:49:55 +01:00 • committed by GitHub
parent e8d05e78ad
commit ef245ea2d2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 90 additions and 58 deletions

148
mobile/lib/pages/common/tab_controller.page.dart
View file

@ -20,6 +20,8 @@ class TabControllerPage extends HookConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final isRefreshingAssets = ref.watch(assetProvider); final isRefreshingAssets = ref.watch(assetProvider);
final isRefreshingRemoteAlbums = ref.watch(isRefreshingRemoteAlbumProvider); final isRefreshingRemoteAlbums = ref.watch(isRefreshingRemoteAlbumProvider);
final isScreenLandscape =
MediaQuery.orientationOf(context) == Orientation.landscape;
Widget buildIcon({required Widget icon, required bool isProcessing}) { Widget buildIcon({required Widget icon, required bool isProcessing}) {
if (!isProcessing) return icon; if (!isProcessing) return icon;
@ -45,7 +47,7 @@ class TabControllerPage extends HookConsumerWidget {
); );
} }
onNavigationSelected(TabsRouter router, int index) { void onNavigationSelected(TabsRouter router, int index) {
// On Photos page menu tapped // On Photos page menu tapped
if (router.activeIndex == 0 && index == 0) { if (router.activeIndex == 0 && index == 0) {
scrollToTopNotifierProvider.scrollToTop(); scrollToTopNotifierProvider.scrollToTop();
@ -61,62 +63,82 @@ class TabControllerPage extends HookConsumerWidget {
ref.read(tabProvider.notifier).state = TabEnum.values[index]; ref.read(tabProvider.notifier).state = TabEnum.values[index];
} }
bottomNavigationBar(TabsRouter tabsRouter) { final navigationDestinations = [
NavigationDestination(
label: 'tab_controller_nav_photos'.tr(),
icon: const Icon(
Icons.photo_library_outlined,
),
selectedIcon: buildIcon(
isProcessing: isRefreshingAssets,
icon: Icon(
Icons.photo_library,
color: context.primaryColor,
),
),
),
NavigationDestination(
label: 'tab_controller_nav_search'.tr(),
icon: const Icon(
Icons.search_rounded,
),
selectedIcon: Icon(
Icons.search,
color: context.primaryColor,
),
),
NavigationDestination(
label: 'albums'.tr(),
icon: const Icon(
Icons.photo_album_outlined,
),
selectedIcon: buildIcon(
isProcessing: isRefreshingRemoteAlbums,
icon: Icon(
Icons.photo_album_rounded,
color: context.primaryColor,
),
),
),
NavigationDestination(
label: 'library'.tr(),
icon: const Icon(
Icons.space_dashboard_outlined,
),
selectedIcon: buildIcon(
isProcessing: isRefreshingAssets,
icon: Icon(
Icons.space_dashboard_rounded,
color: context.primaryColor,
),
),
),
];
Widget bottomNavigationBar(TabsRouter tabsRouter) {
return NavigationBar( return NavigationBar(
selectedIndex: tabsRouter.activeIndex, selectedIndex: tabsRouter.activeIndex,
onDestinationSelected: (index) => onDestinationSelected: (index) =>
onNavigationSelected(tabsRouter, index), onNavigationSelected(tabsRouter, index),
destinations: [ destinations: navigationDestinations,
NavigationDestination( );
label: 'tab_controller_nav_photos'.tr(), }
icon: const Icon(
Icons.photo_library_outlined, Widget navigationRail(TabsRouter tabsRouter) {
), return NavigationRail(
selectedIcon: buildIcon( destinations: navigationDestinations
isProcessing: isRefreshingAssets, .map(
icon: Icon( (e) => NavigationRailDestination(
Icons.photo_library, icon: e.icon,
color: context.primaryColor, label: Text(e.label),
), ),
), )
), .toList(),
NavigationDestination( onDestinationSelected: (index) =>
label: 'tab_controller_nav_search'.tr(), onNavigationSelected(tabsRouter, index),
icon: const Icon( selectedIndex: tabsRouter.activeIndex,
Icons.search_rounded, labelType: NavigationRailLabelType.all,
), groupAlignment: 0.0,
selectedIcon: Icon(
Icons.search,
color: context.primaryColor,
),
),
NavigationDestination(
label: 'albums'.tr(),
icon: const Icon(
Icons.photo_album_outlined,
),
selectedIcon: buildIcon(
isProcessing: isRefreshingRemoteAlbums,
icon: Icon(
Icons.photo_album_rounded,
color: context.primaryColor,
),
),
),
NavigationDestination(
label: 'library'.tr(),
icon: const Icon(
Icons.space_dashboard_outlined,
),
selectedIcon: buildIcon(
isProcessing: isRefreshingAssets,
icon: Icon(
Icons.space_dashboard_rounded,
color: context.primaryColor,
),
),
),
],
); );
} }
@ -135,17 +157,27 @@ class TabControllerPage extends HookConsumerWidget {
), ),
builder: (context, child) { builder: (context, child) {
final tabsRouter = AutoTabsRouter.of(context); final tabsRouter = AutoTabsRouter.of(context);
final heroedChild = HeroControllerScope(
controller: HeroController(),
child: child,
);
return PopScope( return PopScope(
canPop: tabsRouter.activeIndex == 0, canPop: tabsRouter.activeIndex == 0,
onPopInvokedWithResult: (didPop, _) => onPopInvokedWithResult: (didPop, _) =>
!didPop ? tabsRouter.setActiveIndex(0) : null, !didPop ? tabsRouter.setActiveIndex(0) : null,
child: Scaffold( child: Scaffold(
body: HeroControllerScope( body: isScreenLandscape
controller: HeroController(), ? Row(
child: child, children: [
), navigationRail(tabsRouter),
bottomNavigationBar: const VerticalDivider(),
multiselectEnabled ? null : bottomNavigationBar(tabsRouter), Expanded(child: heroedChild),
],
)
: heroedChild,
bottomNavigationBar: multiselectEnabled || isScreenLandscape
? null
: bottomNavigationBar(tabsRouter),
), ),
); );
}, },