diff --git a/lib/ui/map/image_tile.dart b/lib/ui/map/image_tile.dart index 0c393a493..960ee1c0f 100644 --- a/lib/ui/map/image_tile.dart +++ b/lib/ui/map/image_tile.dart @@ -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), + ), ), ), ); diff --git a/lib/ui/map/map_button.dart b/lib/ui/map/map_button.dart index c1c656a12..464fd8271 100644 --- a/lib/ui/map/map_button.dart +++ b/lib/ui/map/map_button.dart @@ -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, + ), ); } } diff --git a/lib/ui/map/map_gallery_tile.dart b/lib/ui/map/map_gallery_tile.dart index 36b15fa44..d10cdec1e 100644 --- a/lib/ui/map/map_gallery_tile.dart +++ b/lib/ui/map/map_gallery_tile.dart @@ -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, ), ); } diff --git a/lib/ui/map/map_gallery_tile_badge.dart b/lib/ui/map/map_gallery_tile_badge.dart index b51afc9cc..cef32664d 100644 --- a/lib/ui/map/map_gallery_tile_badge.dart +++ b/lib/ui/map/map_gallery_tile_badge.dart @@ -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, ), ), ); diff --git a/lib/ui/map/map_screen.dart b/lib/ui/map/map_screen.dart index b3f435c1b..47ab985a6 100644 --- a/lib/ui/map/map_screen.dart +++ b/lib/ui/map/map_screen.dart @@ -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 { @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(), + ], + ), ), ), ); diff --git a/lib/ui/map/map_view.dart b/lib/ui/map/map_view.dart index cb1be381f..46cc600a3 100644 --- a/lib/ui/map/map_view.dart +++ b/lib/ui/map/map_view.dart @@ -61,9 +61,15 @@ class _MapViewState extends State { 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 { ], ), 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( diff --git a/lib/ui/map/marker_image.dart b/lib/ui/map/marker_image.dart index 32e61af9e..58882e9be 100644 --- a/lib/ui/map/marker_image.dart +++ b/lib/ui/map/marker_image.dart @@ -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: [ - 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: [ + 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); }