beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Map UI improvements (#1200)

Browse source
This commit is contained in:
Neeraj Gupta 2023-06-12 10:21:19 +05:30 committed by GitHub
parent 6d757122f4 ed09b33063
commit 81623cac2b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 136 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
lib/ui/map/image_tile.dart
View file

@ -45,18 +45,16 @@ class ImageTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return InkWell(
return GestureDetector(
onTap: () => onTap(context, image, index),
child: Container(
margin: const EdgeInsets.symmetric(
horizontal: 6,
vertical: 10,
),
width: 100,
height: 100,
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: ThumbnailWidget(image),
child: Padding(
padding: const EdgeInsets.fromLTRB(2, 0, 2, 4),
child: SizedBox(
width: 112,
child: ClipRRect(
borderRadius: BorderRadius.circular(2),
child: ThumbnailWidget(image),
),
),
),
);

12
lib/ui/map/map_button.dart
View file

@ -1,4 +1,5 @@
import "package:flutter/material.dart";
import "package:photos/theme/ente_theme.dart";
class MapButton extends StatelessWidget {
final String heroTag;
@ -14,12 +15,19 @@ class MapButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final colorScheme = getEnteColorScheme(context);
return FloatingActionButton(
elevation: 2,
heroTag: heroTag,
backgroundColor: Colors.white,
highlightElevation: 3,
backgroundColor: colorScheme.backgroundElevated,
mini: true,
onPressed: onPressed,
child: Icon(icon),
splashColor: Colors.transparent,
child: Icon(
icon,
color: colorScheme.textBase,
),
);
}
}

9
lib/ui/map/map_gallery_tile.dart
View file

@ -1,4 +1,3 @@
import "package:flutter/material.dart";
import "package:photos/ui/map/image_marker.dart";
import "package:photos/ui/map/marker_image.dart";
@ -10,15 +9,11 @@ class MapGalleryTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: Colors.black,
),
margin: const EdgeInsets.all(8),
child: MarkerImage(
key: key,
file: imageMarker.imageFile,
seperator: 65,
seperator: 69,
),
);
}

13
lib/ui/map/map_gallery_tile_badge.dart
View file

@ -1,4 +1,5 @@
import "package:flutter/material.dart";
import "package:photos/theme/ente_theme.dart";
class MapGalleryTileBadge extends StatelessWidget {
final int size;
@ -23,21 +24,19 @@ class MapGalleryTileBadge extends StatelessWidget {
top: 0,
right: 0,
child: Container(
padding: const EdgeInsets.all(5),
padding: const EdgeInsets.all(4),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5),
Radius.circular(2),
),
shape: BoxShape.rectangle,
// color: Color.fromRGBO(30, 215, 96, 1),
color: Colors.green,
// color: Colors.redAccent,
),
child: Text(
formatNumber(size),
style: const TextStyle(
color: Colors.white,
fontSize: 8,
fontWeight: FontWeight.bold,
),
style: getEnteTextTheme(context).tinyBold,
),
),
);

102
lib/ui/map/map_screen.dart
View file

@ -7,6 +7,7 @@ import 'package:flutter_map/flutter_map.dart';
import "package:latlong2/latlong.dart";
import "package:logging/logging.dart";
import "package:photos/models/file.dart";
import "package:photos/theme/ente_theme.dart";
import "package:photos/ui/map/image_marker.dart";
import 'package:photos/ui/map/image_tile.dart';
import "package:photos/ui/map/map_view.dart";
@ -139,52 +140,69 @@ class _MapScreenState extends State<MapScreen> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Stack(
children: [
Column(
children: [
Expanded(
child: MapView(
controller: mapController,
imageMarkers: imageMarkers,
updateVisibleImages: updateVisibleImages,
center: center,
initialZoom: initialZoom,
minZoom: minZoom,
maxZoom: maxZoom,
debounceDuration: debounceDuration,
),
),
SizedBox(
height: 120,
child: Center(
child: ListView.builder(
itemCount: visibleImages.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
final image = visibleImages[index];
return ImageTile(
image: image,
allImages: allImages,
visibleImages: visibleImages,
index: index,
);
},
return Container(
color: getEnteColorScheme(context).backgroundBase,
child: SafeArea(
top: false,
child: Scaffold(
body: Stack(
children: [
Column(
children: [
Expanded(
child: ClipRRect(
borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(6),
bottomRight: Radius.circular(6),
),
child: MapView(
controller: mapController,
imageMarkers: imageMarkers,
updateVisibleImages: updateVisibleImages,
center: center,
initialZoom: initialZoom,
minZoom: minZoom,
maxZoom: maxZoom,
debounceDuration: debounceDuration,
),
),
),
)
],
),
isLoading
? const SizedBox.expand(
child: Center(
child: CircularProgressIndicator(color: Colors.green),
const SizedBox(height: 4),
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(2),
topRight: Radius.circular(2),
),
child: SizedBox(
height: 116,
child: ListView.builder(
itemCount: visibleImages.length,
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 2),
physics: const BouncingScrollPhysics(),
itemBuilder: (context, index) {
final image = visibleImages[index];
return ImageTile(
image: image,
allImages: allImages,
visibleImages: visibleImages,
index: index,
);
},
),
),
)
: const SizedBox.shrink(),
],
],
),
isLoading
? const SizedBox.expand(
child: Center(
child: CircularProgressIndicator(color: Colors.green),
),
)
: const SizedBox.shrink(),
],
),
),
),
);

22
lib/ui/map/map_view.dart
View file

@ -61,9 +61,15 @@ class _MapViewState extends State<MapView> {
FlutterMap(
mapController: widget.controller,
options: MapOptions(
center: widget.center,
minZoom: widget.minZoom,
maxZoom: widget.maxZoom,
enableMultiFingerGestureRace: true,
maxBounds: LatLngBounds(
LatLng(-90, -180),
LatLng(90, 180),
),
zoom: widget.initialZoom,
onPositionChanged: (position, hasGesture) {
if (position.bounds != null) {
if (!_isDebouncing) {
@ -119,14 +125,16 @@ class _MapViewState extends State<MapView> {
],
),
Positioned(
top: 10,
top: 4,
left: 10,
child: MapButton(
icon: Icons.arrow_back,
onPressed: () {
Navigator.pop(context);
},
heroTag: 'back',
child: SafeArea(
child: MapButton(
icon: Icons.arrow_back,
onPressed: () {
Navigator.pop(context);
},
heroTag: 'back',
),
),
),
Positioned(

57
lib/ui/map/marker_image.dart
View file

@ -1,5 +1,7 @@
import "package:flutter/material.dart";
import "package:photos/models/file.dart";
import "package:photos/theme/effects.dart";
import "package:photos/theme/ente_theme.dart";
import "package:photos/ui/viewer/file/thumbnail_widget.dart";
class MarkerImage extends StatelessWidget {
@ -10,41 +12,50 @@ class MarkerImage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
border: Border.all(
color: Colors.green,
width: 1.75,
final bgColor = getEnteColorScheme(context).backgroundElevated2;
return Container(
decoration: BoxDecoration(boxShadow: shadowMenuLight),
child: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
border: Border.all(
color: bgColor,
width: 2,
),
),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(2)),
child: ThumbnailWidget(file),
),
),
child: ThumbnailWidget(file),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.only(top: seperator),
child: CustomPaint(
painter: MarkerPointer(),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: EdgeInsets.only(top: seperator),
child: CustomPaint(
painter: MarkerPointer(bgColor),
),
),
),
)
],
)
],
),
);
}
}
class MarkerPointer extends CustomPainter {
Color bgColor;
MarkerPointer(this.bgColor);
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()..color = Colors.green;
final paint = Paint()..color = bgColor;
final path = Path();
path.moveTo(5, -12);
path.lineTo(0, 0);
path.lineTo(-5, -12);
path.moveTo(9, -12);
path.lineTo(0, -4);
path.lineTo(-9, -12);
canvas.drawPath(path, paint);
}