chore: Adjust design of space avatars and more

This commit is contained in:
Christian Kußowski 2026-02-18 09:02:19 +01:00
commit 6d5ceba885
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
8 changed files with 70 additions and 57 deletions

View file

@ -18,6 +18,7 @@ abstract class AppConfig {
static const String pushNotificationsChannelId = 'fluffychat_push'; static const String pushNotificationsChannelId = 'fluffychat_push';
static const String pushNotificationsAppId = 'chat.fluffy.fluffychat'; static const String pushNotificationsAppId = 'chat.fluffy.fluffychat';
static const double borderRadius = 18.0; static const double borderRadius = 18.0;
static const double spaceBorderRadius = 11.0;
static const double columnWidth = 360.0; static const double columnWidth = 360.0;
static const String website = 'https://fluffy.chat'; static const String website = 'https://fluffy.chat';

View file

@ -78,10 +78,7 @@ class ChatAppBarTitle extends StatelessWidget {
builder: (context, presence) { builder: (context, presence) {
final lastActiveTimestamp = final lastActiveTimestamp =
presence?.lastActiveTimestamp; presence?.lastActiveTimestamp;
final style = TextStyle( final style = TextStyle(fontSize: 11);
fontSize: 12,
color: Theme.of(context).colorScheme.outline,
);
if (presence?.currentlyActive == true) { if (presence?.currentlyActive == true) {
return Text( return Text(
L10n.of(context).currentlyActive, L10n.of(context).currentlyActive,
@ -108,23 +105,13 @@ class ChatAppBarTitle extends StatelessWidget {
child: CircularProgressIndicator.adaptive( child: CircularProgressIndicator.adaptive(
strokeWidth: 1, strokeWidth: 1,
value: status.progress, value: status.progress,
valueColor: status.error != null
? AlwaysStoppedAnimation<Color>(
Theme.of(context).colorScheme.error,
)
: null,
), ),
), ),
const SizedBox(width: 4), const SizedBox(width: 4),
Expanded( Expanded(
child: Text( child: Text(
status.calcLocalizedString(context), status.calcLocalizedString(context),
style: TextStyle( style: TextStyle(fontSize: 12),
fontSize: 12,
color: status.error != null
? Theme.of(context).colorScheme.error
: null,
),
), ),
), ),
], ],

View file

@ -1,4 +1,3 @@
import 'package:fluffychat/widgets/hover_builder.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:animations/animations.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/other_party_can_receive.dart';
import 'package:fluffychat/utils/platform_infos.dart'; import 'package:fluffychat/utils/platform_infos.dart';
import 'package:fluffychat/widgets/avatar.dart'; import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/hover_builder.dart';
import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/matrix.dart';
import '../../config/themes.dart'; import '../../config/themes.dart';
import 'chat.dart'; import 'chat.dart';

View file

@ -59,9 +59,7 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget {
? L10n.of(context).searchChatsRooms ? L10n.of(context).searchChatsRooms
: status.calcLocalizedString(context), : status.calcLocalizedString(context),
hintStyle: TextStyle( hintStyle: TextStyle(
color: status.error != null color: theme.colorScheme.onPrimaryContainer,
? Colors.orange
: theme.colorScheme.onPrimaryContainer,
fontWeight: FontWeight.normal, fontWeight: FontWeight.normal,
), ),
prefixIcon: hide prefixIcon: hide
@ -87,11 +85,6 @@ class ChatListHeader extends StatelessWidget implements PreferredSizeWidget {
child: CircularProgressIndicator.adaptive( child: CircularProgressIndicator.adaptive(
strokeWidth: 2, strokeWidth: 2,
value: status.progress, value: status.progress,
valueColor: status.error != null
? const AlwaysStoppedAnimation<Color>(
Colors.orange,
)
: null,
), ),
), ),
), ),

View file

@ -92,14 +92,19 @@ class ChatListItem extends StatelessWidget {
top: 0, top: 0,
left: 0, left: 0,
child: Avatar( child: Avatar(
border: BorderSide( shapeBorder: RoundedSuperellipseBorder(
width: 2, side: BorderSide(
color: width: 2,
backgroundColor ?? color:
theme.colorScheme.surface, backgroundColor ??
theme.colorScheme.surface,
),
borderRadius: BorderRadius.circular(
AppConfig.spaceBorderRadius * 0.75,
),
), ),
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
AppConfig.borderRadius / 4, AppConfig.spaceBorderRadius * 0.75,
), ),
mxContent: space.avatar, mxContent: space.avatar,
size: Avatar.defaultSize * 0.75, size: Avatar.defaultSize * 0.75,
@ -111,22 +116,32 @@ class ChatListItem extends StatelessWidget {
bottom: 0, bottom: 0,
right: 0, right: 0,
child: Avatar( child: Avatar(
border: space == null shapeBorder: space == null
? room.isSpace ? room.isSpace
? BorderSide( ? RoundedSuperellipseBorder(
width: 1, side: BorderSide(
color: theme.dividerColor, width: 1,
color: theme.dividerColor,
),
borderRadius: BorderRadius.circular(
AppConfig.spaceBorderRadius,
),
) )
: null : null
: BorderSide( : RoundedRectangleBorder(
width: 2, side: BorderSide(
color: width: 2,
backgroundColor ?? color:
theme.colorScheme.surface, backgroundColor ??
theme.colorScheme.surface,
),
borderRadius: BorderRadius.circular(
Avatar.defaultSize,
),
), ),
borderRadius: room.isSpace borderRadius: room.isSpace
? BorderRadius.circular( ? BorderRadius.circular(
AppConfig.borderRadius / 4, AppConfig.spaceBorderRadius,
) )
: null, : null,
mxContent: room.avatar, mxContent: room.avatar,

View file

@ -403,8 +403,11 @@ class _SpaceViewState extends State<SpaceView> {
size: avatarSize, size: avatarSize,
mxContent: room?.avatar, mxContent: room?.avatar,
name: displayname, name: displayname,
border: BorderSide(width: 1, color: theme.dividerColor), shapeBorder: RoundedSuperellipseBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius / 2), side: BorderSide(width: 1, color: theme.dividerColor),
borderRadius: BorderRadius.circular(AppConfig.spaceBorderRadius),
),
borderRadius: BorderRadius.circular(AppConfig.spaceBorderRadius),
), ),
title: Text( title: Text(
displayname, displayname,
@ -637,11 +640,18 @@ class _SpaceViewState extends State<SpaceView> {
textColor: textColor:
item.name?.darkColor ?? item.name?.darkColor ??
theme.colorScheme.onSurface, theme.colorScheme.onSurface,
border: item.roomType == 'm.space' shapeBorder: item.roomType == 'm.space'
? BorderSide( ? RoundedSuperellipseBorder(
color: theme side: BorderSide(
.colorScheme color: theme
.surfaceContainerHighest, .colorScheme
.surfaceContainerHighest,
),
borderRadius:
BorderRadius.circular(
AppConfig.borderRadius /
4,
),
) )
: null, : null,
borderRadius: item.roomType == 'm.space' borderRadius: item.roomType == 'm.space'

View file

@ -17,7 +17,7 @@ class Avatar extends StatelessWidget {
final Color? presenceBackgroundColor; final Color? presenceBackgroundColor;
final BorderRadius? borderRadius; final BorderRadius? borderRadius;
final IconData? icon; final IconData? icon;
final BorderSide? border; final ShapeBorder? shapeBorder;
final Color? backgroundColor; final Color? backgroundColor;
final Color? textColor; final Color? textColor;
@ -30,7 +30,7 @@ class Avatar extends StatelessWidget {
this.presenceUserId, this.presenceUserId,
this.presenceBackgroundColor, this.presenceBackgroundColor,
this.borderRadius, this.borderRadius,
this.border, this.shapeBorder,
this.icon, this.icon,
this.backgroundColor, this.backgroundColor,
this.textColor, this.textColor,
@ -61,10 +61,12 @@ class Avatar extends StatelessWidget {
color: theme.brightness == Brightness.light color: theme.brightness == Brightness.light
? Colors.white ? Colors.white
: Colors.black, : Colors.black,
shape: RoundedRectangleBorder( shape:
borderRadius: borderRadius, shapeBorder ??
side: border ?? BorderSide.none, RoundedSuperellipseBorder(
), borderRadius: borderRadius,
side: BorderSide.none,
),
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
child: MxcImage( child: MxcImage(
client: client, client: client,

View file

@ -96,12 +96,17 @@ class SpacesNavigationRail extends StatelessWidget {
icon: Avatar( icon: Avatar(
mxContent: allSpaces[i].avatar, mxContent: allSpaces[i].avatar,
name: displayname, name: displayname,
border: BorderSide( shapeBorder: RoundedSuperellipseBorder(
width: 1, side: BorderSide(
color: Theme.of(context).dividerColor, width: 1,
color: Theme.of(context).dividerColor,
),
borderRadius: BorderRadius.circular(
AppConfig.spaceBorderRadius,
),
), ),
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
AppConfig.borderRadius / 2, AppConfig.spaceBorderRadius,
), ),
), ),
); );