From 55fa86a6c84db9cb78659bf27d5986fb7c9fe4fe Mon Sep 17 00:00:00 2001 From: ashilkn Date: Fri, 20 Dec 2024 11:36:25 +0530 Subject: [PATCH 1/4] [mob][photos] Change seen and unseen memories UI state --- mobile/lib/theme/effects.dart | 4 + .../lib/ui/home/memories/memories_widget.dart | 2 +- .../ui/home/memories/memory_cover_widget.dart | 266 ++++++++++-------- 3 files changed, 154 insertions(+), 118 deletions(-) diff --git a/mobile/lib/theme/effects.dart b/mobile/lib/theme/effects.dart index 0eb38411a2..f97ec06723 100644 --- a/mobile/lib/theme/effects.dart +++ b/mobile/lib/theme/effects.dart @@ -12,6 +12,10 @@ List shadowFloatFaintLight = const [ BoxShadow(blurRadius: 10, color: Color.fromRGBO(0, 0, 0, 0.12)), ]; +List shadowFloatFaintestLight = const [ + BoxShadow(blurRadius: 1, color: Color.fromRGBO(0, 0, 0, 0.25)), +]; + List shadowMenuLight = const [ BoxShadow(blurRadius: 6, color: Color.fromRGBO(0, 0, 0, 0.16)), BoxShadow( diff --git a/mobile/lib/ui/home/memories/memories_widget.dart b/mobile/lib/ui/home/memories/memories_widget.dart index 7799bf1f59..faa5f33b3e 100644 --- a/mobile/lib/ui/home/memories/memories_widget.dart +++ b/mobile/lib/ui/home/memories/memories_widget.dart @@ -10,7 +10,7 @@ import "package:photos/ui/common/loading_widget.dart"; import 'package:photos/ui/home/memories/memory_cover_widget.dart'; class MemoriesWidget extends StatefulWidget { - const MemoriesWidget({Key? key}) : super(key: key); + const MemoriesWidget({super.key}); @override State createState() => _MemoriesWidgetState(); diff --git a/mobile/lib/ui/home/memories/memory_cover_widget.dart b/mobile/lib/ui/home/memories/memory_cover_widget.dart index 8c96be307e..37404558b6 100644 --- a/mobile/lib/ui/home/memories/memory_cover_widget.dart +++ b/mobile/lib/ui/home/memories/memory_cover_widget.dart @@ -1,6 +1,9 @@ import "package:flutter/material.dart"; +import "package:flutter/scheduler.dart"; import "package:photos/generated/l10n.dart"; import "package:photos/models/memory.dart"; +import "package:photos/theme/colors.dart"; +import "package:photos/theme/effects.dart"; import "package:photos/theme/ente_theme.dart"; import "package:photos/ui/home/memories/full_screen_memory.dart"; import "package:photos/ui/viewer/file/thumbnail_widget.dart"; @@ -78,137 +81,166 @@ class _MemoryCoverWidgetState extends State { height: widget.maxHeight * scale, width: widget.maxWidth * scale, decoration: BoxDecoration( - boxShadow: [ - BoxShadow( - color: isSeen - ? currentTheme == Brightness.dark - ? const Color.fromRGBO(104, 104, 104, 0.32) - : Colors.transparent - : const Color.fromRGBO(1, 222, 77, 0.11), - spreadRadius: MemoryCoverWidget.centerStrokeWidth / 2, - blurRadius: 0, - ), - const BoxShadow( - color: Color.fromRGBO(0, 0, 0, 0.13), - blurRadius: 3, - offset: Offset(1, 1), - ), - ], + boxShadow: SchedulerBinding.instance.platformDispatcher + .platformBrightness == + Brightness.dark + ? [ + const BoxShadow( + // color: strokeFainterDark, + color: strokeFaintDark, + spreadRadius: MemoryCoverWidget.centerStrokeWidth, + blurRadius: 0, + ), + ] + : [...shadowFloatFaintestLight], borderRadius: BorderRadius.circular(5), ), child: ClipRRect( borderRadius: BorderRadius.circular(5), - child: Stack( - fit: StackFit.expand, - alignment: Alignment.bottomCenter, - children: [ - child!, - Container( - decoration: BoxDecoration( - border: Border.all( - color: isSeen - ? currentTheme == Brightness.dark - ? const Color.fromRGBO( - 104, - 104, - 104, - 0.32, - ) - : Colors.transparent - : const Color.fromRGBO(1, 222, 77, 0.11), - width: MemoryCoverWidget.centerStrokeWidth / 2, + child: isSeen + ? ColorFiltered( + colorFilter: const ColorFilter.mode( + Color(0xFFBFBFBF), + BlendMode.hue, ), - borderRadius: BorderRadius.circular(5), - ), - ), - Container( - decoration: BoxDecoration( - gradient: LinearGradient( - colors: [ - Colors.black.withOpacity(0.5), - Colors.transparent, - ], - stops: const [0, 0.85], - begin: Alignment.bottomCenter, - end: Alignment.topCenter, - ), - ), - ), - isSeen - ? const SizedBox.shrink() - : Container( - decoration: const BoxDecoration( - gradient: LinearGradient( - stops: [0, 0.27, 0.4], - colors: [ - Color.fromRGBO(1, 222, 78, 0.293), - Color.fromRGBO(1, 222, 77, 0.07), - Colors.transparent, - ], - transform: GradientRotation(-1.1), + child: Stack( + fit: StackFit.expand, + alignment: Alignment.bottomCenter, + children: [ + child!, + Container( + decoration: BoxDecoration( + border: Border.all( + color: currentTheme == Brightness.dark + ? const Color.fromRGBO( + 104, + 104, + 104, + 0.32, + ) + : Colors.transparent, + width: + MemoryCoverWidget.centerStrokeWidth, + strokeAlign: + BorderSide.strokeAlignOutside, + ), + borderRadius: BorderRadius.circular(5), ), ), - ), - isSeen - ? const SizedBox.shrink() - : Stack( - fit: StackFit.expand, - alignment: Alignment.bottomCenter, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.end, - children: [ - Transform.scale( - scale: scale, - child: Container( - decoration: const BoxDecoration( - gradient: LinearGradient( - stops: [0, 0.1, 0.5, 0.9, 1], - colors: [ - Colors.transparent, - Color.fromRGBO(1, 222, 77, 0.1), - Color.fromRGBO(1, 222, 77, 1), - Color.fromRGBO(1, 222, 77, 0.1), - Colors.transparent, - ], - ), + Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + Colors.black.withOpacity(0.5), + Colors.transparent, + ], + stops: const [0, 1], + begin: Alignment.bottomCenter, + end: Alignment.topCenter, + ), + ), + ), + Positioned( + bottom: 8 * scale, + child: Transform.scale( + scale: scale, + child: SizedBox( + width: widget.maxWidth, + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 8.0, + ), + child: Hero( + tag: title, + child: Text( + title, + style: getEnteTextTheme(context) + .miniBold + .copyWith( + color: isSeen + ? textFaintDark + : Colors.white, + ), + textAlign: TextAlign.center, ), - height: 1 * scale, - width: (widget.maxWidth - 16) * scale, ), ), - ], - ), - ], - ), - Positioned( - bottom: 8 * scale, - child: Transform.scale( - scale: scale, - child: SizedBox( - width: widget.maxWidth, - child: Padding( - padding: const EdgeInsets.symmetric( - horizontal: 8.0, - ), - child: Hero( - tag: title, - child: Text( - title, - style: getEnteTextTheme(context) - .miniBold - .copyWith( - color: Colors.white, - ), + ), ), ), - ), + ], ), + ) + : Stack( + fit: StackFit.expand, + alignment: Alignment.bottomCenter, + children: [ + child!, + Container( + decoration: BoxDecoration( + border: Border.all( + color: isSeen + ? currentTheme == Brightness.dark + ? const Color.fromRGBO( + 104, + 104, + 104, + 0.32, + ) + : Colors.transparent + : const Color.fromRGBO( + 1, + 222, + 77, + 0.11, + ), + width: MemoryCoverWidget.centerStrokeWidth, + strokeAlign: BorderSide.strokeAlignOutside, + ), + borderRadius: BorderRadius.circular(5), + ), + ), + Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [ + Colors.black.withOpacity(0.5), + Colors.transparent, + ], + stops: const [0, 1], + begin: Alignment.bottomCenter, + end: Alignment.topCenter, + ), + ), + ), + Positioned( + bottom: 8 * scale, + child: Transform.scale( + scale: scale, + child: SizedBox( + width: widget.maxWidth, + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 8.0, + ), + child: Hero( + tag: title, + child: Text( + title, + style: getEnteTextTheme(context) + .miniBold + .copyWith( + color: Colors.white, + ), + textAlign: TextAlign.center, + ), + ), + ), + ), + ), + ), + ], ), - ), - ], - ), ), ), ], From 2ec8ae34b897dc8d67635a8ffa6d71fbdac56f90 Mon Sep 17 00:00:00 2001 From: ashilkn Date: Fri, 20 Dec 2024 12:33:17 +0530 Subject: [PATCH 2/4] [mob][photos] Remove unnecessary widget + minor UI tweak on memory widget --- .../lib/ui/home/memories/memories_widget.dart | 2 +- .../ui/home/memories/memory_cover_widget.dart | 51 ++----------------- 2 files changed, 4 insertions(+), 49 deletions(-) diff --git a/mobile/lib/ui/home/memories/memories_widget.dart b/mobile/lib/ui/home/memories/memories_widget.dart index faa5f33b3e..fbeb648ab6 100644 --- a/mobile/lib/ui/home/memories/memories_widget.dart +++ b/mobile/lib/ui/home/memories/memories_widget.dart @@ -89,7 +89,7 @@ class _MemoriesWidgetState extends State { final collatedMemories = _collateMemories(memories); return SizedBox( - height: _maxHeight, + height: _maxHeight + MemoryCoverWidget.outerStrokeWidth * 2, child: ListView.builder( physics: const AlwaysScrollableScrollPhysics( parent: BouncingScrollPhysics(), diff --git a/mobile/lib/ui/home/memories/memory_cover_widget.dart b/mobile/lib/ui/home/memories/memory_cover_widget.dart index 37404558b6..80579c427e 100644 --- a/mobile/lib/ui/home/memories/memory_cover_widget.dart +++ b/mobile/lib/ui/home/memories/memory_cover_widget.dart @@ -15,7 +15,7 @@ class MemoryCoverWidget extends StatefulWidget { final double offsetOfItem; final double maxHeight; final double maxWidth; - static const centerStrokeWidth = 1.0; + static const outerStrokeWidth = 1.0; static const aspectRatio = 0.68; static const horizontalPadding = 2.5; final double maxScaleOffsetX; @@ -48,7 +48,6 @@ class _MemoryCoverWidgetState extends State { final title = _getTitle(widget.memories[index]); final memory = widget.memories[index]; final isSeen = memory.isSeen(); - final currentTheme = MediaQuery.platformBrightnessOf(context); return AnimatedBuilder( animation: widget.controller, @@ -86,9 +85,8 @@ class _MemoryCoverWidgetState extends State { Brightness.dark ? [ const BoxShadow( - // color: strokeFainterDark, - color: strokeFaintDark, - spreadRadius: MemoryCoverWidget.centerStrokeWidth, + color: strokeFainterDark, + spreadRadius: MemoryCoverWidget.outerStrokeWidth, blurRadius: 0, ), ] @@ -108,25 +106,6 @@ class _MemoryCoverWidgetState extends State { alignment: Alignment.bottomCenter, children: [ child!, - Container( - decoration: BoxDecoration( - border: Border.all( - color: currentTheme == Brightness.dark - ? const Color.fromRGBO( - 104, - 104, - 104, - 0.32, - ) - : Colors.transparent, - width: - MemoryCoverWidget.centerStrokeWidth, - strokeAlign: - BorderSide.strokeAlignOutside, - ), - borderRadius: BorderRadius.circular(5), - ), - ), Container( decoration: BoxDecoration( gradient: LinearGradient( @@ -176,30 +155,6 @@ class _MemoryCoverWidgetState extends State { alignment: Alignment.bottomCenter, children: [ child!, - Container( - decoration: BoxDecoration( - border: Border.all( - color: isSeen - ? currentTheme == Brightness.dark - ? const Color.fromRGBO( - 104, - 104, - 104, - 0.32, - ) - : Colors.transparent - : const Color.fromRGBO( - 1, - 222, - 77, - 0.11, - ), - width: MemoryCoverWidget.centerStrokeWidth, - strokeAlign: BorderSide.strokeAlignOutside, - ), - borderRadius: BorderRadius.circular(5), - ), - ), Container( decoration: BoxDecoration( gradient: LinearGradient( From 09fe2c6f7eac24bfc19620e977426a2748fd7b59 Mon Sep 17 00:00:00 2001 From: ashilkn Date: Fri, 20 Dec 2024 12:50:26 +0530 Subject: [PATCH 3/4] [mob][photos] Minor perf improvement --- mobile/lib/ui/home/memories/memory_cover_widget.dart | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/mobile/lib/ui/home/memories/memory_cover_widget.dart b/mobile/lib/ui/home/memories/memory_cover_widget.dart index 80579c427e..50410c14ee 100644 --- a/mobile/lib/ui/home/memories/memory_cover_widget.dart +++ b/mobile/lib/ui/home/memories/memory_cover_widget.dart @@ -48,6 +48,8 @@ class _MemoryCoverWidgetState extends State { final title = _getTitle(widget.memories[index]); final memory = widget.memories[index]; final isSeen = memory.isSeen(); + final brightness = + SchedulerBinding.instance.platformDispatcher.platformBrightness; return AnimatedBuilder( animation: widget.controller, @@ -80,9 +82,7 @@ class _MemoryCoverWidgetState extends State { height: widget.maxHeight * scale, width: widget.maxWidth * scale, decoration: BoxDecoration( - boxShadow: SchedulerBinding.instance.platformDispatcher - .platformBrightness == - Brightness.dark + boxShadow: brightness == Brightness.dark ? [ const BoxShadow( color: strokeFainterDark, From c453827cc8506d73feb16c571c8795f71d6c86ec Mon Sep 17 00:00:00 2001 From: ashilkn Date: Fri, 20 Dec 2024 12:57:21 +0530 Subject: [PATCH 4/4] [mob][photos] Make text alignment perfect --- .../ui/home/memories/memory_cover_widget.dart | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/mobile/lib/ui/home/memories/memory_cover_widget.dart b/mobile/lib/ui/home/memories/memory_cover_widget.dart index 50410c14ee..0dfc9adf84 100644 --- a/mobile/lib/ui/home/memories/memory_cover_widget.dart +++ b/mobile/lib/ui/home/memories/memory_cover_widget.dart @@ -131,16 +131,18 @@ class _MemoryCoverWidgetState extends State { ), child: Hero( tag: title, - child: Text( - title, - style: getEnteTextTheme(context) - .miniBold - .copyWith( - color: isSeen - ? textFaintDark - : Colors.white, - ), - textAlign: TextAlign.center, + child: Center( + child: Text( + title, + style: getEnteTextTheme(context) + .miniBold + .copyWith( + color: isSeen + ? textFaintDark + : Colors.white, + ), + textAlign: TextAlign.left, + ), ), ), ), @@ -180,14 +182,16 @@ class _MemoryCoverWidgetState extends State { ), child: Hero( tag: title, - child: Text( - title, - style: getEnteTextTheme(context) - .miniBold - .copyWith( - color: Colors.white, - ), - textAlign: TextAlign.center, + child: Center( + child: Text( + title, + style: getEnteTextTheme(context) + .miniBold + .copyWith( + color: Colors.white, + ), + textAlign: TextAlign.left, + ), ), ), ),