Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-06-03 13:44:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore(mobile): proper new UI layout for tablet (#13650)

Browse Source 
* chore(mobile): better tablet UI

* fix spacing when trash is disable

* better layout for library page

* Removed navigation rail

* removed navigation rail reference

* correct padding

* fixed people page
This commit is contained in:
Alex 2024-10-21 13:39:18 -05:00 committed by GitHub
parent d137fc3eb6
commit 791c37d2cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 230 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
mobile/lib/pages/common/tab_controller.page.dart
View File

@ -61,53 +61,6 @@ class TabControllerPage extends HookConsumerWidget {
ref.read(tabProvider.notifier).state = TabEnum.values[index]; ref.read(tabProvider.notifier).state = TabEnum.values[index];
} }
navigationRail(TabsRouter tabsRouter) {
return NavigationRail(
labelType: NavigationRailLabelType.all,
selectedIndex: tabsRouter.activeIndex,
onDestinationSelected: (index) =>
onNavigationSelected(tabsRouter, index),
selectedIconTheme: IconThemeData(
color: context.primaryColor,
),
selectedLabelTextStyle: TextStyle(
color: context.primaryColor,
),
useIndicator: false,
destinations: [
NavigationRailDestination(
padding: EdgeInsets.only(
top: MediaQuery.of(context).padding.top + 4,
left: 4,
right: 4,
bottom: 4,
),
icon: const Icon(Icons.photo_library_outlined),
selectedIcon: const Icon(Icons.photo_library),
label: const Text('tab_controller_nav_photos').tr(),
),
NavigationRailDestination(
padding: const EdgeInsets.all(4),
icon: const Icon(Icons.search_rounded),
selectedIcon: const Icon(Icons.search),
label: const Text('tab_controller_nav_search').tr(),
),
NavigationRailDestination(
padding: const EdgeInsets.all(4),
icon: const Icon(Icons.photo_album_outlined),
selectedIcon: const Icon(Icons.photo_album),
label: const Text('albums').tr(),
),
NavigationRailDestination(
padding: const EdgeInsets.all(4),
icon: const Icon(Icons.space_dashboard_outlined),
selectedIcon: const Icon(Icons.space_dashboard_rounded),
label: const Text('library').tr(),
),
],
);
}
bottomNavigationBar(TabsRouter tabsRouter) { bottomNavigationBar(TabsRouter tabsRouter) {
return NavigationBar( return NavigationBar(
selectedIndex: tabsRouter.activeIndex, selectedIndex: tabsRouter.activeIndex,
@ -186,33 +139,13 @@ class TabControllerPage extends HookConsumerWidget {
canPop: tabsRouter.activeIndex == 0, canPop: tabsRouter.activeIndex == 0,
onPopInvokedWithResult: (didPop, _) => onPopInvokedWithResult: (didPop, _) =>
!didPop ? tabsRouter.setActiveIndex(0) : null, !didPop ? tabsRouter.setActiveIndex(0) : null,
child: LayoutBuilder( child: Scaffold(
builder: (context, constraints) { body: HeroControllerScope(
const medium = 600; controller: HeroController(),
final Widget? bottom; child: child,
final Widget body; ),
if (constraints.maxWidth < medium) { bottomNavigationBar:
// Normal phone width multiselectEnabled ? null : bottomNavigationBar(tabsRouter),
bottom = bottomNavigationBar(tabsRouter);
body = child;
} else {
// Medium tablet width
bottom = null;
body = Row(
children: [
navigationRail(tabsRouter),
Expanded(child: child),
],
);
}
return Scaffold(
body: HeroControllerScope(
controller: HeroController(),
child: body,
),
bottomNavigationBar: multiselectEnabled ? null : bottom,
);
},
), ),
); );
}, },

278
mobile/lib/pages/library/library.page.dart
View File

@ -59,7 +59,7 @@ class LibraryPage extends ConsumerWidget {
icon: Icons.link_outlined, icon: Icons.link_outlined,
label: 'shared_links'.tr(), label: 'shared_links'.tr(),
), ),
const SizedBox(width: 8), SizedBox(width: trashEnabled ? 8 : 0),
trashEnabled trashEnabled
? ActionButton( ? ActionButton(
onPressed: () => context.pushRoute(const TrashRoute()), onPressed: () => context.pushRoute(const TrashRoute()),
@ -197,58 +197,65 @@ class PeopleCollectionCard extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final people = ref.watch(getAllPeopleProvider); final people = ref.watch(getAllPeopleProvider);
final size = MediaQuery.of(context).size.width * 0.5 - 20; return LayoutBuilder(
return GestureDetector( builder: (context, constraints) {
onTap: () => context.pushRoute(const PeopleCollectionRoute()), final isTablet = constraints.maxWidth > 600;
child: Column( final widthFactor = isTablet ? 0.25 : 0.5;
crossAxisAlignment: CrossAxisAlignment.start, final size = MediaQuery.of(context).size.width * widthFactor - 20.0;
children: [
Container( return GestureDetector(
height: size, onTap: () => context.pushRoute(const PeopleCollectionRoute()),
width: size, child: Column(
decoration: BoxDecoration( crossAxisAlignment: CrossAxisAlignment.start,
borderRadius: BorderRadius.circular(20), children: [
gradient: LinearGradient( Container(
colors: [ height: size,
context.colorScheme.primary.withAlpha(30), width: size,
context.colorScheme.primary.withAlpha(25), decoration: BoxDecoration(
], borderRadius: BorderRadius.circular(20),
begin: Alignment.topCenter, gradient: LinearGradient(
end: Alignment.bottomCenter, colors: [
), context.colorScheme.primary.withAlpha(30),
), context.colorScheme.primary.withAlpha(25),
child: people.widgetWhen( ],
onData: (people) { begin: Alignment.topCenter,
return GridView.count( end: Alignment.bottomCenter,
crossAxisCount: 2, ),
padding: const EdgeInsets.all(12), ),
crossAxisSpacing: 8, child: people.widgetWhen(
mainAxisSpacing: 8, onData: (people) {
physics: const NeverScrollableScrollPhysics(), return GridView.count(
children: people.take(4).map((person) { crossAxisCount: 2,
return CircleAvatar( padding: const EdgeInsets.all(12),
backgroundImage: NetworkImage( crossAxisSpacing: 8,
getFaceThumbnailUrl(person.id), mainAxisSpacing: 8,
headers: ApiService.getRequestHeaders(), physics: const NeverScrollableScrollPhysics(),
), children: people.take(4).map((person) {
return CircleAvatar(
backgroundImage: NetworkImage(
getFaceThumbnailUrl(person.id),
headers: ApiService.getRequestHeaders(),
),
);
}).toList(),
); );
}).toList(), },
); ),
},
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'people'.tr(),
style: context.textTheme.titleSmall?.copyWith(
color: context.colorScheme.onSurface,
fontWeight: FontWeight.w500,
), ),
), Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'people'.tr(),
style: context.textTheme.titleSmall?.copyWith(
color: context.colorScheme.onSurface,
fontWeight: FontWeight.w500,
),
),
),
],
), ),
], );
), },
); );
} }
} }
@ -260,55 +267,61 @@ class LocalAlbumsCollectionCard extends HookConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final albums = ref.watch(localAlbumsProvider); final albums = ref.watch(localAlbumsProvider);
final size = MediaQuery.of(context).size.width * 0.5 - 20; return LayoutBuilder(
builder: (context, constraints) {
final isTablet = constraints.maxWidth > 600;
final widthFactor = isTablet ? 0.25 : 0.5;
final size = MediaQuery.of(context).size.width * widthFactor - 20.0;
return GestureDetector( return GestureDetector(
onTap: () => context.pushRoute( onTap: () => context.pushRoute(
const LocalAlbumsRoute(), const LocalAlbumsRoute(),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: size,
width: size,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(
colors: [
context.colorScheme.primary.withAlpha(30),
context.colorScheme.primary.withAlpha(25),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: GridView.count(
crossAxisCount: 2,
padding: const EdgeInsets.all(12),
crossAxisSpacing: 8,
mainAxisSpacing: 8,
physics: const NeverScrollableScrollPhysics(),
children: albums.take(4).map((album) {
return AlbumThumbnailCard(
album: album,
showTitle: false,
);
}).toList(),
),
), ),
Padding( child: Column(
padding: const EdgeInsets.all(8.0), crossAxisAlignment: CrossAxisAlignment.start,
child: Text( children: [
'on_this_device'.tr(), Container(
style: context.textTheme.titleSmall?.copyWith( height: size,
color: context.colorScheme.onSurface, width: size,
fontWeight: FontWeight.w500, decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(
colors: [
context.colorScheme.primary.withAlpha(30),
context.colorScheme.primary.withAlpha(25),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: GridView.count(
crossAxisCount: 2,
padding: const EdgeInsets.all(12),
crossAxisSpacing: 8,
mainAxisSpacing: 8,
physics: const NeverScrollableScrollPhysics(),
children: albums.take(4).map((album) {
return AlbumThumbnailCard(
album: album,
showTitle: false,
);
}).toList(),
),
), ),
), Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'on_this_device'.tr(),
style: context.textTheme.titleSmall?.copyWith(
color: context.colorScheme.onSurface,
fontWeight: FontWeight.w500,
),
),
),
],
), ),
], );
), },
); );
} }
} }
@ -317,44 +330,51 @@ class PlacesCollectionCard extends StatelessWidget {
const PlacesCollectionCard({super.key}); const PlacesCollectionCard({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final size = MediaQuery.of(context).size.width * 0.5 - 20; return LayoutBuilder(
return GestureDetector( builder: (context, constraints) {
onTap: () => context.pushRoute(const PlacesCollectionRoute()), final isTablet = constraints.maxWidth > 600;
child: Column( final widthFactor = isTablet ? 0.25 : 0.5;
crossAxisAlignment: CrossAxisAlignment.start, final size = MediaQuery.of(context).size.width * widthFactor - 20.0;
children: [
Container( return GestureDetector(
height: size, onTap: () => context.pushRoute(const PlacesCollectionRoute()),
width: size, child: Column(
decoration: BoxDecoration( crossAxisAlignment: CrossAxisAlignment.start,
borderRadius: BorderRadius.circular(20), children: [
color: context.colorScheme.secondaryContainer.withAlpha(100), Container(
), height: size,
child: IgnorePointer( width: size,
child: MapThumbnail( decoration: BoxDecoration(
zoom: 8, borderRadius: BorderRadius.circular(20),
centre: const LatLng( color: context.colorScheme.secondaryContainer.withAlpha(100),
21.44950, ),
-157.91959, child: IgnorePointer(
child: MapThumbnail(
zoom: 8,
centre: const LatLng(
21.44950,
-157.91959,
),
showAttribution: false,
themeMode:
context.isDarkTheme ? ThemeMode.dark : ThemeMode.light,
),
), ),
showAttribution: false,
themeMode:
context.isDarkTheme ? ThemeMode.dark : ThemeMode.light,
), ),
), Padding(
), padding: const EdgeInsets.all(8.0),
Padding( child: Text(
padding: const EdgeInsets.all(8.0), 'places'.tr(),
child: Text( style: context.textTheme.titleSmall?.copyWith(
'places'.tr(), color: context.colorScheme.onSurface,
style: context.textTheme.titleSmall?.copyWith( fontWeight: FontWeight.w500,
color: context.colorScheme.onSurface, ),
fontWeight: FontWeight.w500, ),
), ),
), ],
), ),
], );
), },
); );
} }
} }

138
mobile/lib/pages/library/people/people_collection.page.dart
View File

@ -29,76 +29,86 @@ class PeopleCollectionPage extends HookConsumerWidget {
); );
} }
return Scaffold( return LayoutBuilder(
appBar: AppBar( builder: (context, constraints) {
title: Text('people'.tr()), final isTablet = constraints.maxWidth > 600;
), final isPortrait =
body: people.when( MediaQuery.of(context).orientation == Orientation.portrait;
data: (people) {
return GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 0.85,
),
padding: const EdgeInsets.symmetric(vertical: 32),
itemCount: people.length,
itemBuilder: (context, index) {
final person = people[index];
return Column( return Scaffold(
children: [ appBar: AppBar(
GestureDetector( title: Text('people'.tr()),
onTap: () { ),
context.pushRoute( body: people.when(
PersonResultRoute( data: (people) {
personId: person.id, return GridView.builder(
personName: person.name, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
), crossAxisCount: isTablet ? 6 : 3,
); childAspectRatio: 0.85,
}, mainAxisSpacing: isPortrait && isTablet ? 36 : 0,
child: Material( ),
shape: const CircleBorder(side: BorderSide.none), padding: const EdgeInsets.symmetric(vertical: 32),
elevation: 3, itemCount: people.length,
child: CircleAvatar( itemBuilder: (context, index) {
maxRadius: 96 / 2, final person = people[index];
backgroundImage: NetworkImage(
getFaceThumbnailUrl(person.id), return Column(
headers: headers, children: [
), GestureDetector(
), onTap: () {
), context.pushRoute(
), PersonResultRoute(
const SizedBox(height: 12), personId: person.id,
GestureDetector( personName: person.name,
onTap: () => showNameEditModel(person.id, person.name),
child: person.name.isEmpty
? Text(
'add_a_name'.tr(),
style: context.textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.w500,
color: context.colorScheme.primary,
), ),
) );
: Padding( },
padding: child: Material(
const EdgeInsets.symmetric(horizontal: 16.0), shape: const CircleBorder(side: BorderSide.none),
child: Text( elevation: 3,
person.name, child: CircleAvatar(
overflow: TextOverflow.ellipsis, maxRadius: isTablet ? 120 / 2 : 96 / 2,
style: context.textTheme.titleSmall?.copyWith( backgroundImage: NetworkImage(
fontWeight: FontWeight.w500, getFaceThumbnailUrl(person.id),
), headers: headers,
), ),
), ),
), ),
], ),
const SizedBox(height: 12),
GestureDetector(
onTap: () => showNameEditModel(person.id, person.name),
child: person.name.isEmpty
? Text(
'add_a_name'.tr(),
style: context.textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.w500,
color: context.colorScheme.primary,
),
)
: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
),
child: Text(
person.name,
overflow: TextOverflow.ellipsis,
style: context.textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.w500,
),
),
),
),
],
);
},
); );
}, },
); error: (error, stack) => const Text("error"),
}, loading: () => const CircularProgressIndicator(),
error: (error, stack) => const Text("error"), ),
loading: () => const CircularProgressIndicator(), );
), },
); );
} }
} }