chore: Adjust design of space avatars and more
This commit is contained in:
parent
e5000b83dd
commit
6d5ceba885
8 changed files with 70 additions and 57 deletions
|
|
@ -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';
|
||||||
|
|
|
||||||
|
|
@ -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,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -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';
|
||||||
|
|
|
||||||
|
|
@ -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,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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'
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue