self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

fix(mobile): improve hero animation (#3636)

Browse Source
This commit is contained in:
X 2023-08-10 21:38:49 +08:00 committed by GitHub
parent a8b01dc21a
commit e9b0840f01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 73 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
mobile/lib/modules/home/ui/asset_grid/thumbnail_image.dart
View File

@ -62,11 +62,17 @@ class ThumbnailImage extends HookConsumerWidget {
}
Widget buildImage(Asset asset) {
var image = ImmichImage(
asset,
var image = SizedBox(
width: 300,
height: 300,
useGrayBoxPlaceholder: useGrayBoxPlaceholder,
child: Hero(
tag: asset.id + heroOffset,
child: ImmichImage(
asset,
useGrayBoxPlaceholder: useGrayBoxPlaceholder,
fit: BoxFit.cover,
),
),
);
if (!multiselectEnabled || !isSelected) {
return image;
@ -114,73 +120,70 @@ class ThumbnailImage extends HookConsumerWidget {
onSelect?.call();
HapticFeedback.heavyImpact();
},
child: Hero(
tag: asset.id + heroOffset,
child: Stack(
children: [
Container(
decoration: BoxDecoration(
border: multiselectEnabled && isSelected
? Border.all(
color: onDeselect == null
? Colors.grey
: assetContainerColor,
width: 8,
)
: const Border(),
),
child: buildImage(asset),
child: Stack(
children: [
Container(
decoration: BoxDecoration(
border: multiselectEnabled && isSelected
? Border.all(
color: onDeselect == null
? Colors.grey
: assetContainerColor,
width: 8,
)
: const Border(),
),
if (multiselectEnabled)
Padding(
padding: const EdgeInsets.all(3.0),
child: Align(
alignment: Alignment.topLeft,
child: buildSelectionIcon(asset),
),
child: buildImage(asset),
),
if (multiselectEnabled)
Padding(
padding: const EdgeInsets.all(3.0),
child: Align(
alignment: Alignment.topLeft,
child: buildSelectionIcon(asset),
),
if (showStorageIndicator)
Positioned(
right: 10,
bottom: 5,
child: Icon(
storageIcon(asset),
color: Colors.white,
size: 18,
),
),
if (showStorageIndicator)
Positioned(
right: 10,
bottom: 5,
child: Icon(
storageIcon(asset),
color: Colors.white,
size: 18,
),
if (asset.isFavorite)
const Positioned(
left: 10,
bottom: 5,
child: Icon(
Icons.favorite,
color: Colors.white,
size: 18,
),
),
if (asset.isFavorite)
const Positioned(
left: 10,
bottom: 5,
child: Icon(
Icons.favorite,
color: Colors.white,
size: 18,
),
if (!asset.isImage)
Positioned(
top: 5,
right: 5,
child: Row(
children: [
Text(
asset.duration.toString().substring(0, 7),
style: const TextStyle(
color: Colors.white,
fontSize: 10,
),
),
const Icon(
Icons.play_circle_outline_rounded,
),
if (!asset.isImage)
Positioned(
top: 5,
right: 5,
child: Row(
children: [
Text(
asset.duration.toString().substring(0, 7),
style: const TextStyle(
color: Colors.white,
fontSize: 10,
),
],
),
),
const Icon(
Icons.play_circle_outline_rounded,
color: Colors.white,
),
],
),
],
),
),
],
),
);
}

17
mobile/lib/shared/ui/photo_view/photo_view_gallery.dart
View File

@ -25,7 +25,7 @@ typedef PhotoViewGalleryPageChangedCallback = void Function(int index);
/// A type definition for a [Function] that defines a page in [PhotoViewGallery.build]
typedef PhotoViewGalleryBuilder = PhotoViewGalleryPageOptions Function(
BuildContext context,
BuildContext context,
int index,
);
@ -276,6 +276,7 @@ class _PhotoViewGalleryState extends State<PhotoViewGallery> {
filterQuality: pageOption.filterQuality,
basePosition: pageOption.basePosition,
disableGestures: pageOption.disableGestures,
heroAttributes: pageOption.heroAttributes,
child: pageOption.child,
)
: PhotoView(
@ -306,21 +307,9 @@ class _PhotoViewGalleryState extends State<PhotoViewGallery> {
basePosition: pageOption.basePosition,
disableGestures: pageOption.disableGestures,
errorBuilder: pageOption.errorBuilder,
heroAttributes: pageOption.heroAttributes,
);
if (pageOption.heroAttributes != null) {
return Hero(
tag: pageOption.heroAttributes!.tag,
createRectTween: pageOption.heroAttributes!.createRectTween,
flightShuttleBuilder: pageOption.heroAttributes!.flightShuttleBuilder,
placeholderBuilder: pageOption.heroAttributes!.placeholderBuilder,
transitionOnUserGestures: pageOption.heroAttributes!.transitionOnUserGestures,
child: ClipRect(
child: photoView,
),
);
}
return ClipRect(
child: photoView,
);

8
mobile/lib/shared/ui/photo_view/src/core/photo_view_core.dart
View File

@ -359,13 +359,13 @@ class PhotoViewCoreState extends State<PhotoViewCore>
onScaleStart: onScaleStart,
onScaleUpdate: onScaleUpdate,
onScaleEnd: onScaleEnd,
onDragStart: widget.onDragStart != null
onDragStart: widget.onDragStart != null
? (details) => widget.onDragStart!(context, details, value)
: null,
onDragEnd: widget.onDragEnd != null
onDragEnd: widget.onDragEnd != null
? (details) => widget.onDragEnd!(context, details, value)
: null,
onDragUpdate: widget.onDragUpdate != null
onDragUpdate: widget.onDragUpdate != null
? (details) => widget.onDragUpdate!(context, details, value)
: null,
hitDetector: this,
@ -405,7 +405,7 @@ class PhotoViewCoreState extends State<PhotoViewCore>
gaplessPlayback: widget.gaplessPlayback ?? false,
filterQuality: widget.filterQuality,
width: scaleBoundaries.childSize.width * scale,
fit: BoxFit.contain,
fit: BoxFit.cover,
);
}
}