chore: Adjust design of space avatars and more

This commit is contained in:
Christian Kußowski 2026-02-18 09:02:19 +01:00
parent e5000b83dd
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 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';

View file

@ -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<Color>(
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),
),
),
],

View file

@ -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';

View file

@ -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<Color>(
Colors.orange,
)
: null,
),
),
),

View file

@ -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,

View file

@ -403,8 +403,11 @@ class _SpaceViewState extends State<SpaceView> {
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<SpaceView> {
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'

View file

@ -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,

View file

@ -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,
),
),
);