Skip to content

Commit ad4e7d1

Browse files
FeichtmeierFeichtmeier
committed
chore: move event column back to list, avatar outside bubbles
1 parent 73fdd51 commit ad4e7d1

18 files changed

+450
-475
lines changed

‎lib/chat/bootstrap/view/key_verification_dialog.dart‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import 'package:matrix/matrix.dart';
1010
import 'package:yaru/yaru.dart';
1111

1212
import '../../../common/view/build_context_x.dart';
13+
import '../../../common/view/ui_constants.dart';
1314
import '../../../l10n/l10n.dart';
1415
import '../../common/view/chat_avatar.dart';
1516
import '../../chat_master/view/chat_master_detail_page.dart';
@@ -218,8 +219,8 @@ class KeyVerificationPageState extends State<KeyVerificationDialog> {
218219
avatarUri: user?.avatarUrl,
219220
),
220221
const SizedBox(
221-
width: 38,
222-
height: 38,
222+
width: kAvatarDefaultSize,
223+
height: kAvatarDefaultSize,
223224
child: CircularProgressIndicator(strokeWidth: 2),
224225
),
225226
],

‎lib/chat/chat_master/view/chat_space_control_panel.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ class ChatSpaceControlPanel extends StatelessWidget with WatchItMixin {
2727
spacing: kMediumPadding,
2828
children: [
2929
SizedBox.square(
30-
dimension: 38,
30+
dimension: kAvatarDefaultSize,
3131
child: OutlinedButton(
3232
style: OutlinedButton.styleFrom(
3333
padding: EdgeInsets.zero,
@@ -55,7 +55,7 @@ class ChatSpaceControlPanel extends StatelessWidget with WatchItMixin {
5555
),
5656
),
5757
SizedBox.square(
58-
dimension: 38,
58+
dimension: kAvatarDefaultSize,
5959
child: OutlinedButton(
6060
style: OutlinedButton.styleFrom(
6161
padding: EdgeInsets.zero,

‎lib/chat/chat_room/common/view/chat_room_page.dart‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,6 @@ class _ChatRoomPageState extends State<ChatRoomPage> {
107107
padding: const EdgeInsets.only(bottom: kMediumPadding),
108108
child: ChatRoomTimelineList(
109109
timeline: snapshot.data!,
110-
room: widget.room,
111110
listKey: _roomListKey,
112111
),
113112
);

‎lib/chat/chat_room/common/view/chat_room_timeline_list.dart‎

Lines changed: 78 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,27 @@ import 'package:scroll_to_index/scroll_to_index.dart';
44
import 'package:watch_it/watch_it.dart';
55
import 'package:yaru/yaru.dart';
66

7+
import '../../../../common/date_time_x.dart';
78
import '../../../../common/view/build_context_x.dart';
89
import '../../../../common/view/theme.dart';
910
import '../../../../common/view/ui_constants.dart';
10-
import '../../../events/view/chat_event_column.dart';
11+
import '../../../../l10n/l10n.dart';
12+
import '../../../common/event_x.dart';
13+
import '../../../events/view/chat_event_tile.dart';
14+
import '../../../settings/settings_model.dart';
1115
import '../../titlebar/chat_room_title_bar.dart';
1216
import '../timeline_model.dart';
1317
import 'chat_seen_by_indicator.dart';
14-
import 'chat_typing_indicator.dart';
1518

1619
class ChatRoomTimelineList extends StatefulWidget
1720
with WatchItStatefulWidgetMixin {
1821
const ChatRoomTimelineList({
1922
super.key,
2023
required this.timeline,
2124
required this.listKey,
22-
required this.room,
2325
});
2426

2527
final Timeline timeline;
26-
final Room room;
2728
final GlobalKey<AnimatedListState> listKey;
2829

2930
@override
@@ -52,67 +53,82 @@ class _ChatRoomTimelineListState extends State<ChatRoomTimelineList> {
5253
@override
5354
Widget build(BuildContext context) {
5455
final theme = context.theme;
56+
final showAvatarChanges =
57+
watchPropertyValue((SettingsModel m) => m.showChatAvatarChanges);
58+
final showDisplayNameChanges =
59+
watchPropertyValue((SettingsModel m) => m.showChatDisplaynameChanges);
5560

5661
return Stack(
5762
children: [
58-
Column(
59-
children: [
60-
Expanded(
61-
child: NotificationListener<ScrollEndNotification>(
62-
onNotification: onScroll,
63-
child: AnimatedList(
64-
controller: _controller,
65-
padding: const EdgeInsets.symmetric(
66-
horizontal: kMediumPadding,
67-
),
68-
key: widget.listKey,
69-
reverse: true,
70-
initialItemCount: widget.timeline.events.length,
71-
itemBuilder: (context, i, animation) {
72-
final event = widget.timeline.events[i];
73-
74-
final maybePreviousEvent =
75-
widget.timeline.events.elementAtOrNull(i + 1);
76-
77-
if (i == 0 && !widget.room.isArchived) {
78-
widget.timeline.setReadMarker();
79-
}
80-
81-
return AutoScrollTag(
82-
index: i,
83-
controller: _controller,
84-
key: ValueKey('${event.eventId}tag'),
85-
child: FadeTransition(
86-
opacity: animation,
87-
child: Column(
88-
mainAxisSize: MainAxisSize.min,
89-
children: [
90-
ChatEventColumn(
91-
key: ValueKey('${event.eventId}column'),
92-
event: event,
93-
maybePreviousEvent: maybePreviousEvent,
94-
jump: _jump,
95-
showSeenByIndicator: i == 0,
96-
timeline: widget.timeline,
97-
room: widget.room,
98-
),
99-
if (i == 0)
100-
ChatEventSeenByIndicator(
101-
key: ValueKey(
102-
'${event.eventId}${widget.timeline.events.length}',
103-
),
104-
event: event,
105-
),
106-
],
63+
NotificationListener<ScrollEndNotification>(
64+
onNotification: onScroll,
65+
child: AnimatedList(
66+
controller: _controller,
67+
padding: const EdgeInsets.symmetric(
68+
horizontal: kMediumPadding,
69+
vertical: kSmallPadding,
70+
),
71+
key: widget.listKey,
72+
reverse: true,
73+
initialItemCount: widget.timeline.events.length,
74+
itemBuilder: (context, i, animation) {
75+
final event = widget.timeline.events[i];
76+
77+
if (event.hideEventInTimeline(
78+
showAvatarChanges: showAvatarChanges,
79+
showDisplayNameChanges: showDisplayNameChanges,
80+
)) {
81+
return SizedBox.shrink(
82+
key: ValueKey(ValueKey(event.eventId)),
83+
);
84+
}
85+
86+
final previous = widget.timeline.events.elementAtOrNull(i + 1);
87+
88+
if (i == 0 && !widget.timeline.room.isArchived) {
89+
widget.timeline.setReadMarker();
90+
}
91+
92+
return AutoScrollTag(
93+
index: i,
94+
controller: _controller,
95+
key: ValueKey('${event.eventId}tag'),
96+
child: FadeTransition(
97+
opacity: animation,
98+
child: Column(
99+
mainAxisSize: MainAxisSize.min,
100+
children: [
101+
if (previous != null &&
102+
event.originServerTs.toLocal().day !=
103+
previous.originServerTs.toLocal().day)
104+
Text(
105+
previous.originServerTs
106+
.toLocal()
107+
.formatAndLocalizeDay(context.l10n),
108+
textAlign: TextAlign.center,
109+
style: theme.textTheme.labelSmall,
107110
),
111+
ChatEventTile(
112+
key: ValueKey('${event.eventId}column'),
113+
event: event,
114+
partOfMessageCohort:
115+
event.partOfMessageCohort(previous),
116+
onReplyOriginClick: (event) => _jump(event),
117+
timeline: widget.timeline,
108118
),
109-
);
110-
},
119+
if (i == 0)
120+
ChatEventSeenByIndicator(
121+
key: ValueKey(
122+
'${event.eventId}${widget.timeline.events.length}',
123+
),
124+
event: event,
125+
),
126+
],
127+
),
111128
),
112-
),
113-
),
114-
ChatTypingIndicator(room: widget.room),
115-
],
129+
);
130+
},
131+
),
116132
),
117133
if (_showScrollButton)
118134
Positioned(
@@ -127,7 +143,8 @@ class _ChatRoomTimelineListState extends State<ChatRoomTimelineList> {
127143
backgroundColor: getMonochromeBg(theme: theme, darkFactor: 5),
128144
onPressed: () => showDialog(
129145
context: context,
130-
builder: (context) => ChatRoomSearchDialog(room: widget.room),
146+
builder: (context) =>
147+
ChatRoomSearchDialog(room: widget.timeline.room),
131148
),
132149
child: Icon(
133150
YaruIcons.search,
@@ -190,7 +207,7 @@ class _ChatRoomTimelineListState extends State<ChatRoomTimelineList> {
190207
retryCount--;
191208
}
192209
await _maybeScrollTo(index);
193-
if (!widget.room.isArchived) {
210+
if (!widget.timeline.room.isArchived) {
194211
widget.timeline.setReadMarker(eventId: event.eventId);
195212
}
196213
}

‎lib/chat/chat_room/common/view/chat_seen_by_indicator.dart‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,7 @@ class ChatEventSeenByIndicator extends StatelessWidget with WatchItMixin {
3838

3939
return Container(
4040
width: double.infinity,
41-
alignment: event.room.isDirectChat ||
42-
di<ChatModel>().isUserEvent(event) &&
43-
event.type != EventTypes.Reaction
44-
? Alignment.centerRight
45-
: Alignment.centerLeft,
41+
alignment: Alignment.center,
4642
child: AnimatedContainer(
4743
padding: const EdgeInsets.symmetric(
4844
vertical: kSmallPadding,

‎lib/chat/chat_room/common/view/chat_typing_indicator.dart‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,14 @@ class ChatTypingIndicator extends StatelessWidget with WatchItMixin {
2626
[];
2727

2828
return AnimatedContainer(
29-
height: typingUsers.isEmpty ? 0 : kTypingAvatarSize + kMediumPadding,
29+
height: typingUsers.isEmpty ? 0 : kTypingAvatarSize,
3030
duration: kAvatarAnimationDuration,
3131
curve: kAvatarAnimationCurve,
3232
alignment: Alignment.centerLeft,
3333
clipBehavior: Clip.hardEdge,
3434
decoration: const BoxDecoration(),
3535
padding: const EdgeInsets.symmetric(
3636
horizontal: kBigPadding,
37-
vertical: kSmallPadding,
3837
),
3938
child: Row(
4039
mainAxisSize: MainAxisSize.min,
@@ -55,7 +54,7 @@ class ChatTypingIndicator extends StatelessWidget with WatchItMixin {
5554
),
5655
child: Padding(
5756
padding: const EdgeInsets.symmetric(
58-
horizontal: kMediumPadding,
57+
horizontal: kSmallPadding,
5958
),
6059
child: typingUsers.isEmpty ? null : const _TypingDots(),
6160
),
@@ -105,27 +104,27 @@ class __TypingDotsState extends State<_TypingDots> {
105104
@override
106105
Widget build(BuildContext context) {
107106
final theme = context.theme;
108-
const size = 8.0;
109-
110-
return Row(
111-
mainAxisSize: MainAxisSize.min,
112-
children: [
113-
for (var i = 1; i <= 3; i++)
114-
AnimatedContainer(
115-
duration: animationDuration * 1.5,
116-
curve: Curves.bounceIn,
117-
width: size,
118-
height: _tick == i ? size * 2 : size,
119-
margin: EdgeInsets.symmetric(
120-
horizontal: 2,
121-
vertical: _tick == i ? 4 : 8,
122-
),
123-
decoration: BoxDecoration(
124-
borderRadius: BorderRadius.circular(size * 2),
125-
color: theme.colorScheme.secondary,
107+
const size = kTypingAvatarSize / 3;
108+
109+
return Padding(
110+
padding: const EdgeInsets.symmetric(vertical: kSmallPadding),
111+
child: Row(
112+
mainAxisSize: MainAxisSize.min,
113+
children: [
114+
for (var i = 1; i <= 3; i++)
115+
AnimatedContainer(
116+
duration: animationDuration * 1.5,
117+
curve: Curves.bounceIn,
118+
width: size,
119+
height: _tick == i ? size * 3 : size,
120+
margin: const EdgeInsets.symmetric(horizontal: size / 2),
121+
decoration: BoxDecoration(
122+
borderRadius: BorderRadius.circular(size * 2),
123+
color: theme.colorScheme.primary,
124+
),
126125
),
127-
),
128-
],
126+
],
127+
),
129128
);
130129
}
131130
}

0 commit comments

Comments
 (0)