Skip to content

Commit

Permalink
TW-700: Update and refactor for chat list item
Browse files Browse the repository at this point in the history
  • Loading branch information
@nqhhdev
nqhhdev committed Oct 5, 2023
1 parent 72216cd commit 78a1634
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 74 deletions.
5 changes: 3 additions & 2 deletions lib/pages/chat_list/chat_list_item.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,8 @@ class ChatListItem extends StatelessWidget with ChatListItemMixin {

bool get _isGroupChat => !room.isDirectChat;

bool get _isMaskAsUnread => room.markedUnread;
bool get _isMaskAsUnread =>
room.isUnread || room.membership == Membership.invite;

@override
Widget build(BuildContext context) {
Expand Down Expand Up @@ -134,7 +135,7 @@ class ChatListItem extends StatelessWidget with ChatListItemMixin {
),
child: Icon(
Icons.group,
size: ChatListItemStyle.readIconSize,
size: ChatListItemStyle.groupIconSize,
color: _isMaskAsUnread
? ChatListItemStyle.unreadMessageOfGroupColor
: LinagoraRefColors.material().tertiary[30],
Expand Down
4 changes: 3 additions & 1 deletion lib/pages/chat_list/chat_list_item_style.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ class ChatListItemStyle {

static const double readIconSize = 20;

static const double groupIconSize = 16;

static const double mentionIconWidth = 20;

static const Color readMessageColor = Color(0xFF787579);
Expand Down Expand Up @@ -34,7 +36,7 @@ class ChatListItemStyle {
EdgeInsetsDirectional.only(end: 8);

static const EdgeInsetsDirectional paddingIconGroup =
EdgeInsetsDirectional.all(2);
EdgeInsetsDirectional.all(4);

static const EdgeInsetsDirectional paddingBody = EdgeInsetsDirectional.all(8);

Expand Down
31 changes: 3 additions & 28 deletions lib/pages/chat_list/chat_list_item_subtitle.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ class ChatListItemSubtitle extends StatelessWidget with ChatListItemMixin {
Widget build(BuildContext context) {
final typingText = room.getLocalizedTypingText(context);
final unread = room.isUnread || room.membership == Membership.invite;
final ownLastMessage =
room.lastEvent?.senderId == Matrix.of(context).client.userID;
final isGroup = !room.isDirectChat;
final unreadBadgeSize = ChatListItemStyle.unreadBadgeSize(
unread,
Expand All @@ -34,16 +32,6 @@ class ChatListItemSubtitle extends StatelessWidget with ChatListItemMixin {
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
if (typingText.isEmpty &&
ownLastMessage &&
room.lastEvent!.status.isSending) ...[
const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator.adaptive(strokeWidth: 2),
),
const SizedBox(width: 4),
],
Expanded(
child: typingText.isNotEmpty
? Column(
Expand All @@ -55,22 +43,9 @@ class ChatListItemSubtitle extends StatelessWidget with ChatListItemMixin {
],
)
: (isGroup
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: lastSenderWidget(room, isGroup, unread),
),
const SizedBox(height: 2),
Flexible(
child: textContentWidget(
room,
context,
isGroup,
unread,
),
)
],
? chatListItemSubtitleForGroup(
room: room,
unread: unread,
)
: textContentWidget(room, context, isGroup, unread)),
),
Expand Down
79 changes: 52 additions & 27 deletions lib/pages/chat_list/chat_list_item_title.dart
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pages/chat_list/chat_list_item_title_style.dart';
import 'package:fluffychat/presentation/mixins/chat_list_item_mixin.dart';
import 'package:fluffychat/pages/chat_list/chat_list_item_style.dart';
import 'package:fluffychat/utils/date_time_extension.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
import 'package:fluffychat/utils/room_status_extension.dart';
import 'package:fluffychat/widgets/matrix.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:linagora_design_flutter/colors/linagora_ref_colors.dart';
import 'package:linagora_design_flutter/linagora_design_flutter.dart';
import 'package:matrix/matrix.dart';

class ChatListItemTitle extends StatelessWidget with ChatListItemMixin {
Expand All @@ -14,11 +18,14 @@ class ChatListItemTitle extends StatelessWidget with ChatListItemMixin {

@override
Widget build(BuildContext context) {
final displayname = room.getLocalizedDisplayname(
final displayName = room.getLocalizedDisplayname(
MatrixLocals(L10n.of(context)!),
);
final typingText = room.getLocalizedTypingText(context);
final isMuted = room.pushRuleState != PushRuleState.notify;
final unread = room.isUnread || room.membership == Membership.invite;
final ownLastMessage =
room.lastEvent?.senderId == Matrix.of(context).client.userID;
return Row(
children: <Widget>[
Expanded(
Expand All @@ -29,27 +36,32 @@ class ChatListItemTitle extends StatelessWidget with ChatListItemMixin {
children: [
Flexible(
child: Text(
displayname,
displayName,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: Theme.of(context).textTheme.titleMedium?.merge(
TextStyle(
overflow: TextOverflow.ellipsis,
letterSpacing:
ChatListItemStyle.letterSpaceDisplayName,
color: unread
? Theme.of(context)
.colorScheme
.onSurfaceVariant
: ChatListItemStyle.readMessageColor,
),
),
style: unread
? LinagoraTextStyle.material()
.bodyLarge1
.merge(
FluffyThemes.fallbackTextStyle,
)
.copyWith(
color: Theme.of(context).colorScheme.onSurface,
)
: LinagoraTextStyle.material()
.bodyLarge2
.merge(
FluffyThemes.fallbackTextStyle,
)
.copyWith(
color: Theme.of(context).colorScheme.onSurface,
),
),
),
if (room.isFavourite)
Padding(
padding: const EdgeInsets.only(left: 10),
padding: ChatListItemTitleStyle.paddingLeftIcon,
child: Icon(
Icons.push_pin_outlined,
size: ChatListItemStyle.readIconSize,
Expand All @@ -58,7 +70,7 @@ class ChatListItemTitle extends StatelessWidget with ChatListItemMixin {
),
if (isMuted)
Padding(
padding: const EdgeInsets.only(left: 10),
padding: ChatListItemTitleStyle.paddingLeftIcon,
child: Icon(
Icons.volume_off_outlined,
size: ChatListItemStyle.readIconSize,
Expand All @@ -71,17 +83,30 @@ class ChatListItemTitle extends StatelessWidget with ChatListItemMixin {
),
),
Padding(
padding: const EdgeInsets.only(left: 4.0),
child: Text(
room.timeCreated.localizedTimeShort(context),
style: Theme.of(context).textTheme.labelSmall?.merge(
TextStyle(
letterSpacing: 0.5,
color: unread
? Theme.of(context).colorScheme.onSurface
: LinagoraRefColors.material().neutral[50],
),
padding: ChatListItemTitleStyle.paddingLeftIcon,
child: Row(
children: [
if (typingText.isEmpty &&
ownLastMessage &&
room.lastEvent!.status.isSending) ...[
Icon(
Icons.schedule,
color: LinagoraRefColors.material().neutral[50],
size: ChatListItemTitleStyle.iconScheduleSize,
),
],
Padding(
padding: ChatListItemTitleStyle.paddingLeftIcon,
child: Text(
room.timeCreated.localizedTimeShort(context),
style: Theme.of(context).textTheme.labelMedium?.copyWith(
color: unread
? Theme.of(context).colorScheme.onSurface
: LinagoraRefColors.material().neutral[50],
),
),
),
],
),
)
],
Expand Down
10 changes: 10 additions & 0 deletions lib/pages/chat_list/chat_list_item_title_style.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import 'package:flutter/material.dart';

class ChatListItemTitleStyle {
static const double iconScheduleSize = 16;

static const EdgeInsetsDirectional paddingLeftIcon =
EdgeInsetsDirectional.only(
start: 4,
);
}
120 changes: 104 additions & 16 deletions lib/presentation/mixins/chat_list_item_mixin.dart
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import 'package:fluffychat/pages/chat_list/chat_list_item_style.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/matrix_locals.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:linagora_design_flutter/colors/linagora_ref_colors.dart';
import 'package:linagora_design_flutter/linagora_design_flutter.dart';
import 'package:matrix/matrix.dart';

mixin ChatListItemMixin {
Expand Down Expand Up @@ -37,12 +37,23 @@ mixin ChatListItemMixin {
softWrap: false,
maxLines: isGroup ? 1 : 2,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
letterSpacing: 0.4,
color: unread
? Theme.of(context).colorScheme.onSurface
: LinagoraRefColors.material().neutral[50],
),
style: unread
? LinagoraTextStyle.material()
.bodyMedium2
.merge(
FluffyThemes.fallbackTextStyle,
)
.copyWith(
color: Theme.of(context).colorScheme.onSurface,
)
: LinagoraTextStyle.material()
.bodyMedium3
.merge(
FluffyThemes.fallbackTextStyle,
)
.copyWith(
color: Theme.of(context).colorScheme.onSurface,
),
);
},
);
Expand Down Expand Up @@ -85,14 +96,23 @@ mixin ChatListItemMixin {
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: Theme.of(context).textTheme.labelLarge?.merge(
TextStyle(
overflow: TextOverflow.ellipsis,
color: unread
? Theme.of(context).colorScheme.onSurface
: ChatListItemStyle.readMessageColor,
),
),
style: unread
? LinagoraTextStyle.material()
.bodyMedium2
.merge(
FluffyThemes.fallbackTextStyle,
)
.copyWith(
color: Theme.of(context).colorScheme.onSurface,
)
: LinagoraTextStyle.material()
.bodyMedium3
.merge(
FluffyThemes.fallbackTextStyle,
)
.copyWith(
color: Theme.of(context).colorScheme.onSurface,
),
);
},
),
Expand All @@ -102,4 +122,72 @@ mixin ChatListItemMixin {
)
: const SizedBox.shrink();
}

Widget chatListItemSubtitleForGroup({
required Room room,
required bool unread,
}) {
return FutureBuilder<User?>(
future: room.lastEvent?.fetchSenderUser(),
builder: (context, snapshot) {
if (snapshot.data == null) return const SizedBox.shrink();
return RichText(
text: TextSpan(
text: "${snapshot.data!.calcDisplayname()}: ",
style: unread
? LinagoraTextStyle.material()
.bodyMedium2
.merge(
FluffyThemes.fallbackTextStyle,
)
.copyWith(
color: Theme.of(context).colorScheme.onSurface,
)
: LinagoraTextStyle.material()
.bodyMedium3
.merge(
FluffyThemes.fallbackTextStyle,
)
.copyWith(
color: Theme.of(context).colorScheme.onSurface,
),
children: [
TextSpan(
text: room.membership == Membership.invite
? L10n.of(context)!.youAreInvitedToThisChat
: room.lastEvent?.calcLocalizedBodyFallback(
MatrixLocals(L10n.of(context)!),
hideReply: true,
hideEdit: true,
plaintextBody: true,
removeMarkdown: true,
) ??
L10n.of(context)!.emptyChat,
style: unread
? LinagoraTextStyle.material()
.bodyMedium2
.merge(
FluffyThemes.fallbackTextStyle,
)
.copyWith(
color: Theme.of(context).colorScheme.onSurface,
)
: LinagoraTextStyle.material()
.bodyMedium3
.merge(
FluffyThemes.fallbackTextStyle,
)
.copyWith(
color: Theme.of(context).colorScheme.onSurface,
),
),
],
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
softWrap: false,
);
},
);
}
}

0 comments on commit 78a1634

Please sign in to comment.