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 (#1725)
* two column view of exif * fixes padding * fixed divider when no map * fixed map visibility in two column
This commit is contained in:
parent
bd71e087d4
commit
ad9373312b
1 changed files with 200 additions and 127 deletions
|
@ -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,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
Loading…
Reference in a new issue