GitLab
/
fluffychat
mirror of https://gitlab.com/famedly/fluffychat.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: Add border to avatars

This commit is contained in:
Christian Pauly 2022-07-07 12:14:28 +02:00
parent fc3ac6c8e7
commit 802ff0fa9d
2 changed files with 129 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
lib/pages/chat_list/stories_header.dart
View File

@ -122,31 +122,29 @@ class StoriesHeader extends StatelessWidget {
itemCount: stories.length, itemCount: stories.length,
itemBuilder: (context, i) { itemBuilder: (context, i) {
final room = stories[i]; final room = stories[i];
return Opacity( return FutureBuilder<Profile>(
opacity: room.hasPosts ? 1 : 0.75, future: room.getCreatorProfile(),
child: FutureBuilder<Profile>( builder: (context, snapshot) {
future: room.getCreatorProfile(), final userId = room.creatorId;
builder: (context, snapshot) { final displayname = snapshot.data?.displayName ??
final userId = room.creatorId; userId?.localpart ??
final displayname = snapshot.data?.displayName ?? 'Unknown';
userId?.localpart ?? final avatarUrl = snapshot.data?.avatarUrl;
'Unknown'; return _StoryButton(
final avatarUrl = snapshot.data?.avatarUrl; profile: Profile(
return _StoryButton( displayName: displayname,
profile: Profile( avatarUrl: avatarUrl,
displayName: displayname, userId: userId ?? 'Unknown',
avatarUrl: avatarUrl, ),
userId: userId ?? 'Unknown', hasPosts: room.hasPosts || room == ownStoryRoom,
), showEditFab: userId == client.userID,
showEditFab: userId == client.userID, unread: room.membership == Membership.invite ||
unread: room.membership == Membership.invite || room.hasNewMessages,
room.hasNewMessages, onPressed: () => _goToStoryAction(context, room.id),
onPressed: () => _goToStoryAction(context, room.id), onLongPressed: () =>
onLongPressed: () => _contextualActions(context, room),
_contextualActions(context, room), );
); });
}),
);
}, },
), ),
); );
@ -176,6 +174,7 @@ class _StoryButton extends StatelessWidget {
final Profile profile; final Profile profile;
final bool showEditFab; final bool showEditFab;
final bool unread; final bool unread;
final bool hasPosts;
final void Function() onPressed; final void Function() onPressed;
final void Function()? onLongPressed; final void Function()? onLongPressed;
@ -183,6 +182,7 @@ class _StoryButton extends StatelessWidget {
required this.profile, required this.profile,
required this.onPressed, required this.onPressed,
this.showEditFab = false, this.showEditFab = false,
this.hasPosts = true,
this.unread = false, this.unread = false,
this.onLongPressed, this.onLongPressed,
Key? key, Key? key,
@ -196,88 +196,91 @@ class _StoryButton extends StatelessWidget {
borderRadius: BorderRadius.circular(7), borderRadius: BorderRadius.circular(7),
onTap: onPressed, onTap: onPressed,
onLongPress: onLongPressed, onLongPress: onLongPressed,
child: Padding( child: Opacity(
padding: const EdgeInsets.symmetric(horizontal: 4), opacity: hasPosts ? 1 : 0.4,
child: Column( child: Padding(
children: [ padding: const EdgeInsets.symmetric(horizontal: 4),
const SizedBox(height: 8), child: Column(
Material( children: [
elevation: Theme.of(context).appBarTheme.elevation ?? 7, const SizedBox(height: 8),
shadowColor: Theme.of(context).appBarTheme.shadowColor, Material(
borderRadius: BorderRadius.circular(Avatar.defaultSize), shadowColor: Theme.of(context).appBarTheme.shadowColor,
child: Container( borderRadius: BorderRadius.circular(Avatar.defaultSize),
padding: const EdgeInsets.all(2), child: Container(
decoration: BoxDecoration( padding: const EdgeInsets.all(3),
gradient: unread decoration: BoxDecoration(
? const LinearGradient( gradient: unread
colors: [ ? const LinearGradient(
Colors.red, colors: [
Colors.purple, Colors.red,
Colors.orange, Colors.purple,
], Colors.orange,
begin: Alignment.topLeft, ],
end: Alignment.bottomRight, begin: Alignment.topLeft,
) end: Alignment.bottomRight,
: null, )
color: unread ? null : Theme.of(context).dividerColor, : null,
borderRadius: BorderRadius.circular(Avatar.defaultSize), color: unread ? null : Theme.of(context).dividerColor,
), borderRadius: BorderRadius.circular(Avatar.defaultSize),
child: Stack( ),
children: [ child: Stack(
Material( children: [
color: Theme.of(context).colorScheme.surface, Material(
borderRadius: BorderRadius.circular(Avatar.defaultSize), color: Theme.of(context).colorScheme.surface,
child: Padding( borderRadius:
padding: const EdgeInsets.all(2.0), BorderRadius.circular(Avatar.defaultSize),
child: CircleAvatar( child: Padding(
radius: 30, padding: const EdgeInsets.all(2.0),
backgroundColor: child: CircleAvatar(
Theme.of(context).colorScheme.surface, radius: 30,
foregroundColor: backgroundColor:
Theme.of(context).textTheme.bodyText1?.color, Theme.of(context).colorScheme.surface,
child: Avatar( foregroundColor:
mxContent: profile.avatarUrl, Theme.of(context).textTheme.bodyText1?.color,
name: profile.displayName, child: Avatar(
size: 100, mxContent: profile.avatarUrl,
fontSize: 24, name: profile.displayName,
), size: 100,
), fontSize: 24,
),
),
if (showEditFab)
Positioned(
right: 0,
bottom: 0,
child: SizedBox(
width: 24,
height: 24,
child: FloatingActionButton.small(
heroTag: null,
onPressed: () =>
VRouter.of(context).to('/stories/create'),
child: const Icon(
Icons.add_outlined,
size: 16,
), ),
), ),
), ),
), ),
], if (showEditFab)
Positioned(
right: 0,
bottom: 0,
child: SizedBox(
width: 24,
height: 24,
child: FloatingActionButton.small(
heroTag: null,
onPressed: () =>
VRouter.of(context).to('/stories/create'),
child: const Icon(
Icons.add_outlined,
size: 16,
),
),
),
),
],
),
), ),
), ),
), Center(
Center( child: Text(
child: Text( profile.displayName ?? '',
profile.displayName ?? '', maxLines: 1,
maxLines: 1, textAlign: TextAlign.center,
textAlign: TextAlign.center, style: TextStyle(
style: TextStyle( fontSize: 12,
fontSize: 12, fontWeight: unread ? FontWeight.bold : null,
fontWeight: unread ? FontWeight.bold : null, ),
), ),
), ),
), ],
], ),
), ),
), ),
), ),

47
lib/widgets/avatar.dart
View File

@ -57,27 +57,34 @@ class Avatar extends StatelessWidget {
return InkWell( return InkWell(
onTap: onTap, onTap: onTap,
borderRadius: borderRadius, borderRadius: borderRadius,
child: ClipRRect( child: Container(
borderRadius: borderRadius, decoration: BoxDecoration(
child: Container( border: Border.all(color: Theme.of(context).dividerColor),
width: size, borderRadius: borderRadius,
height: size, ),
color: child: ClipRRect(
noPic ? name?.lightColor : Theme.of(context).secondaryHeaderColor, borderRadius: borderRadius,
child: noPic child: Container(
? textWidget width: size,
: CachedNetworkImage( height: size,
imageUrl: src.toString(), color: noPic
fit: BoxFit.cover, ? name?.lightColor
width: size, : Theme.of(context).secondaryHeaderColor,
height: size, child: noPic
placeholder: (c, s) => textWidget, ? textWidget
errorWidget: (c, s, d) => Stack( : CachedNetworkImage(
children: [ imageUrl: src.toString(),
textWidget, fit: BoxFit.cover,
], width: size,
height: size,
placeholder: (c, s) => textWidget,
errorWidget: (c, s, d) => Stack(
children: [
textWidget,
],
),
), ),
), ),
), ),
), ),
); );