aiden
/
fluffychat
mirror of https://github.com/krille-chan/fluffychat
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

design: New date separators in timeline

Browse Source
pull/956/head
Krille 11 months ago
parent 7183158cf9
commit f15b81c5a6
No known key found for this signature in database
GPG Key ID: E067ECD60F1A0652
6 changed files with 134 additions and 79 deletions
Show Stats Download Patch File Download Diff File

3
assets/l10n/intl_en.arb
Unescape Escape View File

@ -2485,5 +2485,6 @@
"stickers": "Stickers",
"discover": "Discover",
"commandHint_ignore": "Ignore the given matrix ID",
"commandHint_unignore": "Unignore the given matrix ID"
"commandHint_unignore": "Unignore the given matrix ID",
"today": "Today"
}

19
lib/pages/chat/chat_event_list.dart
Unescape Escape View File

@ -5,12 +5,14 @@ import 'package:scroll_to_index/scroll_to_index.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/pages/chat/chat.dart';
import 'package:fluffychat/pages/chat/events/date_separator.dart';
import 'package:fluffychat/pages/chat/events/message.dart';
import 'package:fluffychat/pages/chat/seen_by_row.dart';
import 'package:fluffychat/pages/chat/typing_indicators.dart';
import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart';
import 'package:fluffychat/utils/account_config.dart';
import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
import 'package:fluffychat/utils/date_time_extension.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions/filtered_timeline_extension.dart';
import 'package:fluffychat/utils/platform_infos.dart';
@ -106,6 +108,8 @@ class ChatEventList extends StatelessWidget {
// The message at this index:
final event = events[i];
final nextEvent = i + 1 < events.length ? events[i + 1] : null;
final previousEvent = i > 0 ? events[i - 1] : null;
final animateIn = animateInEventIndex != null &&
controller.timeline!.events.length > animateInEventIndex &&
event == controller.timeline!.events[animateInEventIndex];
@ -114,7 +118,14 @@ class ChatEventList extends StatelessWidget {
key: ValueKey(event.eventId),
index: i,
controller: controller.scrollController,
child: Message(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (nextEvent?.originServerTs
.isSameDate(event.originServerTs) !=
true)
DateSeparator(date: event.originServerTs),
Message(
event,
animateIn: animateIn,
resetAnimateIn: () {
@ -143,11 +154,13 @@ class ChatEventList extends StatelessWidget {
displayReadMarker:
controller.readMarkerEventId == event.eventId &&
controller.timeline?.allowNewEvent == false,
nextEvent: i + 1 < events.length ? events[i + 1] : null,
previousEvent: i > 0 ? events[i - 1] : null,
nextEvent: nextEvent,
previousEvent: previousEvent,
avatarPresenceBackgroundColor:
hasWallpaper ? Colors.transparent : null,
),
],
),
);
},
childCount: events.length + 2,

42
lib/pages/chat/events/date_separator.dart
Unescape Escape View File

@ -0,0 +1,42 @@
import 'package:flutter/material.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/utils/date_time_extension.dart';
class DateSeparator extends StatelessWidget {
final DateTime date;
const DateSeparator({required this.date, super.key});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Row(
children: [
Expanded(
child: Container(
height: 1,
color: Theme.of(context).dividerColor,
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Text(
date.localizedTimeShort(context, dateOnly: true),
style: TextStyle(
color: Theme.of(context).colorScheme.secondary,
fontSize: 13 * AppConfig.fontSizeFactor,
),
),
),
Expanded(
child: Container(
height: 1,
color: Theme.of(context).dividerColor,
),
),
],
),
);
}
}

62
lib/pages/chat/events/message.dart
Unescape Escape View File

@ -203,17 +203,29 @@ class Message extends StatelessWidget {
if (!nextEventSameSender)
Padding(
padding: const EdgeInsets.only(left: 8.0, bottom: 4),
child: ownMessage || event.room.isDirectChat
? const SizedBox(height: 12)
: FutureBuilder<User?>(
child: Row(
mainAxisAlignment: ownMessage
? MainAxisAlignment.end
: MainAxisAlignment.start,
children: [
if (ownMessage || event.room.isDirectChat)
const SizedBox(height: 12)
else
FutureBuilder<User?>(
future: event.fetchSenderUser(),
builder: (context, snapshot) {
final displayname =
snapshot.data?.calcDisplayname() ??
event.senderFromMemoryOrFallback
.calcDisplayname();
return Text(
return ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: FluffyThemes.columnWidth / 2,
),
child: Text(
displayname,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12,
color: (Theme.of(context).brightness ==
@ -221,9 +233,23 @@ class Message extends StatelessWidget {
? displayname.color
: displayname.lightColorText),
),
),
);
},
),
Text(
(ownMessage || event.room.isDirectChat
? ''
: ' | ') +
event.originServerTs
.localizedTimeOfDay(context),
style: TextStyle(
fontSize: 12 * AppConfig.fontSizeFactor,
color: Theme.of(context).colorScheme.secondary,
),
),
],
),
),
Container(
alignment: alignment,
@ -363,38 +389,12 @@ class Message extends StatelessWidget {
Widget container;
final showReceiptsRow =
event.hasAggregatedEvents(timeline, RelationshipTypes.reaction);
if (showReceiptsRow || displayTime || selected || displayReadMarker) {
if (showReceiptsRow || selected || displayReadMarker) {
container = Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment:
ownMessage ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: <Widget>[
if (displayTime || selected)
Padding(
padding: displayTime
? const EdgeInsets.symmetric(vertical: 8.0)
: EdgeInsets.zero,
child: Center(
child: Material(
color: displayTime
? Theme.of(context).colorScheme.background
: Theme.of(context)
.colorScheme
.background
.withOpacity(0.33),
borderRadius:
BorderRadius.circular(AppConfig.borderRadius / 2),
clipBehavior: Clip.antiAlias,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
event.originServerTs.localizedTime(context),
style: TextStyle(fontSize: 13 * AppConfig.fontSizeFactor),
),
),
),
),
),
row,
AnimatedSize(
duration: FluffyThemes.animationDuration,

7
lib/pages/chat_list/chat_list_view.dart
Unescape Escape View File

@ -187,12 +187,7 @@ class ChatListView extends StatelessWidget {
? NavigationBar(
elevation: 4,
labelBehavior:
NavigationDestinationLabelBehavior.alwaysHide,
height: 64,
shadowColor:
Theme.of(context).colorScheme.onBackground,
surfaceTintColor:
Theme.of(context).colorScheme.background,
NavigationDestinationLabelBehavior.alwaysShow,
selectedIndex: controller.selectedIndex,
onDestinationSelected:
controller.onDestinationSelected,

8
lib/utils/date_time_extension.dart
Unescape Escape View File

@ -45,7 +45,7 @@ extension DateTimeExtension on DateTime {
/// Returns [localizedTimeOfDay()] if the ChatTime is today, the name of the week
/// day if the ChatTime is this week and a date string else.
String localizedTimeShort(BuildContext context) {
String localizedTimeShort(BuildContext context, {bool dateOnly = false}) {
final now = DateTime.now();
final sameYear = now.year == year;
@ -58,7 +58,7 @@ extension DateTimeExtension on DateTime {
1000 * 60 * 60 * 24 * 7;
if (sameDay) {
return localizedTimeOfDay(context);
return dateOnly ? L10n.of(context)!.today : localizedTimeOfDay(context);
} else if (sameWeek) {
return DateFormat.EEEE(Localizations.localeOf(context).languageCode)
.format(this);
@ -92,5 +92,9 @@ extension DateTimeExtension on DateTime {
);
}
bool isSameDate(DateTime other) {
return year == other.year && month == other.month && day == other.day;
}
static String _z(int i) => i < 10 ? '0${i.toString()}' : i.toString();
}

Write Preview
Loading…
Cancel
Save