helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(mobile): Uses profile photo for user avatar drawer (#1738)

Browse source 
* uses profile photo for user avatar drawer

* Added some styling to the profile picture

* made the whole profile photo a gesture detector

* fixed image updating

* invalidates cachednetworkimage when new profile photo is uploaded

* Revert "invalidates cachednetworkimage when new profile photo is uploaded"

This reverts commit 17c83be556.

* Add fadeInImage to loading user profile

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
martyfuhry 2023-02-12 22:32:16 -05:00 • committed by GitHub
parent caac3bfc95
commit 12a6a7d95a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 153 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

62
mobile/lib/modules/home/ui/profile_drawer/profile_drawer_header.dart
View file

@ -10,6 +10,7 @@ import 'package:immich_mobile/modules/home/providers/upload_profile_image.provid
import 'package:immich_mobile/modules/login/models/authentication_state.model.dart';
import 'package:immich_mobile/modules/login/providers/authentication.provider.dart';
import 'package:immich_mobile/shared/ui/immich_loading_indicator.dart';
import 'package:immich_mobile/shared/ui/transparent_image.dart';
class ProfileDrawerHeader extends HookConsumerWidget {
const ProfileDrawerHeader({
@ -26,6 +27,23 @@ class ProfileDrawerHeader extends HookConsumerWidget {
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
buildUserProfileImage() {
var userImage = CircleAvatar(
backgroundColor: Theme.of(context).primaryColor,
radius: 35,
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
child: FadeInImage.memoryNetwork(
fit: BoxFit.cover,
placeholder: kTransparentImage,
width: 66,
height: 66,
image:
'$endpoint/user/profile-image/${authState.userId}?d=${dummy++}',
fadeInDuration: const Duration(milliseconds: 200),
),
),
);
if (authState.profileImagePath.isEmpty) {
return const CircleAvatar(
radius: 35,
@ -36,16 +54,10 @@ class ProfileDrawerHeader extends HookConsumerWidget {
if (uploadProfileImageStatus == UploadProfileStatus.idle) {
if (authState.profileImagePath.isNotEmpty) {
return CircleAvatar(
radius: 35,
backgroundImage: NetworkImage(
'$endpoint/user/profile-image/${authState.userId}?d=${dummy++}',
),
backgroundColor: Colors.transparent,
);
return userImage;
} else {
return const CircleAvatar(
radius: 35,
radius: 33,
backgroundImage: AssetImage('assets/immich-logo-no-outline.png'),
backgroundColor: Colors.transparent,
);
@ -53,13 +65,7 @@ class ProfileDrawerHeader extends HookConsumerWidget {
}
if (uploadProfileImageStatus == UploadProfileStatus.success) {
return CircleAvatar(
radius: 35,
backgroundImage: NetworkImage(
'$endpoint/user/profile-image/${authState.userId}?d=${dummy++}',
),
backgroundColor: Colors.transparent,
);
return userImage;
}
if (uploadProfileImageStatus == UploadProfileStatus.failure) {
@ -98,7 +104,7 @@ class ProfileDrawerHeader extends HookConsumerWidget {
useEffect(
() {
buildUserProfileImage();
// buildUserProfileImage();
return null;
},
[],
@ -126,17 +132,17 @@ class ProfileDrawerHeader extends HookConsumerWidget {
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
clipBehavior: Clip.none,
children: [
buildUserProfileImage(),
Positioned(
bottom: 0,
right: -5,
child: GestureDetector(
onTap: pickUserProfileImage,
GestureDetector(
onTap: pickUserProfileImage,
child: Stack(
clipBehavior: Clip.none,
children: [
buildUserProfileImage(),
Positioned(
bottom: 0,
right: -5,
child: Material(
color: Colors.grey[100],
color: isDarkMode ? Colors.grey[700] : Colors.grey[100],
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
@ -151,8 +157,8 @@ class ProfileDrawerHeader extends HookConsumerWidget {
),
),
),
),
],
],
),
),
Text(
"${authState.firstName} ${authState.lastName}",