Merge branch 'feature/new-ui' into feature/flag
This commit is contained in:
Sahil Kumar
@@ -142,7 +142,9 @@ class _ChannelMediaDisplayScreenState extends State<ChannelMediaDisplayScreen> {
|
||||
|
||||
for (var item in snapshot.data) {
|
||||
item.message.attachments
|
||||
.where((e) => e.type == 'image' || e.type == 'video')
|
||||
.where((e) =>
|
||||
(e.type == 'image' || e.type == 'video') &&
|
||||
e.ogScrapeUrl == null)
|
||||
.forEach((e) {
|
||||
VideoPlayerController controller;
|
||||
if (e.type == 'video') {
|
||||
|
||||
+13
-12
@@ -5,10 +5,12 @@ import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
|
||||
/// It shows a date divider depending on the date difference
|
||||
class DateDivider extends StatelessWidget {
|
||||
final DateTime dateTime;
|
||||
final bool uppercase;
|
||||
|
||||
const DateDivider({
|
||||
Key key,
|
||||
@required this.dateTime,
|
||||
this.uppercase = false,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
@@ -18,38 +20,37 @@ class DateDivider extends StatelessWidget {
|
||||
|
||||
String dayInfo;
|
||||
if (Jiffy(createdAt).isSame(now, Units.DAY)) {
|
||||
dayInfo = 'TODAY';
|
||||
dayInfo = 'Today';
|
||||
} else if (Jiffy(createdAt)
|
||||
.isSame(now.subtract(Duration(days: 1)), Units.DAY)) {
|
||||
dayInfo = 'YESTERDAY';
|
||||
dayInfo = 'Yesterday';
|
||||
} else if (Jiffy(createdAt).isAfter(
|
||||
now.subtract(Duration(days: 7)),
|
||||
Units.DAY,
|
||||
)) {
|
||||
dayInfo = createdAt.format('EEEE').toUpperCase();
|
||||
dayInfo = createdAt.format('EEEE');
|
||||
} else if (Jiffy(createdAt).isAfter(
|
||||
Jiffy(now).subtract(years: 1),
|
||||
Units.DAY,
|
||||
)) {
|
||||
dayInfo = createdAt.format('MMMM d').toUpperCase();
|
||||
dayInfo = createdAt.format('MMMM d');
|
||||
} else {
|
||||
dayInfo = createdAt.format('MMMM d').toUpperCase();
|
||||
dayInfo = createdAt.format('MMMM d');
|
||||
}
|
||||
|
||||
if (uppercase) dayInfo = dayInfo.toUpperCase();
|
||||
|
||||
return Center(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 1),
|
||||
decoration: BoxDecoration(
|
||||
color: StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
|
||||
borderRadius: BorderRadius.circular(
|
||||
8,
|
||||
),
|
||||
color: StreamChatTheme.of(context).colorTheme.overlayDark,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Text(
|
||||
dayInfo,
|
||||
style: StreamChatTheme.of(context).textTheme.footnoteBold.copyWith(
|
||||
style: StreamChatTheme.of(context).textTheme.footnote.copyWith(
|
||||
color: StreamChatTheme.of(context).colorTheme.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import 'dart:math';
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
@@ -122,8 +123,9 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
crossAxisAlignment: reverse
|
||||
? CrossAxisAlignment.end
|
||||
: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
if (widget.showReactions &&
|
||||
(widget.message.status == MessageSendingStatus.SENT ||
|
||||
@@ -174,7 +176,6 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
),
|
||||
);
|
||||
}),
|
||||
SizedBox(height: 8),
|
||||
TweenAnimationBuilder<double>(
|
||||
tween: Tween(begin: 0.0, end: 1.0),
|
||||
duration: Duration(milliseconds: 300),
|
||||
@@ -184,49 +185,58 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
transform: Matrix4.identity()
|
||||
..scale(val)
|
||||
..rotateZ(-1.0 + val),
|
||||
alignment: Alignment.topRight,
|
||||
alignment: reverse
|
||||
? Alignment.topRight
|
||||
: Alignment.topLeft,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 48.0,
|
||||
padding: EdgeInsets.only(
|
||||
right: reverse ? 16 : 0,
|
||||
left: reverse ? 0 : 48,
|
||||
),
|
||||
child: Material(
|
||||
color: StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.whiteSnow,
|
||||
clipBehavior: Clip.hardEdge,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.stretch,
|
||||
children: ListTile.divideTiles(
|
||||
context: context,
|
||||
tiles: [
|
||||
if (widget.showReply &&
|
||||
(widget.message.status ==
|
||||
MessageSendingStatus.SENT ||
|
||||
widget.message.status == null) &&
|
||||
widget.message.parentId == null)
|
||||
_buildReplyButton(context),
|
||||
if (widget.showThreadReply &&
|
||||
(widget.message.status ==
|
||||
MessageSendingStatus.SENT ||
|
||||
widget.message.status == null) &&
|
||||
widget.message.parentId == null)
|
||||
_buildThreadReplyButton(context),
|
||||
if (widget.showResendMessage)
|
||||
_buildResendMessage(context),
|
||||
if (widget.showEditMessage)
|
||||
_buildEditMessage(context),
|
||||
if (widget.showDeleteMessage)
|
||||
_buildDeleteButton(context),
|
||||
if (widget.showCopyMessage)
|
||||
_buildCopyButton(context),
|
||||
if (widget.showFlagButton)
|
||||
_buildFlagButton(context),
|
||||
],
|
||||
).toList(),
|
||||
child: SizedBox(
|
||||
width: MediaQuery.of(context).size.width * 0.75,
|
||||
child: Material(
|
||||
color: StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.whiteSnow,
|
||||
clipBehavior: Clip.hardEdge,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.stretch,
|
||||
children: ListTile.divideTiles(
|
||||
color: StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.greyWhisper,
|
||||
context: context,
|
||||
tiles: [
|
||||
if (showReply &&
|
||||
(message.status ==
|
||||
MessageSendingStatus.SENT ||
|
||||
message.status == null) &&
|
||||
message.parentId == null)
|
||||
_buildReplyButton(context),
|
||||
if (showThreadReply &&
|
||||
(message.status ==
|
||||
MessageSendingStatus.SENT ||
|
||||
message.status == null) &&
|
||||
message.parentId == null)
|
||||
_buildThreadReplyButton(context),
|
||||
if (showResendMessage)
|
||||
_buildResendMessage(context),
|
||||
if (showEditMessage)
|
||||
_buildEditMessage(context),
|
||||
if (showCopyMessage)
|
||||
_buildCopyButton(context),
|
||||
if (widget.showFlagButton)
|
||||
_buildFlagButton(context),
|
||||
if (showDeleteMessage)
|
||||
_buildDeleteButton(context),
|
||||
],
|
||||
).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -268,12 +278,8 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
scale: value,
|
||||
child: Center(
|
||||
child: Opacity(
|
||||
opacity: 0.8,
|
||||
opacity: 0.9,
|
||||
child: Material(
|
||||
color: StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.whiteSnow
|
||||
.withOpacity(0.8),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16.0),
|
||||
),
|
||||
@@ -336,14 +342,12 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
top: BorderSide(
|
||||
width: 0.5,
|
||||
color: StreamChatTheme.of(
|
||||
context)
|
||||
.colorTheme
|
||||
.grey
|
||||
.withOpacity(0.8)),
|
||||
right: BorderSide(
|
||||
width: 0.5,
|
||||
color: StreamChatTheme.of(
|
||||
context)
|
||||
.colorTheme
|
||||
@@ -382,7 +386,6 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
top: BorderSide(
|
||||
width: 0.5,
|
||||
color: StreamChatTheme.of(
|
||||
context)
|
||||
.colorTheme
|
||||
@@ -445,12 +448,8 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
scale: value,
|
||||
child: Center(
|
||||
child: Opacity(
|
||||
opacity: 0.8,
|
||||
opacity: 0.9,
|
||||
child: Material(
|
||||
color: StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.whiteSnow
|
||||
.withOpacity(0.8),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16.0),
|
||||
),
|
||||
@@ -514,7 +513,6 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
top: BorderSide(
|
||||
width: 0.5,
|
||||
color: StreamChatTheme.of(
|
||||
context)
|
||||
.colorTheme
|
||||
@@ -548,12 +546,18 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
|
||||
Widget _buildReplyButton(BuildContext context) {
|
||||
return ListTile(
|
||||
title: Text(
|
||||
'Reply',
|
||||
style: Theme.of(context).textTheme.headline6,
|
||||
),
|
||||
leading: StreamSvgIcon.reply(
|
||||
color: StreamChatTheme.of(context).primaryIconTheme.color,
|
||||
dense: true,
|
||||
title: Row(
|
||||
children: [
|
||||
StreamSvgIcon.reply(
|
||||
color: StreamChatTheme.of(context).primaryIconTheme.color,
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Text(
|
||||
'Reply',
|
||||
style: StreamChatTheme.of(context).textTheme.headline,
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
@@ -586,13 +590,21 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
final isDeleteFailed =
|
||||
widget.message.status == MessageSendingStatus.FAILED_DELETE;
|
||||
return ListTile(
|
||||
title: Text(
|
||||
isDeleteFailed ? 'Retry deleting message' : 'Delete message',
|
||||
style:
|
||||
Theme.of(context).textTheme.headline6.copyWith(color: Colors.red),
|
||||
),
|
||||
leading: StreamSvgIcon.delete(
|
||||
color: Colors.red,
|
||||
dense: true,
|
||||
title: Row(
|
||||
children: [
|
||||
StreamSvgIcon.delete(
|
||||
color: Colors.red,
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Text(
|
||||
isDeleteFailed ? 'Retry Deleting Message' : 'Delete Message',
|
||||
style: StreamChatTheme.of(context)
|
||||
.textTheme
|
||||
.headline
|
||||
.copyWith(color: Colors.red),
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
@@ -606,12 +618,19 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
|
||||
Widget _buildCopyButton(BuildContext context) {
|
||||
return ListTile(
|
||||
title: Text(
|
||||
'Copy message',
|
||||
style: Theme.of(context).textTheme.headline6,
|
||||
),
|
||||
leading: StreamSvgIcon.copy(
|
||||
color: StreamChatTheme.of(context).primaryIconTheme.color,
|
||||
dense: true,
|
||||
title: Row(
|
||||
children: [
|
||||
StreamSvgIcon.copy(
|
||||
size: 24,
|
||||
color: StreamChatTheme.of(context).primaryIconTheme.color,
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Text(
|
||||
'Copy Message',
|
||||
style: StreamChatTheme.of(context).textTheme.headline,
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: () async {
|
||||
await Clipboard.setData(ClipboardData(text: widget.message.text));
|
||||
@@ -622,12 +641,18 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
|
||||
Widget _buildEditMessage(BuildContext context) {
|
||||
return ListTile(
|
||||
title: Text(
|
||||
'Edit message',
|
||||
style: Theme.of(context).textTheme.headline6,
|
||||
),
|
||||
leading: StreamSvgIcon.edit(
|
||||
color: StreamChatTheme.of(context).primaryIconTheme.color,
|
||||
dense: true,
|
||||
title: Row(
|
||||
children: [
|
||||
StreamSvgIcon.edit(
|
||||
color: StreamChatTheme.of(context).primaryIconTheme.color,
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Text(
|
||||
'Edit Message',
|
||||
style: StreamChatTheme.of(context).textTheme.headline,
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: () async {
|
||||
Navigator.pop(context);
|
||||
@@ -640,12 +665,18 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
final isUpdateFailed =
|
||||
widget.message.status == MessageSendingStatus.FAILED_UPDATE;
|
||||
return ListTile(
|
||||
title: Text(
|
||||
isUpdateFailed ? 'Resend edited message' : 'Resend',
|
||||
style: Theme.of(context).textTheme.headline6,
|
||||
),
|
||||
leading: StreamSvgIcon.circle_up(
|
||||
color: StreamChatTheme.of(context).colorTheme.accentBlue,
|
||||
dense: true,
|
||||
title: Row(
|
||||
children: [
|
||||
StreamSvgIcon.circle_up(
|
||||
color: StreamChatTheme.of(context).colorTheme.accentBlue,
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Text(
|
||||
isUpdateFailed ? 'Resend Edited Message' : 'Resend',
|
||||
style: StreamChatTheme.of(context).textTheme.headline,
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
@@ -731,12 +762,18 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
|
||||
|
||||
Widget _buildThreadReplyButton(BuildContext context) {
|
||||
return ListTile(
|
||||
title: Text(
|
||||
'Thread reply',
|
||||
style: Theme.of(context).textTheme.headline6,
|
||||
),
|
||||
leading: StreamSvgIcon.thread(
|
||||
color: StreamChatTheme.of(context).primaryIconTheme.color,
|
||||
dense: true,
|
||||
title: Row(
|
||||
children: [
|
||||
StreamSvgIcon.thread(
|
||||
color: StreamChatTheme.of(context).primaryIconTheme.color,
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Text(
|
||||
'Thread Reply',
|
||||
style: StreamChatTheme.of(context).textTheme.headline,
|
||||
),
|
||||
],
|
||||
),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
|
||||
@@ -324,7 +324,7 @@ class _MessageListViewState extends State<MessageListView> {
|
||||
onInBetweenOfPage: () {
|
||||
_inBetweenList = true;
|
||||
},
|
||||
child: ScrollablePositionedList.builder(
|
||||
child: ScrollablePositionedList.separated(
|
||||
key: ValueKey(initialIndex + initialAlignment),
|
||||
itemPositionsListener: _itemPositionListener,
|
||||
addAutomaticKeepAlives: true,
|
||||
@@ -336,6 +336,43 @@ class _MessageListViewState extends State<MessageListView> {
|
||||
itemCount: messages.length +
|
||||
2 +
|
||||
(widget.parentMessage != null ? 1 : 0),
|
||||
separatorBuilder: (context, i) {
|
||||
if (i == messages.length) return Offstage();
|
||||
if (i == messages.length + 2) return Offstage();
|
||||
if (i == messages.length + 1) return Offstage();
|
||||
if (i == 0) return SizedBox(height: 30);
|
||||
final message = messages[i];
|
||||
final nextMessage = messages[i - 1];
|
||||
if (!Jiffy(message.createdAt.toLocal()).isSame(
|
||||
nextMessage.createdAt.toLocal(),
|
||||
Units.DAY,
|
||||
)) {
|
||||
final divider = widget.dateDividerBuilder != null
|
||||
? widget.dateDividerBuilder(
|
||||
nextMessage.createdAt.toLocal(),
|
||||
)
|
||||
: DateDivider(
|
||||
dateTime: nextMessage.createdAt.toLocal(),
|
||||
);
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12.0),
|
||||
child: divider,
|
||||
);
|
||||
}
|
||||
final timeDiff =
|
||||
Jiffy(nextMessage.createdAt.toLocal()).diff(
|
||||
message.createdAt.toLocal(),
|
||||
Units.MINUTE,
|
||||
);
|
||||
|
||||
final isNextUserSame =
|
||||
message.user.id == nextMessage.user?.id;
|
||||
final isThread = message.replyCount > 0;
|
||||
if (timeDiff >= 1 || !isNextUserSame || isThread) {
|
||||
return SizedBox(height: 8);
|
||||
}
|
||||
return SizedBox(height: 2);
|
||||
},
|
||||
itemBuilder: (context, i) {
|
||||
if (i == messages.length + 2) {
|
||||
if (widget.parentMessageBuilder != null) {
|
||||
@@ -383,7 +420,6 @@ class _MessageListViewState extends State<MessageListView> {
|
||||
);
|
||||
}
|
||||
final message = messages[i - 1];
|
||||
final nextMessage = (i - 1) > 0 ? messages[i - 2] : null;
|
||||
|
||||
Widget messageWidget;
|
||||
|
||||
@@ -419,27 +455,6 @@ class _MessageListViewState extends State<MessageListView> {
|
||||
messageWidget = buildMessage(message, messages, i);
|
||||
}
|
||||
}
|
||||
|
||||
if (nextMessage != null &&
|
||||
!Jiffy(message.createdAt.toLocal()).isSame(
|
||||
nextMessage.createdAt.toLocal(), Units.DAY)) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: <Widget>[
|
||||
messageWidget,
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12.0),
|
||||
child: widget.dateDividerBuilder != null
|
||||
? widget.dateDividerBuilder(
|
||||
nextMessage.createdAt.toLocal())
|
||||
: DateDivider(
|
||||
dateTime: nextMessage.createdAt.toLocal(),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
return messageWidget;
|
||||
},
|
||||
),
|
||||
@@ -740,8 +755,17 @@ class _MessageListViewState extends State<MessageListView> {
|
||||
|
||||
final userId = StreamChat.of(context).user.id;
|
||||
final isMyMessage = message.user.id == userId;
|
||||
final isNextUser =
|
||||
index - 2 >= 0 && message.user.id == messages[index - 2]?.user?.id;
|
||||
final nextMessage = index - 2 >= 0 ? messages[index - 2] : null;
|
||||
final isNextUserSame =
|
||||
nextMessage != null && message.user.id == nextMessage.user.id;
|
||||
|
||||
num timeDiff = 0;
|
||||
if (nextMessage != null) {
|
||||
timeDiff = Jiffy(nextMessage.createdAt.toLocal()).diff(
|
||||
message.createdAt.toLocal(),
|
||||
Units.MINUTE,
|
||||
);
|
||||
}
|
||||
|
||||
final channel = streamChannel.channel;
|
||||
final readList = channel.state?.read
|
||||
@@ -759,17 +783,17 @@ class _MessageListViewState extends State<MessageListView> {
|
||||
final isThreadMessage =
|
||||
widget.parentMessage != null || message?.showInChannel == true;
|
||||
|
||||
final hasFileAttachment =
|
||||
message.attachments.any((it) => it.type == 'file');
|
||||
|
||||
final attachmentBorderRadius = hasFileAttachment ? 12.0 : 14.0;
|
||||
|
||||
Widget child = MessageWidget(
|
||||
key: ValueKey<String>('MESSAGE-${message.id}'),
|
||||
message: message,
|
||||
reverse: isMyMessage,
|
||||
showReactions: !message.isDeleted,
|
||||
padding: EdgeInsets.only(
|
||||
left: 8.0,
|
||||
right: 8.0,
|
||||
bottom: index == 0 ? 30 : (isNextUser ? 2 : 7),
|
||||
top: 3,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8.0),
|
||||
onQuotedMessageTap: (quotedMessageId) async {
|
||||
final scrollToIndex = () {
|
||||
final index = messages.indexWhere((m) => m.id == quotedMessageId);
|
||||
@@ -792,12 +816,13 @@ class _MessageListViewState extends State<MessageListView> {
|
||||
},
|
||||
showInChannelIndicator: widget.parentMessage == null,
|
||||
showThreadReplyIndicator: widget.parentMessage == null,
|
||||
showUsername: !isMyMessage && !isNextUser,
|
||||
showSendingIndicator: isMyMessage &&
|
||||
(index == 0 || message.status != MessageSendingStatus.SENT)
|
||||
? DisplayWidget.show
|
||||
: DisplayWidget.hide,
|
||||
showTimestamp: !isNextUser || readList?.isNotEmpty == true,
|
||||
showUsername: !isMyMessage && (timeDiff >= 1 || !isNextUserSame),
|
||||
showSendingIndicator:
|
||||
isMyMessage && (index == 0 || timeDiff >= 1 || !isNextUserSame)
|
||||
? DisplayWidget.show
|
||||
: DisplayWidget.hide,
|
||||
showTimestamp:
|
||||
!isNextUserSame || readList?.isNotEmpty == true || timeDiff >= 1,
|
||||
showEditMessage: isMyMessage,
|
||||
showDeleteMessage: isMyMessage,
|
||||
showFlagButton: !isMyMessage,
|
||||
@@ -805,21 +830,24 @@ class _MessageListViewState extends State<MessageListView> {
|
||||
onThreadTap: _onThreadTap,
|
||||
onReplyTap: widget.onReplyTap,
|
||||
attachmentBorderRadiusGeometry: BorderRadius.only(
|
||||
topLeft: Radius.circular(16),
|
||||
bottomLeft: Radius.circular(!isNextUser ? 0 : 16),
|
||||
topRight: Radius.circular(16),
|
||||
bottomRight: Radius.circular(16),
|
||||
topLeft: Radius.circular(attachmentBorderRadius),
|
||||
bottomLeft: Radius.circular(
|
||||
timeDiff >= 1 || !isNextUserSame ? 0 : attachmentBorderRadius),
|
||||
topRight: Radius.circular(attachmentBorderRadius),
|
||||
bottomRight: Radius.circular(attachmentBorderRadius),
|
||||
),
|
||||
attachmentPadding: const EdgeInsets.all(2),
|
||||
borderRadiusGeometry: BorderRadius.only(
|
||||
topLeft: Radius.circular(16),
|
||||
bottomLeft: Radius.circular(!isNextUser ? 0 : 16),
|
||||
bottomLeft: Radius.circular(timeDiff >= 1 || !isNextUserSame ? 0 : 16),
|
||||
topRight: Radius.circular(16),
|
||||
bottomRight: Radius.circular(16),
|
||||
),
|
||||
showUserAvatar: isMyMessage
|
||||
? DisplayWidget.gone
|
||||
: (isNextUser ? DisplayWidget.hide : DisplayWidget.show),
|
||||
: (timeDiff >= 1 || !isNextUserSame
|
||||
? DisplayWidget.show
|
||||
: DisplayWidget.hide),
|
||||
messageTheme: isMyMessage
|
||||
? StreamChatTheme.of(context).ownMessageTheme
|
||||
: StreamChatTheme.of(context).otherMessageTheme,
|
||||
|
||||
@@ -127,7 +127,6 @@ class MessageReactionsModal extends StatelessWidget {
|
||||
),
|
||||
);
|
||||
}),
|
||||
SizedBox(height: 8),
|
||||
if (message.latestReactions?.isNotEmpty == true)
|
||||
_buildReactionCard(context),
|
||||
],
|
||||
@@ -152,27 +151,22 @@ class MessageReactionsModal extends StatelessWidget {
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Text(
|
||||
margin: EdgeInsets.zero,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
'Message Reactions',
|
||||
style: Theme.of(context).textTheme.headline6,
|
||||
style: StreamChatTheme.of(context).textTheme.headlineBold,
|
||||
),
|
||||
),
|
||||
Flexible(
|
||||
child: SingleChildScrollView(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 18,
|
||||
right: 18,
|
||||
bottom: 26,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Flexible(
|
||||
child: SingleChildScrollView(
|
||||
child: Wrap(
|
||||
spacing: 16,
|
||||
runSpacing: 22,
|
||||
runSpacing: 16,
|
||||
alignment: WrapAlignment.start,
|
||||
children: message.latestReactions
|
||||
.map((e) => _buildReaction(
|
||||
@@ -184,8 +178,8 @@ class MessageReactionsModal extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
@@ -227,24 +221,28 @@ class MessageReactionsModal extends StatelessWidget {
|
||||
),
|
||||
Positioned(
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
alignment: reverse
|
||||
? Alignment.centerRight
|
||||
: Alignment.centerLeft,
|
||||
child: ReactionBubble(
|
||||
reactions: [reaction],
|
||||
flipTail: !reverse,
|
||||
borderColor: messageTheme.reactionsBorderColor,
|
||||
backgroundColor:
|
||||
messageTheme.reactionsBackgroundColor,
|
||||
highlightOwnReactions: false,
|
||||
),
|
||||
),
|
||||
bottom: 4,
|
||||
bottom: 6,
|
||||
left: isCurrentUser ? 0 : null,
|
||||
right: isCurrentUser ? 0 : null,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
reaction.user.name,
|
||||
style: Theme.of(context).textTheme.subtitle2,
|
||||
style: StreamChatTheme.of(context).textTheme.footnoteBold,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
|
||||
+23
-17
@@ -280,7 +280,7 @@ class _MessageWidgetState extends State<MessageWidget> {
|
||||
Widget build(BuildContext context) {
|
||||
final avatarWidth = widget.messageTheme.avatarTheme.constraints.maxWidth;
|
||||
var leftPadding =
|
||||
widget.showUserAvatar != DisplayWidget.gone ? avatarWidth + 8.5 : 4.5;
|
||||
widget.showUserAvatar != DisplayWidget.gone ? avatarWidth + 8.5 : 0.5;
|
||||
|
||||
final isOnlyEmoji =
|
||||
widget.message.text.characters.every((c) => Emoji.byChar(c) != null);
|
||||
@@ -332,7 +332,7 @@ class _MessageWidgetState extends State<MessageWidget> {
|
||||
child: PortalEntry(
|
||||
portal: Container(
|
||||
transform:
|
||||
Matrix4.translationValues(-16, 2, 0),
|
||||
Matrix4.translationValues(-12, 0, 0),
|
||||
child: _buildReactionIndicator(context),
|
||||
constraints:
|
||||
BoxConstraints(maxWidth: 22 * 6.0),
|
||||
@@ -374,6 +374,14 @@ class _MessageWidgetState extends State<MessageWidget> {
|
||||
: Card(
|
||||
clipBehavior: Clip.antiAlias,
|
||||
elevation: 0.0,
|
||||
margin: EdgeInsets.symmetric(
|
||||
horizontal:
|
||||
widget.showUserAvatar ==
|
||||
DisplayWidget
|
||||
.gone
|
||||
? 0
|
||||
: 4.0,
|
||||
),
|
||||
shape: widget.shape ??
|
||||
RoundedRectangleBorder(
|
||||
side: isOnlyEmoji &&
|
||||
@@ -397,7 +405,7 @@ class _MessageWidgetState extends State<MessageWidget> {
|
||||
child: Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment
|
||||
.start,
|
||||
.end,
|
||||
mainAxisSize:
|
||||
MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
@@ -425,10 +433,12 @@ class _MessageWidgetState extends State<MessageWidget> {
|
||||
widget.reverse ? pi : 0),
|
||||
child: CustomPaint(
|
||||
painter: ReactionBubblePainter(
|
||||
widget.messageTheme
|
||||
.reactionsBackgroundColor,
|
||||
widget.messageTheme
|
||||
.reactionsBorderColor,
|
||||
StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.white,
|
||||
StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -494,18 +504,16 @@ class _MessageWidgetState extends State<MessageWidget> {
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
StreamSvgIcon.eye(
|
||||
color:
|
||||
StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5),
|
||||
color: StreamChatTheme.of(context).colorTheme.grey,
|
||||
size: 16.0,
|
||||
),
|
||||
SizedBox(width: 8.0),
|
||||
Text(
|
||||
'Only visible to you',
|
||||
style: StreamChatTheme.of(context).textTheme.footnote.copyWith(
|
||||
color: StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.black
|
||||
.withOpacity(0.5)),
|
||||
style: StreamChatTheme.of(context)
|
||||
.textTheme
|
||||
.footnote
|
||||
.copyWith(color: StreamChatTheme.of(context).colorTheme.grey),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -760,9 +768,7 @@ class _MessageWidgetState extends State<MessageWidget> {
|
||||
side: widget.attachmentBorderSide ??
|
||||
widget.borderSide ??
|
||||
BorderSide(
|
||||
color: Theme.of(context).brightness == Brightness.dark
|
||||
? StreamChatTheme.of(context).colorTheme.white.withAlpha(24)
|
||||
: StreamChatTheme.of(context).colorTheme.black.withAlpha(24),
|
||||
color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
|
||||
),
|
||||
borderRadius: widget.attachmentBorderRadiusGeometry ??
|
||||
widget.borderRadiusGeometry ??
|
||||
|
||||
@@ -111,7 +111,7 @@ class QuotedMessageWidget extends StatelessWidget {
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 8, bottom: 6, right: 4, left: 8),
|
||||
padding: const EdgeInsets.only(top: 8, right: 4, left: 8),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
|
||||
@@ -27,7 +27,8 @@ class ReactionBubble extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final reactionIcons = StreamChatTheme.of(context).reactionIcons;
|
||||
final offset = reactions.length > 1 ? 16.0 : 2.0;
|
||||
final totalReactions = reactions.length;
|
||||
final offset = totalReactions > 1 ? 16.0 : 2.0;
|
||||
return Transform(
|
||||
transform: Matrix4.rotationY(reverse ? pi : 0),
|
||||
alignment: Alignment.center,
|
||||
@@ -37,7 +38,10 @@ class ReactionBubble extends StatelessWidget {
|
||||
Transform.translate(
|
||||
offset: Offset(reverse ? offset : -offset, 0),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
padding: EdgeInsets.symmetric(
|
||||
vertical: 4,
|
||||
horizontal: totalReactions > 1 ? 4 : 0,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: borderColor,
|
||||
@@ -134,16 +138,11 @@ class ReactionBubble extends StatelessWidget {
|
||||
borderColor,
|
||||
),
|
||||
);
|
||||
|
||||
if (!flipTail) {
|
||||
return tail;
|
||||
} else {
|
||||
return Transform(
|
||||
transform: Matrix4.rotationY(pi),
|
||||
alignment: Alignment.center,
|
||||
child: tail,
|
||||
);
|
||||
}
|
||||
return Transform(
|
||||
transform: Matrix4.rotationY(flipTail ? 0 : pi),
|
||||
alignment: Alignment.center,
|
||||
child: tail,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -58,62 +58,65 @@ class _ReactionPickerState extends State<ReactionPicker>
|
||||
return Transform.scale(
|
||||
scale: val,
|
||||
child: Material(
|
||||
color: widget.messageTheme.reactionsBackgroundColor,
|
||||
color: StreamChatTheme.of(context).colorTheme.white,
|
||||
clipBehavior: Clip.hardEdge,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: reactionIcons.map((reactionIcon) {
|
||||
final ownReactionIndex = widget.message.ownReactions
|
||||
?.indexWhere((reaction) =>
|
||||
reaction.type == reactionIcon.type) ??
|
||||
-1;
|
||||
var index = reactionIcons.indexOf(reactionIcon);
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8.0),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: reactionIcons.map((reactionIcon) {
|
||||
final ownReactionIndex = widget.message.ownReactions
|
||||
?.indexWhere((reaction) =>
|
||||
reaction.type == reactionIcon.type) ??
|
||||
-1;
|
||||
var index = reactionIcons.indexOf(reactionIcon);
|
||||
|
||||
return IconButton(
|
||||
iconSize: 24,
|
||||
icon: AnimatedBuilder(
|
||||
animation: animations[index],
|
||||
builder: (context, val) {
|
||||
return Transform(
|
||||
transform: Matrix4.identity()
|
||||
..scale(animations[index].value,
|
||||
animations[index].value)
|
||||
..rotateZ(1.0 - animations[index].value),
|
||||
child: StreamSvgIcon(
|
||||
assetName: reactionIcon.assetName,
|
||||
height: animations[index].value * 24.0,
|
||||
width: animations[index].value * 24.0,
|
||||
color: ownReactionIndex != -1
|
||||
? StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.accentBlue
|
||||
: Theme.of(context)
|
||||
.iconTheme
|
||||
.color
|
||||
.withOpacity(.5),
|
||||
),
|
||||
return IconButton(
|
||||
iconSize: 24,
|
||||
icon: AnimatedBuilder(
|
||||
animation: animations[index],
|
||||
builder: (context, val) {
|
||||
return Transform(
|
||||
transform: Matrix4.identity()
|
||||
..scale(animations[index].value,
|
||||
animations[index].value)
|
||||
..rotateZ(1.0 - animations[index].value),
|
||||
child: StreamSvgIcon(
|
||||
assetName: reactionIcon.assetName,
|
||||
height: animations[index].value * 24.0,
|
||||
width: animations[index].value * 24.0,
|
||||
color: ownReactionIndex != -1
|
||||
? StreamChatTheme.of(context)
|
||||
.colorTheme
|
||||
.accentBlue
|
||||
: Theme.of(context)
|
||||
.iconTheme
|
||||
.color
|
||||
.withOpacity(.5),
|
||||
),
|
||||
);
|
||||
}),
|
||||
onPressed: () {
|
||||
if (ownReactionIndex != -1) {
|
||||
removeReaction(
|
||||
context,
|
||||
widget.message.ownReactions[ownReactionIndex],
|
||||
);
|
||||
}),
|
||||
onPressed: () {
|
||||
if (ownReactionIndex != -1) {
|
||||
removeReaction(
|
||||
context,
|
||||
widget.message.ownReactions[ownReactionIndex],
|
||||
);
|
||||
} else {
|
||||
sendReaction(
|
||||
context,
|
||||
reactionIcon.type,
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
} else {
|
||||
sendReaction(
|
||||
context,
|
||||
reactionIcon.type,
|
||||
);
|
||||
}
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -228,19 +228,9 @@ class StreamChatThemeData {
|
||||
inputBackground: colorTheme.white.withAlpha(12),
|
||||
),
|
||||
ownMessageTheme: MessageTheme(
|
||||
messageText: TextStyle(
|
||||
fontSize: 14.5,
|
||||
color: colorTheme.black,
|
||||
),
|
||||
createdAt: TextStyle(
|
||||
color: colorTheme.black.withOpacity(.5),
|
||||
fontSize: 12,
|
||||
),
|
||||
replies: TextStyle(
|
||||
color: accentColor,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 12,
|
||||
),
|
||||
messageText: textTheme.body,
|
||||
createdAt: textTheme.footnote.copyWith(color: colorTheme.grey),
|
||||
replies: textTheme.footnoteBold.copyWith(color: accentColor),
|
||||
messageBackgroundColor: colorTheme.greyGainsboro,
|
||||
reactionsBackgroundColor: colorTheme.white,
|
||||
reactionsBorderColor: colorTheme.greyWhisper,
|
||||
@@ -259,19 +249,9 @@ class StreamChatThemeData {
|
||||
otherMessageTheme: MessageTheme(
|
||||
reactionsBackgroundColor: colorTheme.greyGainsboro,
|
||||
reactionsBorderColor: colorTheme.white,
|
||||
messageText: TextStyle(
|
||||
fontSize: 14.5,
|
||||
color: colorTheme.black,
|
||||
),
|
||||
createdAt: TextStyle(
|
||||
color: colorTheme.black.withOpacity(.5),
|
||||
fontSize: 12,
|
||||
),
|
||||
replies: TextStyle(
|
||||
color: accentColor,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 12,
|
||||
),
|
||||
messageText: textTheme.body,
|
||||
createdAt: textTheme.footnote.copyWith(color: colorTheme.grey),
|
||||
replies: textTheme.footnoteBold.copyWith(color: accentColor),
|
||||
messageLinks: TextStyle(
|
||||
color: accentColor,
|
||||
),
|
||||
|
||||
@@ -24,10 +24,6 @@ class UrlAttachment extends StatelessWidget {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
if (urlAttachment.imageUrl != null)
|
||||
SizedBox(
|
||||
height: 16.0,
|
||||
),
|
||||
if (urlAttachment.imageUrl != null)
|
||||
Container(
|
||||
clipBehavior: Clip.antiAliasWithSaveLayer,
|
||||
|
||||
Reference in New Issue
Block a user