diff --git a/mobile/lib/widgets/asset_grid/thumbnail_image.dart b/mobile/lib/widgets/asset_grid/thumbnail_image.dart index 4c1870b3745f0..35013bb5956c2 100644 --- a/mobile/lib/widgets/asset_grid/thumbnail_image.dart +++ b/mobile/lib/widgets/asset_grid/thumbnail_image.dart @@ -136,10 +136,31 @@ class ThumbnailImage extends ConsumerWidget { tag: isFromDto ? '${asset.remoteId}-$heroOffset' : asset.id + heroOffset, - child: ImmichThumbnail( - asset: asset, - height: 250, - width: 250, + child: Stack( + children: [ + SizedBox.expand( + child: ImmichThumbnail( + asset: asset, + height: 250, + width: 250, + ), + ), + Container( + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [ + Color.fromRGBO(0, 0, 0, 0.1), + Colors.transparent, + Colors.transparent, + Color.fromRGBO(0, 0, 0, 0.1), + ], + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + stops: [0, 0.3, 0.6, 1], + ), + ), + ), + ], ), ), ); @@ -151,11 +172,8 @@ class ThumbnailImage extends ConsumerWidget { color: canDeselect ? assetContainerColor : Colors.grey, ), child: ClipRRect( - borderRadius: const BorderRadius.only( - topRight: Radius.circular(15.0), - bottomRight: Radius.circular(15.0), - bottomLeft: Radius.circular(15.0), - topLeft: Radius.zero, + borderRadius: const BorderRadius.all( + Radius.circular(15.0), ), child: image, ), @@ -175,7 +193,33 @@ class ThumbnailImage extends ConsumerWidget { ) : const Border(), ), - child: buildImage(), + child: Stack( + children: [ + buildImage(), + if (showStorageIndicator) + Positioned( + right: 8, + bottom: 5, + child: Icon( + storageIcon(asset), + color: Colors.white.withOpacity(.8), + size: 16, + ), + ), + if (asset.isFavorite) + const Positioned( + left: 8, + bottom: 5, + child: Icon( + Icons.favorite, + color: Colors.white, + size: 16, + ), + ), + if (!asset.isImage) buildVideoIcon(), + if (asset.stackCount > 0) buildStackIcon(), + ], + ), ), if (multiselectEnabled) Padding( @@ -185,28 +229,6 @@ class ThumbnailImage extends ConsumerWidget { child: buildSelectionIcon(asset), ), ), - if (showStorageIndicator) - Positioned( - right: 8, - bottom: 5, - child: Icon( - storageIcon(asset), - color: Colors.white.withOpacity(.8), - size: 16, - ), - ), - if (asset.isFavorite) - const Positioned( - left: 8, - bottom: 5, - child: Icon( - Icons.favorite, - color: Colors.white, - size: 18, - ), - ), - if (!asset.isImage) buildVideoIcon(), - if (asset.stackCount > 0) buildStackIcon(), ], ); }