cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): Memories activity is now full screen, better image fit, adds progress indicator (#6793)

Browse Source 
* Made memories full screen

* Uses linear bar and fits the card better for memories

* Fixes pageview close button moving with pages

* Uses hooks instead of stateful components

* Adds ticks to the progress indicator

* Rounds the edges of the progress bar

* Fixes trailing comma analyze error

* Adds padding and hero to memories

* Fixes an issue with initial index set and adds hero / proper padding

* Fixes aspect ratio calculation

* Color

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
martyfuhry
2024-02-05 14:12:33 -05:00
committed by GitHub
parent f6b4024a21
commit c29976cd6f
5 changed files with 337 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/lib/modules/memories/ui/memory_epilogue.dart
+72 -64
View File
@@ -16,7 +16,7 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
late final _animationController = AnimationController(
vsync: this,
duration: const Duration(
seconds: 3,
seconds: 2,
),
)..repeat(
reverse: true,
@@ -29,7 +29,7 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
super.initState();
_animation = CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
curve: Curves.easeIn,
);
}
@@ -41,74 +41,82 @@ class _MemoryEpilogueState extends State<MemoryEpilogue>
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.check_circle_outline_sharp,
color: immichDarkThemePrimaryColor,
size: 64.0,
),
const SizedBox(height: 16.0),
Text(
'All caught up',
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
color: Colors.white,
return SafeArea(
child: Stack(
children: [
Positioned.fill(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.check_circle_outline_sharp,
color: immichDarkThemePrimaryColor,
size: 64.0,
),
const SizedBox(height: 16.0),
Text(
'All caught up',
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
color: Colors.white,
),
),
const SizedBox(height: 16.0),
Text(
'Check back tomorrow for more memories',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.white,
),
),
const SizedBox(height: 16.0),
TextButton(
onPressed: widget.onStartOver,
child: Text(
'Start Over',
style: context.textTheme.displayMedium?.copyWith(
color: immichDarkThemePrimaryColor,
),
),
const SizedBox(height: 16.0),
Text(
'Check back tomorrow for more memories',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.white,
),
),
const SizedBox(height: 16.0),
TextButton(
onPressed: widget.onStartOver,
child: Text(
'Start Over',
style: context.textTheme.displayMedium?.copyWith(
color: immichDarkThemePrimaryColor,
),
),
),
],
],
),
),
),
Column(
children: [
SizedBox(
height: 48,
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Transform.translate(
offset: Offset(0, 5 * _animationController.value),
child: child,
);
},
child: const Icon(
size: 32,
Icons.expand_less_sharp,
color: Colors.white,
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Padding(
padding: const EdgeInsets.only(bottom: 16.0),
child: Column(
children: [
SizedBox(
height: 48,
child: AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Transform.translate(
offset: Offset(0, 8 * _animationController.value),
child: child,
);
},
child: const Icon(
size: 32,
Icons.expand_less_sharp,
color: Colors.white,
),
),
),
Text(
'Swipe up to close',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.white,
),
),
],
),
),
Text(
'Swipe up to close',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.white,
),
),
],
),
],
),
],
),
);
}
}