Merge pull request #724 from ente-io/gradients

Tweak gradients

lib/ui/viewer/file/file_icons_widget.dart

@@ -23,47 +23,30 @@ class UnSyncedIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      decoration: const BoxDecoration(
-        gradient: LinearGradient(
-          begin: Alignment.centerLeft,
-          end: Alignment.centerRight,
-          // background: linear-gradient(73.58deg, rgba(0, 0, 0, 0.3) -6.66%, rgba(255, 255, 255, 0) 44.44%);
-          colors: [
-            Color.fromRGBO(255, 255, 255, 0),
-            Colors.transparent,
-            // Color.fromRGBO(0, 0, 0, 0.3),
-          ],
-          stops: [-0.067, 0.445],
-        ),
-      ),
-      child: const Align(
-        alignment: Alignment.bottomLeft,
-        child: Padding(
-          padding: EdgeInsets.only(left: 4, bottom: 4),
-          child: Icon(
-            Icons.cloud_off_outlined,
-            size: 18,
-            color: fixedStrokeMutedWhite,
-          ),
-        ),
-      ),
+    return const _BottomLeftOverlayIcon(Icons.cloud_off_outlined);
+  }
+}
+
+class FavoriteOverlayIcon extends StatelessWidget {
+  const FavoriteOverlayIcon({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const _BottomLeftOverlayIcon(
+      Icons.favorite_rounded,
+      baseSize: 22,
     );
   }
 }
 
-class VideoOverlayIcon extends StatelessWidget {
-  const VideoOverlayIcon({Key? key}) : super(key: key);
+class ArchiveOverlayIcon extends StatelessWidget {
+  const ArchiveOverlayIcon({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return const SizedBox(
-      height: 64,
-      child: Icon(
-        Icons.play_circle_outline,
-        size: 40,
-        color: Colors.white70,
-      ),
+    return const _BottomLeftOverlayIcon(
+      Icons.archive_outlined,
+      color: fixedStrokeMutedWhite,
     );
   }
 }
@@ -73,15 +56,24 @@ class LivePhotoOverlayIcon extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const Align(
-      alignment: Alignment.bottomRight,
-      child: Padding(
-        padding: EdgeInsets.only(right: 4, bottom: 4),
-        child: Icon(
-          Icons.album_outlined,
-          size: 14,
-          color: Colors.white, // fixed
-        ),
+    return const _BottomRightOverlayIcon(
+      Icons.album_outlined,
+      baseSize: 18,
+    );
+  }
+}
+
+class VideoOverlayIcon extends StatelessWidget {
+  const VideoOverlayIcon({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const SizedBox(
+      height: 64,
+      child: Icon(
+        Icons.play_circle_outline,
+        size: 40,
+        color: Colors.white70,
       ),
     );
   }
@@ -107,25 +99,6 @@ class OwnerAvatarOverlayIcon extends StatelessWidget {
   }
 }
 
-class FavoriteOverlayIcon extends StatelessWidget {
-  const FavoriteOverlayIcon({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return const Align(
-      alignment: Alignment.bottomLeft,
-      child: Padding(
-        padding: EdgeInsets.only(left: 4, bottom: 4),
-        child: Icon(
-          Icons.favorite_rounded,
-          size: 20,
-          color: Colors.white, // fixed
-        ),
-      ),
-    );
-  }
-}
-
 class TrashedFileOverlayText extends StatelessWidget {
   final TrashFile file;
 
@@ -154,21 +127,142 @@ class TrashedFileOverlayText extends StatelessWidget {
   }
 }
 
-class ArchiveOverlayIcon extends StatelessWidget {
-  const ArchiveOverlayIcon({Key? key}) : super(key: key);
+// Base variations
+
+/// Icon overlay in the bottom left.
+///
+/// This usually indicates ente specific state of a file, e.g. if it is
+/// favorited/archived.
+class _BottomLeftOverlayIcon extends StatelessWidget {
+  final IconData icon;
+
+  /// Overriddable color. Default is a fixed white.
+  final Color color;
+
+  /// Overriddable default size. This is just the initial hint, the actual size
+  /// is dynamic based on the widget's width (so that we show smaller icons in
+  /// smaller thumbnails).
+  final double baseSize;
+
+  const _BottomLeftOverlayIcon(
+    this.icon, {
+    Key? key,
+    this.baseSize = 24,
+    this.color = Colors.white, // fixed
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return const Align(
-      alignment: Alignment.bottomLeft,
-      child: Padding(
-        padding: EdgeInsets.only(left: 4, bottom: 4),
-        child: Icon(
-          Icons.archive_outlined,
-          size: 20,
-          color: fixedStrokeMutedWhite,
-        ),
-      ),
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        double inset = 4;
+        double size = baseSize;
+
+        if (constraints.hasBoundedWidth) {
+          final w = constraints.maxWidth;
+          if (w > 120) {
+            size = 24;
+          } else if (w < 75) {
+            inset = 3;
+            size = 16;
+          }
+        }
+
+        return Container(
+          decoration: const BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.bottomLeft,
+              end: Alignment.center,
+              colors: [
+                Color.fromRGBO(0, 0, 0, 0.14),
+                Color.fromRGBO(0, 0, 0, 0.05),
+                Color.fromRGBO(0, 0, 0, 0.0),
+              ],
+              stops: [0, 0.6, 1],
+            ),
+          ),
+          child: Align(
+            alignment: Alignment.bottomLeft,
+            child: Padding(
+              padding: EdgeInsets.only(left: inset, bottom: inset),
+              child: Icon(
+                icon,
+                size: size,
+                color: color,
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+/// Icon overlay in the bottom right.
+///
+/// This usually indicates information about the file itself, e.g. whether it is
+/// a live photo, or the duration of the video.
+class _BottomRightOverlayIcon extends StatelessWidget {
+  final IconData icon;
+
+  /// Overriddable color. Default is a fixed white.
+  final Color color;
+
+  /// Overriddable default size. This is just the initial hint, the actual size
+  /// is dynamic based on the widget's width (so that we show smaller icons in
+  /// smaller thumbnails).
+  final double baseSize;
+
+  const _BottomRightOverlayIcon(
+    this.icon, {
+    Key? key,
+    this.baseSize = 24,
+    this.color = Colors.white, // fixed
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        double inset = 4;
+        double size = baseSize;
+
+        if (constraints.hasBoundedWidth) {
+          final w = constraints.maxWidth;
+          if (w > 120) {
+            size = 24;
+          } else if (w < 75) {
+            inset = 3;
+            size = 16;
+          }
+        }
+
+        return Container(
+          decoration: const BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.bottomRight,
+              end: Alignment.center,
+              colors: [
+                Color.fromRGBO(0, 0, 0, 0.14),
+                Color.fromRGBO(0, 0, 0, 0.05),
+                Color.fromRGBO(0, 0, 0, 0.0),
+              ],
+              stops: [0, 0.6, 1],
+            ),
+          ),
+          child: Align(
+            alignment: Alignment.bottomRight,
+            child: Padding(
+              padding: EdgeInsets.only(bottom: inset, right: inset),
+              child: Icon(
+                icon,
+                size: size,
+                color: color,
+              ),
+            ),
+          ),
+        );
+      },
     );
   }
 }