From 6d5ceba8856e546759e878e9f5c065a44c34cbce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Ku=C3=9Fowski?= Date: Wed, 18 Feb 2026 09:02:19 +0100 Subject: [PATCH] chore: Adjust design of space avatars and more --- lib/config/app_config.dart | 1 + lib/pages/chat/chat_app_bar_title.dart | 17 +------- lib/pages/chat/chat_input_row.dart | 2 +- lib/pages/chat_list/chat_list_header.dart | 9 +---- lib/pages/chat_list/chat_list_item.dart | 47 +++++++++++++++-------- lib/pages/chat_list/space_view.dart | 24 ++++++++---- lib/widgets/avatar.dart | 14 ++++--- lib/widgets/navigation_rail.dart | 13 +++++-- 8 files changed, 70 insertions(+), 57 deletions(-) diff --git a/lib/config/app_config.dart b/lib/config/app_config.dart index c5a332a0e..e635e96cd 100644 --- a/lib/config/app_config.dart +++ b/lib/config/app_config.dart @@ -18,6 +18,7 @@ abstract class AppConfig { static const String pushNotificationsChannelId = 'fluffychat_push'; static const String pushNotificationsAppId = 'chat.fluffy.fluffychat'; static const double borderRadius = 18.0; + static const double spaceBorderRadius = 11.0; static const double columnWidth = 360.0; static const String website = 'https://fluffy.chat'; diff --git a/lib/pages/chat/chat_app_bar_title.dart b/lib/pages/chat/chat_app_bar_title.dart index cce3a0d88..cbda4bc3d 100644 --- a/lib/pages/chat/chat_app_bar_title.dart +++ b/lib/pages/chat/chat_app_bar_title.dart @@ -78,10 +78,7 @@ class ChatAppBarTitle extends StatelessWidget { builder: (context, presence) { final lastActiveTimestamp = presence?.lastActiveTimestamp; - final style = TextStyle( - fontSize: 12, - color: Theme.of(context).colorScheme.outline, - ); + final style = TextStyle(fontSize: 11); if (presence?.currentlyActive == true) { return Text( L10n.of(context).currentlyActive, @@ -108,23 +105,13 @@ class ChatAppBarTitle extends StatelessWidget { child: CircularProgressIndicator.adaptive( strokeWidth: 1, value: status.progress, - valueColor: status.error != null - ? AlwaysStoppedAnimation( - Theme.of(context).colorScheme.error, - ) - : null, ), ), const SizedBox(width: 4), Expanded( child: Text( status.calcLocalizedString(context), - style: TextStyle( - fontSize: 12, - color: status.error != null - ? Theme.of(context).colorScheme.error - : null, - ), + style: TextStyle(fontSize: 12), ), ), ], diff --git a/lib/pages/chat/chat_input_row.dart b/lib/pages/chat/chat_input_row.dart index 0fd59bcd1..90173d233 100644 --- a/lib/pages/chat/chat_input_row.dart +++ b/lib/pages/chat/chat_input_row.dart @@ -1,4 +1,3 @@ -import 'package:fluffychat/widgets/hover_builder.dart'; import 'package:flutter/material.dart'; import 'package:animations/animations.dart'; @@ -12,6 +11,7 @@ import 'package:fluffychat/pages/chat/recording_view_model.dart'; import 'package:fluffychat/utils/other_party_can_receive.dart'; import 'package:fluffychat/utils/platform_infos.dart'; import 'package:fluffychat/widgets/avatar.dart'; +import 'package:fluffychat/widgets/hover_builder.dart'; import 'package:fluffychat/widgets/matrix.dart'; import '../../config/themes.dart'; import 'chat.dart'; diff --git a/lib/pages/chat_list/chat_list_header.dart b/lib/pages/chat_list/chat_list_header.dart index b1b876fd4..fa1b9ff1e 100644 --- a/lib/pages/chat_list/chat_list_header.dart +++ b/lib/pages/chat_list/chat_list_header.dart @@ -59,9 +59,7 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget { ? L10n.of(context).searchChatsRooms : status.calcLocalizedString(context), hintStyle: TextStyle( - color: status.error != null - ? Colors.orange - : theme.colorScheme.onPrimaryContainer, + color: theme.colorScheme.onPrimaryContainer, fontWeight: FontWeight.normal, ), prefixIcon: hide @@ -87,11 +85,6 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget { child: CircularProgressIndicator.adaptive( strokeWidth: 2, value: status.progress, - valueColor: status.error != null - ? const AlwaysStoppedAnimation( - Colors.orange, - ) - : null, ), ), ), diff --git a/lib/pages/chat_list/chat_list_item.dart b/lib/pages/chat_list/chat_list_item.dart index fc9499cc3..02ed40cf7 100644 --- a/lib/pages/chat_list/chat_list_item.dart +++ b/lib/pages/chat_list/chat_list_item.dart @@ -92,14 +92,19 @@ class ChatListItem extends StatelessWidget { top: 0, left: 0, child: Avatar( - border: BorderSide( - width: 2, - color: - backgroundColor ?? - theme.colorScheme.surface, + shapeBorder: RoundedSuperellipseBorder( + side: BorderSide( + width: 2, + color: + backgroundColor ?? + theme.colorScheme.surface, + ), + borderRadius: BorderRadius.circular( + AppConfig.spaceBorderRadius * 0.75, + ), ), borderRadius: BorderRadius.circular( - AppConfig.borderRadius / 4, + AppConfig.spaceBorderRadius * 0.75, ), mxContent: space.avatar, size: Avatar.defaultSize * 0.75, @@ -111,22 +116,32 @@ class ChatListItem extends StatelessWidget { bottom: 0, right: 0, child: Avatar( - border: space == null + shapeBorder: space == null ? room.isSpace - ? BorderSide( - width: 1, - color: theme.dividerColor, + ? RoundedSuperellipseBorder( + side: BorderSide( + width: 1, + color: theme.dividerColor, + ), + borderRadius: BorderRadius.circular( + AppConfig.spaceBorderRadius, + ), ) : null - : BorderSide( - width: 2, - color: - backgroundColor ?? - theme.colorScheme.surface, + : RoundedRectangleBorder( + side: BorderSide( + width: 2, + color: + backgroundColor ?? + theme.colorScheme.surface, + ), + borderRadius: BorderRadius.circular( + Avatar.defaultSize, + ), ), borderRadius: room.isSpace ? BorderRadius.circular( - AppConfig.borderRadius / 4, + AppConfig.spaceBorderRadius, ) : null, mxContent: room.avatar, diff --git a/lib/pages/chat_list/space_view.dart b/lib/pages/chat_list/space_view.dart index 0295069a0..a22096003 100644 --- a/lib/pages/chat_list/space_view.dart +++ b/lib/pages/chat_list/space_view.dart @@ -403,8 +403,11 @@ class _SpaceViewState extends State { size: avatarSize, mxContent: room?.avatar, name: displayname, - border: BorderSide(width: 1, color: theme.dividerColor), - borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), + shapeBorder: RoundedSuperellipseBorder( + side: BorderSide(width: 1, color: theme.dividerColor), + borderRadius: BorderRadius.circular(AppConfig.spaceBorderRadius), + ), + borderRadius: BorderRadius.circular(AppConfig.spaceBorderRadius), ), title: Text( displayname, @@ -637,11 +640,18 @@ class _SpaceViewState extends State { textColor: item.name?.darkColor ?? theme.colorScheme.onSurface, - border: item.roomType == 'm.space' - ? BorderSide( - color: theme - .colorScheme - .surfaceContainerHighest, + shapeBorder: item.roomType == 'm.space' + ? RoundedSuperellipseBorder( + side: BorderSide( + color: theme + .colorScheme + .surfaceContainerHighest, + ), + borderRadius: + BorderRadius.circular( + AppConfig.borderRadius / + 4, + ), ) : null, borderRadius: item.roomType == 'm.space' diff --git a/lib/widgets/avatar.dart b/lib/widgets/avatar.dart index b1e9637c7..baf20ffb0 100644 --- a/lib/widgets/avatar.dart +++ b/lib/widgets/avatar.dart @@ -17,7 +17,7 @@ class Avatar extends StatelessWidget { final Color? presenceBackgroundColor; final BorderRadius? borderRadius; final IconData? icon; - final BorderSide? border; + final ShapeBorder? shapeBorder; final Color? backgroundColor; final Color? textColor; @@ -30,7 +30,7 @@ class Avatar extends StatelessWidget { this.presenceUserId, this.presenceBackgroundColor, this.borderRadius, - this.border, + this.shapeBorder, this.icon, this.backgroundColor, this.textColor, @@ -61,10 +61,12 @@ class Avatar extends StatelessWidget { color: theme.brightness == Brightness.light ? Colors.white : Colors.black, - shape: RoundedRectangleBorder( - borderRadius: borderRadius, - side: border ?? BorderSide.none, - ), + shape: + shapeBorder ?? + RoundedSuperellipseBorder( + borderRadius: borderRadius, + side: BorderSide.none, + ), clipBehavior: Clip.antiAlias, child: MxcImage( client: client, diff --git a/lib/widgets/navigation_rail.dart b/lib/widgets/navigation_rail.dart index a287f608c..b16717008 100644 --- a/lib/widgets/navigation_rail.dart +++ b/lib/widgets/navigation_rail.dart @@ -96,12 +96,17 @@ class SpacesNavigationRail extends StatelessWidget { icon: Avatar( mxContent: allSpaces[i].avatar, name: displayname, - border: BorderSide( - width: 1, - color: Theme.of(context).dividerColor, + shapeBorder: RoundedSuperellipseBorder( + side: BorderSide( + width: 1, + color: Theme.of(context).dividerColor, + ), + borderRadius: BorderRadius.circular( + AppConfig.spaceBorderRadius, + ), ), borderRadius: BorderRadius.circular( - AppConfig.borderRadius / 2, + AppConfig.spaceBorderRadius, ), ), );