2ndbeam/fluffychat-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design: New date separators in timeline

Browse source
This commit is contained in:
Krille 2024-03-27 08:44:02 +01:00
commit f15b81c5a6
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
6 changed files with 134 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

42
lib/pages/chat/events/date_separator.dart Normal file
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,
),
),
],
),
);
}
}

76
lib/pages/chat/events/message.dart
View file

@ -203,27 +203,53 @@ 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(
displayname,
style: TextStyle(
fontSize: 12,
color: (Theme.of(context).brightness ==
Brightness.light
? displayname.color
: displayname.lightColorText),
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 ==
Brightness.light
? 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,