feat(mobile): Memories activity is now full screen, better image fit, adds progress indicator (#6793)

* Made memories full screen

* Uses linear bar and fits the card better for memories

* Fixes pageview close button moving with pages

* Uses hooks instead of stateful components

* Adds ticks to the progress indicator

* Rounds the edges of the progress bar

* Fixes trailing comma analyze error

* Adds padding and hero to memories

* Fixes an issue with initial index set and adds hero / proper padding

* Fixes aspect ratio calculation

* Color

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
martyfuhry 2024-02-05 14:12:33 -05:00 committed by GitHub
parent f6b4024a21
commit c29976cd6f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 337 additions and 198 deletions

View file

@ -12,18 +12,14 @@ import 'package:openapi/api.dart';
class MemoryCard extends StatelessWidget {
final Asset asset;
final void Function() onTap;
final void Function() onClose;
final String title;
final String? rightCornerText;
final bool showTitle;
const MemoryCard({
required this.asset,
required this.onTap,
required this.onClose,
required this.title,
required this.showTitle,
this.rightCornerText,
super.key,
});
@ -65,34 +61,34 @@ class MemoryCard extends StatelessWidget {
),
GestureDetector(
onTap: onTap,
child: ImmichImage(
asset,
fit: BoxFit.fitWidth,
height: double.infinity,
width: double.infinity,
type: ThumbnailFormat.JPEG,
preferredLocalAssetSize: 2048,
),
),
Positioned(
top: 2.0,
left: 2.0,
child: IconButton(
onPressed: onClose,
icon: const Icon(Icons.close_rounded),
color: Colors.grey[400],
),
),
Positioned(
right: 18.0,
top: 18.0,
child: Text(
rightCornerText ?? "",
style: TextStyle(
color: Colors.grey[200],
fontSize: 12.0,
fontWeight: FontWeight.bold,
),
child: LayoutBuilder(
builder: (context, constraints) {
// Determine the fit using the aspect ratio
BoxFit fit = BoxFit.fitWidth;
if (asset.width != null && asset.height != null) {
final aspectRatio = asset.width! / asset.height!;
final phoneAspectRatio =
constraints.maxWidth / constraints.maxHeight;
// Look for a 25% difference in either direction
if (phoneAspectRatio * .75 < aspectRatio &&
phoneAspectRatio * 1.25 > aspectRatio) {
// Cover to look nice if we have nearly the same aspect ratio
fit = BoxFit.cover;
}
}
return Hero(
tag: 'memory-${asset.id}',
child: ImmichImage(
asset,
fit: fit,
height: double.infinity,
width: double.infinity,
type: ThumbnailFormat.JPEG,
preferredLocalAssetSize: 2048,
),
);
},
),
),
if (showTitle)