1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-27 22:22:45 +01:00

feat(mobile): Responsive display of exif data in bottom sheet ()

* two column view of exif

* fixes padding

* fixed divider when no map

* fixed map visibility in two column
This commit is contained in:
martyfuhry 2023-02-10 21:31:15 -05:00 committed by GitHub
parent bd71e087d4
commit ad9373312b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -14,53 +14,60 @@ class ExifBottomSheet extends HookConsumerWidget {
const ExifBottomSheet({Key? key, required this.assetDetail}) const ExifBottomSheet({Key? key, required this.assetDetail})
: super(key: key); : super(key: key);
bool get showMap => assetDetail.latitude != null && assetDetail.longitude != null;
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
buildMap() { buildMap() {
return Padding( return Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0), padding: const EdgeInsets.symmetric(vertical: 16.0),
child: Container( child: LayoutBuilder(
height: 150, builder: (context, constraints) {
width: MediaQuery.of(context).size.width, return Container(
decoration: const BoxDecoration( height: 150,
borderRadius: BorderRadius.all(Radius.circular(15)), width: constraints.maxWidth,
), decoration: const BoxDecoration(
child: FlutterMap( borderRadius: BorderRadius.all(Radius.circular(15)),
options: MapOptions(
center: LatLng(
assetDetail.latitude ?? 0,
assetDetail.longitude ?? 0,
), ),
zoom: 16.0, child: FlutterMap(
), options: MapOptions(
layers: [ interactiveFlags: InteractiveFlag.none,
TileLayerOptions( center: LatLng(
urlTemplate: assetDetail.latitude ?? 0,
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", assetDetail.longitude ?? 0,
subdomains: ['a', 'b', 'c'], ),
attributionBuilder: (_) { zoom: 16.0,
return const Text( ),
"© OpenStreetMap", layers: [
style: TextStyle(fontSize: 10), TileLayerOptions(
); urlTemplate:
}, "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
), subdomains: ['a', 'b', 'c'],
MarkerLayerOptions( attributionBuilder: (_) {
markers: [ return const Text(
Marker( "© OpenStreetMap",
anchorPos: AnchorPos.align(AnchorAlign.top), style: TextStyle(fontSize: 10),
point: LatLng( );
assetDetail.latitude ?? 0, },
assetDetail.longitude ?? 0, ),
), MarkerLayerOptions(
builder: (ctx) => const Image( markers: [
image: AssetImage('assets/location-pin.png'), Marker(
), anchorPos: AnchorPos.align(AnchorAlign.top),
point: LatLng(
assetDetail.latitude ?? 0,
assetDetail.longitude ?? 0,
),
builder: (ctx) => const Image(
image: AssetImage('assets/location-pin.png'),
),
),
],
), ),
], ],
), ),
], );
), },
), ),
); );
} }
@ -91,6 +98,107 @@ class ExifBottomSheet extends HookConsumerWidget {
return text.isEmpty ? null : Text(text); return text.isEmpty ? null : Text(text);
} }
buildDragHeader() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
SizedBox(height: 12),
Align(
alignment: Alignment.center,
child: CustomDraggingHandle(),
),
SizedBox(height: 12),
],
);
}
buildLocation() {
// Guard no lat/lng
if (!showMap) {
return Container();
}
return Column(
children: [
// Location
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"exif_bottom_sheet_location",
style: TextStyle(fontSize: 11, color: textColor),
).tr(),
buildMap(),
if (exifInfo != null &&
exifInfo.city != null &&
exifInfo.state != null)
buildLocationText(),
Text(
"${assetDetail.latitude!.toStringAsFixed(4)}, ${assetDetail.longitude!.toStringAsFixed(4)}",
style: const TextStyle(fontSize: 12),
)
],
),
],
);
}
buildDate() {
return Text(
DateFormat('date_format'.tr()).format(
assetDetail.createdAt.toLocal(),
),
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
);
}
buildDetail() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
"exif_bottom_sheet_details",
style: TextStyle(fontSize: 11, color: textColor),
).tr(),
),
ListTile(
contentPadding: const EdgeInsets.all(0),
dense: true,
leading: const Icon(Icons.image),
title: Text(
assetDetail.fileName,
style: TextStyle(
fontWeight: FontWeight.bold,
color: textColor,
),
),
subtitle: buildSizeText(assetDetail),
),
if (exifInfo?.make != null)
ListTile(
contentPadding: const EdgeInsets.all(0),
dense: true,
leading: const Icon(Icons.camera),
title: Text(
"${exifInfo!.make} ${exifInfo.model}",
style: TextStyle(
color: textColor,
fontWeight: FontWeight.bold,
),
),
subtitle: Text(
"ƒ/${exifInfo.fNumber} ${exifInfo.exposureTime} ${exifInfo.focalLength} mm ISO${exifInfo.iso} ",
),
),
],
);
}
return SingleChildScrollView( return SingleChildScrollView(
child: Card( child: Card(
shape: const RoundedRectangleBorder( shape: const RoundedRectangleBorder(
@ -102,104 +210,69 @@ class ExifBottomSheet extends HookConsumerWidget {
margin: const EdgeInsets.all(0), margin: const EdgeInsets.all(0),
child: Container( child: Container(
margin: const EdgeInsets.symmetric(horizontal: 8.0), margin: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column( child: LayoutBuilder(
crossAxisAlignment: CrossAxisAlignment.start, builder: (context, constraints) {
children: [ if (constraints.maxWidth > 600) {
const SizedBox(height: 12), // Two column
const Align( return Padding(
alignment: Alignment.center, padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: CustomDraggingHandle(),
),
const SizedBox(height: 12),
Text(
DateFormat('date_format'.tr()).format(
assetDetail.createdAt.toLocal(),
),
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
// Location
if (assetDetail.latitude != null && assetDetail.longitude != null)
Padding(
padding: const EdgeInsets.only(top: 32.0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
const Divider( buildDragHeader(),
thickness: 1, buildDate(),
const SizedBox(height: 32.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(
flex: showMap ? 5 : 0,
child: Padding(
padding: const EdgeInsets.only(right: 8.0),
child: buildLocation(),
),
),
Flexible(
flex: 5,
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: buildDetail(),
),
),
],
), ),
Text( const SizedBox(height: 50),
"exif_bottom_sheet_location",
style: TextStyle(fontSize: 11, color: textColor),
).tr(),
buildMap(),
if (exifInfo != null &&
exifInfo.city != null &&
exifInfo.state != null)
buildLocationText(),
Text(
"${assetDetail.latitude!.toStringAsFixed(4)}, ${assetDetail.longitude!.toStringAsFixed(4)}",
style: const TextStyle(fontSize: 12),
)
], ],
), ),
), );
// Detail }
Padding(
padding: const EdgeInsets.only(top: 32.0), // One column
child: Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
buildDragHeader(),
buildDate(),
const SizedBox(height: 16.0),
if (showMap)
Divider( Divider(
thickness: 1, thickness: 1,
color: Colors.grey[600], color: Colors.grey[600],
), ),
Padding( const SizedBox(height: 16.0),
padding: const EdgeInsets.only(bottom: 8.0), buildLocation(),
child: Text( const SizedBox(height: 16.0),
"exif_bottom_sheet_details", Divider(
style: TextStyle(fontSize: 11, color: textColor), thickness: 1,
).tr(), color: Colors.grey[600],
), ),
ListTile( const SizedBox(height: 16.0),
contentPadding: const EdgeInsets.all(0), buildDetail(),
dense: true, const SizedBox(height: 50),
leading: const Icon(Icons.image), ],
title: Text( );
assetDetail.fileName, },
style: TextStyle(
fontWeight: FontWeight.bold,
color: textColor,
),
),
subtitle: buildSizeText(assetDetail),
),
if (exifInfo?.make != null)
ListTile(
contentPadding: const EdgeInsets.all(0),
dense: true,
leading: const Icon(Icons.camera),
title: Text(
"${exifInfo!.make} ${exifInfo.model}",
style: TextStyle(
color: textColor,
fontWeight: FontWeight.bold,
),
),
subtitle: Text(
"ƒ/${exifInfo.fNumber} ${exifInfo.exposureTime} ${exifInfo.focalLength} mm ISO${exifInfo.iso} ",
),
),
],
),
),
const SizedBox(
height: 50,
),
],
), ),
), ),
), ),