fix(mobile): Reapply thumbnail image improvements and fix issue #13804 (

#13835) fix issue #13804 Co-authored-by: dvbthien <[email protected]>
immich-app · Oct 30, 2024 · 30d42e5 · 30d42e5
1 parent 318ab75
commit 30d42e5
Showing 1 changed file with 54 additions and 32 deletions.
diff --git 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(),
       ],
     );
   }