Comunic/comunicmobile
1
0
Fork 0
mirror of https://gitlab.com/comunic/comunicmobile synced 2025-06-19 08:15:16 +00:00
Code Issues Projects Releases Wiki Activity

Start to improve messages appearance

Browse Source
This commit is contained in:
Pierre HUBERT
2021-03-13 08:17:54 +01:00
parent 05c806b358
commit 5a25769b71
4 changed files with 193 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
lib/ui/screens/conversation_screen.dart
View File

@ -16,6 +16,7 @@ import 'package:comunic/ui/tiles/conversation_message_tile.dart';
import 'package:comunic/ui/tiles/server_conversation_message_tile.dart';
import 'package:comunic/ui/widgets/safe_state.dart';
import 'package:comunic/ui/widgets/scroll_watcher.dart';
import 'package:comunic/utils/date_utils.dart';
import 'package:comunic/utils/files_utils.dart';
import 'package:comunic/utils/intl_utils.dart';
import 'package:comunic/utils/list_utils.dart';
@ -80,6 +81,10 @@ class _ConversationScreenState extends SafeState<ConversationScreen> {
showEmojiContainer() => setState(() => _showEmojiPicker = true);
// Colors definition
Color get _senderColor =>
_conversation.color ??
(darkTheme() ? Color(0xff2b343b) : Colors.blue.shade900);
Color get _receiverColor =>
darkTheme() ? Color(0xff3a3d40) : Colors.grey.shade600;
@ -337,19 +342,6 @@ class _ConversationScreenState extends SafeState<ConversationScreen> {
setState(() => _textController = TextEditingController());
}
/// Check if a message is the last message of a user or not
bool _isLastMessage(int index) {
return index == 0 ||
(index > 0 && _messages[index - 1].userID != _messages[index].userID);
}
/// Check if a message is the first message of a user or not
bool _isFirstMessage(int index) {
return index == _messages.length - 1 ||
(index < _messages.length - 1 &&
_messages[index + 1].userID != _messages[index].userID);
}
/// Error handling
Widget _buildError() {
return buildErrorCard(tr("Could not load the list of messages!"));
@ -375,30 +367,111 @@ class _ConversationScreenState extends SafeState<ConversationScreen> {
/// Messages list
Widget _buildMessagesList() {
return Expanded(
child: ListView.builder(
controller: _scrollController,
reverse: true,
itemCount: _messages.length,
itemBuilder: (c, i) {
return _messages[i].isServerMessage
? ServerConversationMessageTile(
message: _messages[i].serverMessage,
users: _usersInfo,
)
: ConversationMessageTile(
conversation: _conversation,
message: _messages.elementAt(i),
userInfo: _usersInfo.getUser(_messages[i].userID),
isLastMessage: _isLastMessage(i),
isFirstMessage: _isFirstMessage(i),
onRequestMessageStats: _requestMessageStats,
onRequestMessageUpdate: _updateMessage,
onRequestMessageDelete: _deleteMessage,
);
}),
child: ListView.builder(
controller: _scrollController,
reverse: true,
itemCount: _messages.length,
itemBuilder: (c, i) => _buildMessageItem(i),
));
}
Widget _buildMessageItem(int msgIndex) {
final msg = _messages[msgIndex];
final nextMessage =
msgIndex + 1 < _messages.length ? _messages[msgIndex + 1] : null;
return Column(
children: <Widget>[
Container(
child: !isSameDate(msg.date, nextMessage?.date)
? _buildDateWidget(msg.date)
: null,
),
msg.isServerMessage
? Container(
alignment: Alignment.center,
child: ServerConversationMessageTile(
message: msg.serverMessage, users: _usersInfo),
)
: Container(
margin: EdgeInsets.symmetric(vertical: 5),
alignment:
msg.isOwner ? Alignment.centerRight : Alignment.centerLeft,
child: msg.isOwner
? _buildSenderLayout(msg, nextMessage)
: _buildReceiverLayout(msg, nextMessage),
),
],
);
}
Widget _buildSenderLayout(
ConversationMessage message, ConversationMessage previousMessage) {
final messageRadius = Radius.circular(10);
return Container(
margin: EdgeInsets.only(top: previousMessage?.isOwner == true ? 0 : 12),
constraints:
BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.65),
decoration: BoxDecoration(
color: _senderColor,
borderRadius: BorderRadius.only(
topLeft: messageRadius,
topRight: messageRadius,
bottomLeft: messageRadius,
),
),
child: Padding(
padding: EdgeInsets.all(10),
child: _buildMessage(message),
),
);
}
Widget _buildReceiverLayout(
ConversationMessage message, ConversationMessage previousMessage) {
final messageRadius = Radius.circular(10);
return Container(
margin: EdgeInsets.only(
top: previousMessage == null ||
message.userID != previousMessage.userID
? 12
: 0),
constraints:
BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.65),
decoration: BoxDecoration(
color: _receiverColor,
borderRadius: BorderRadius.only(
bottomRight: messageRadius,
topRight: messageRadius,
bottomLeft: messageRadius,
),
),
child: Padding(
padding: EdgeInsets.all(10),
child: _buildMessage(message),
),
);
}
Widget _buildMessage(ConversationMessage msg) => ConversationMessageTile(
message: msg,
user: _usersInfo.getUser(msg.userID),
onRequestMessageStats: _requestMessageStats,
onRequestMessageUpdate: _updateMessage,
onRequestMessageDelete: _deleteMessage,
);
Widget _buildDateWidget(DateTime dt) => Center(
child: Container(
child: Text(
formatDisplayDate(dt, time: false),
style: TextStyle(fontWeight: FontWeight.bold),
),
padding: EdgeInsets.only(top: 50, bottom: 5),
));
/// Send new message form
Widget _buildSendMessageForm() => Container(
padding: EdgeInsets.fromLTRB(10, 5, 10, 5),