From 87e07683df6a2df353c8834a8866395144cb6f78 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Tue, 7 Feb 2023 18:58:26 +0100 Subject: [PATCH 01/24] Fixing for multiline messages --- .../message_actions_modal.dart | 26 ++++++++--------- .../reactions/message_reactions_modal.dart | 16 ++-------- .../lib/src/utils/extensions.dart | 29 +++++++++++++++++++ 3 files changed, 44 insertions(+), 27 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart index 8a5d4740..a8aec217 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart @@ -101,20 +101,10 @@ class _MessageActionsModalState extends State { final user = StreamChat.of(context).currentUser; final roughMaxSize = size.width * 2 / 3; - var messageTextLength = widget.message.text!.length; - if (widget.message.quotedMessage != null) { - var quotedMessageLength = - (widget.message.quotedMessage!.text?.length ?? 0) + 40; - if (widget.message.quotedMessage!.attachments.isNotEmpty) { - quotedMessageLength += 40; - } - if (quotedMessageLength > messageTextLength) { - messageTextLength = quotedMessageLength; - } - } - final roughSentenceSize = messageTextLength * - (widget.messageTheme.messageTextStyle?.fontSize ?? 1) * - 1.2; + + final roughSentenceSize = widget.message + .roughMessageSize(widget.messageTheme.messageTextStyle?.fontSize); + final divFactor = widget.message.attachments.isNotEmpty ? 1 : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); @@ -289,6 +279,12 @@ class _MessageActionsModalState extends State { ) { var result = 0.0; var cont = true; + + print('INFO - max width: ${constraints.maxWidth}. ' + 'shiftFactor: $shiftFactor ' + 'divFactor: $divFactor ' + 'cont: $cont'); + if (user?.id == widget.message.user?.id) { if (divFactor >= 1.0) { // This calculation is hacky and does not cover all bases!!! @@ -358,6 +354,8 @@ class _MessageActionsModalState extends State { } } + print('INFO - result: $result'); + // Ensure reactions don't get pushed past the edge of the screen. // // Hacky!!! Needs improvement!!! diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart index 281a37cc..e87a8970 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart @@ -47,19 +47,9 @@ class StreamMessageReactionsModal extends StatelessWidget { _userPermissions.contains(PermissionType.sendReaction); final roughMaxSize = size.width * 2 / 3; - var messageTextLength = message.text!.length; - if (message.quotedMessage != null) { - var quotedMessageLength = message.quotedMessage!.text!.length + 40; - if (message.quotedMessage!.attachments.isNotEmpty) { - quotedMessageLength += 40; - } - if (quotedMessageLength > messageTextLength) { - messageTextLength = quotedMessageLength; - } - } - final roughSentenceSize = messageTextLength * - (messageTheme.messageTextStyle?.fontSize ?? 1) * - 1.2; + + final roughSentenceSize = + message.roughMessageSize(messageTheme.messageTextStyle?.fontSize); final divFactor = message.attachments.isNotEmpty ? 1 : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); diff --git a/packages/stream_chat_flutter/lib/src/utils/extensions.dart b/packages/stream_chat_flutter/lib/src/utils/extensions.dart index 448674dd..8e6ef86e 100644 --- a/packages/stream_chat_flutter/lib/src/utils/extensions.dart +++ b/packages/stream_chat_flutter/lib/src/utils/extensions.dart @@ -1,3 +1,4 @@ +import 'package:collection/collection.dart'; import 'package:diacritic/diacritic.dart'; import 'package:file_picker/file_picker.dart'; import 'package:flutter/foundation.dart'; @@ -12,6 +13,16 @@ extension StringExtension on String { String capitalize() => isNotEmpty ? '${this[0].toUpperCase()}${substring(1).toLowerCase()}' : ''; + /// Returns the biggest line of a text. + String biggestLine() { + if (contains('\n')) { + return split('\n') + .reduce((curr, next) => curr.length > next.length ? curr : next); + } else { + return this; + } + } + /// Returns whether the string contains only emoji's or not. /// /// Emojis guidelines @@ -353,6 +364,24 @@ extension MessageX on Message { return copyWith(text: messageTextToRender); } + /// Returns an approximation of message size + double roughMessageSize(double? fontSize) { + var messageTextLength = text!.biggestLine().length; + + if (quotedMessage != null) { + var quotedMessageLength = + (quotedMessage!.text?.biggestLine().length ?? 0) + 40; + if (quotedMessage!.attachments.isNotEmpty) { + quotedMessageLength += 40; + } + if (quotedMessageLength > messageTextLength) { + messageTextLength = quotedMessageLength; + } + } + + return messageTextLength * (fontSize ?? 1) * 1.2; + } + /// It returns the message with the translated text if available locally Message translate(String language) => copyWith(text: i18n?['${language}_text'] ?? text); From 858b6afddb8245f3e54875b0219cef2d150c76d8 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Tue, 7 Feb 2023 19:42:55 +0100 Subject: [PATCH 02/24] Fixing quoted messages --- packages/stream_chat_flutter/lib/src/utils/extensions.dart | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/stream_chat_flutter/lib/src/utils/extensions.dart b/packages/stream_chat_flutter/lib/src/utils/extensions.dart index 8e6ef86e..b094fb60 100644 --- a/packages/stream_chat_flutter/lib/src/utils/extensions.dart +++ b/packages/stream_chat_flutter/lib/src/utils/extensions.dart @@ -370,7 +370,8 @@ extension MessageX on Message { if (quotedMessage != null) { var quotedMessageLength = - (quotedMessage!.text?.biggestLine().length ?? 0) + 40; + (quotedMessage!.text?.biggestLine().length ?? 0) + 6; + if (quotedMessage!.attachments.isNotEmpty) { quotedMessageLength += 40; } From 92a330cd71b16da277feb9985c33ba6963e62bed Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Tue, 7 Feb 2023 19:43:54 +0100 Subject: [PATCH 03/24] Using constant instead of many size divisions --- .../message_actions_modal.dart | 77 +++++-------------- .../lib/src/utils/extensions.dart | 2 +- 2 files changed, 19 insertions(+), 60 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart index a8aec217..da405247 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart @@ -105,6 +105,8 @@ class _MessageActionsModalState extends State { final roughSentenceSize = widget.message .roughMessageSize(widget.messageTheme.messageTextStyle?.fontSize); + print('roughSentenceSize $roughSentenceSize'); + final divFactor = widget.message.attachments.isNotEmpty ? 1 : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); @@ -278,70 +280,27 @@ class _MessageActionsModalState extends State { BoxConstraints constraints, ) { var result = 0.0; - var cont = true; - print('INFO - max width: ${constraints.maxWidth}. ' + final maxWidth = constraints.maxWidth; + + print('INFO - max width: ${maxWidth}. ' 'shiftFactor: $shiftFactor ' - 'divFactor: $divFactor ' - 'cont: $cont'); + 'divFactor: $divFactor'); if (user?.id == widget.message.user?.id) { if (divFactor >= 1.0) { - // This calculation is hacky and does not cover all bases!!! - // A better option is needed! + /* + This is an empiric value. This number tries to approximate all the + offset necessary for the position of reaction look the best way + possible. + */ + const offsetConstant = 2700; + final offsetCorrection = maxWidth / offsetConstant; - // Landscape calculations - if (constraints.maxWidth == 1350) { - // 12.7 iPad Pro - result = shiftFactor + 0.5; - cont = false; - } else if (constraints.maxWidth == 1178) { - // 11 inch iPad Pro - result = shiftFactor + 0.42; - cont = false; - } else if (constraints.maxWidth == 1164) { - // iPad Air 4 - result = shiftFactor + 0.4; - cont = false; - } else if (constraints.maxWidth == 1117) { - // iPad Mini 6 - result = shiftFactor + 0.37; - cont = false; - } else if (constraints.maxWidth == 1064) { - // iPad 9th gen - result = shiftFactor + 0.33; - cont = false; - } else if (constraints.maxWidth == 1008) { - // 9.7 inch iPad Pro - result = shiftFactor + 0.3; - cont = false; - } else if (constraints.maxWidth >= 200 && constraints.maxWidth <= 400) { - // Phone (?) - result = shiftFactor - 0.2; - cont = false; - } - - if (cont) { - // Portrait calculations - if (constraints.maxWidth == 1008) { - // 12.7 iPad Pro - result = shiftFactor + 0.3; - } else if (constraints.maxWidth == 818) { - // 11 inch iPad Pro - result = shiftFactor + 0.07; - } else if (constraints.maxWidth == 804) { - // iPad Air 4 - result = shiftFactor + 0.04; - } else if (constraints.maxWidth == 794) { - // iPad 9th gen - result = shiftFactor + 0.02; - } else if (constraints.maxWidth >= 752) { - // 9.7 inch iPad Pro - result = shiftFactor - 0.05; - } else if (constraints.maxWidth == 728) { - // iPad Mini 6 - result = shiftFactor - 0.1; - } + if (maxWidth <= 752) { + result = shiftFactor - offsetCorrection; + } else { + result = shiftFactor + offsetCorrection; } } else { result = 1.2 - divFactor; @@ -359,7 +318,7 @@ class _MessageActionsModalState extends State { // Ensure reactions don't get pushed past the edge of the screen. // // Hacky!!! Needs improvement!!! - if (result > 1) { + if (result > 1.0) { return 1; } else { return result; diff --git a/packages/stream_chat_flutter/lib/src/utils/extensions.dart b/packages/stream_chat_flutter/lib/src/utils/extensions.dart index b094fb60..4e2da383 100644 --- a/packages/stream_chat_flutter/lib/src/utils/extensions.dart +++ b/packages/stream_chat_flutter/lib/src/utils/extensions.dart @@ -371,7 +371,7 @@ extension MessageX on Message { if (quotedMessage != null) { var quotedMessageLength = (quotedMessage!.text?.biggestLine().length ?? 0) + 6; - + if (quotedMessage!.attachments.isNotEmpty) { quotedMessageLength += 40; } From 9fdc864af29996963ff0375b7168b2be27c099e9 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Tue, 7 Feb 2023 19:58:50 +0100 Subject: [PATCH 04/24] Adding negativeConstant --- .../message_actions_modal/message_actions_modal.dart | 10 +++++----- .../reactions/message_reactions_modal.dart | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart index da405247..970f4d28 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart @@ -148,7 +148,7 @@ class _MessageActionsModalState extends State { ); }, ), - const SizedBox(height: 8), + const SizedBox(height: 10), IgnorePointer( child: widget.messageWidget, ), @@ -294,13 +294,13 @@ class _MessageActionsModalState extends State { offset necessary for the position of reaction look the best way possible. */ - const offsetConstant = 2700; - final offsetCorrection = maxWidth / offsetConstant; + const positiveConstant = 2700; + const negativeConstant = 1700; if (maxWidth <= 752) { - result = shiftFactor - offsetCorrection; + result = shiftFactor - maxWidth / negativeConstant; } else { - result = shiftFactor + offsetCorrection; + result = shiftFactor + maxWidth / positiveConstant; } } else { result = 1.2 - divFactor; diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart index e87a8970..5cc804d1 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart @@ -84,7 +84,7 @@ class StreamMessageReactionsModal extends StatelessWidget { message: message, ), ), - const SizedBox(height: 8), + const SizedBox(height: 10), IgnorePointer( child: messageWidget, ), From f02d4670e8132ad9137a0e96814fe3cb08b13410 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Tue, 7 Feb 2023 20:43:17 +0100 Subject: [PATCH 05/24] Adding only negative shift --- .../message_actions_modal.dart | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart index 970f4d28..3e1260d5 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart @@ -106,6 +106,7 @@ class _MessageActionsModalState extends State { .roughMessageSize(widget.messageTheme.messageTextStyle?.fontSize); print('roughSentenceSize $roughSentenceSize'); + print('roughMaxSize $roughMaxSize'); final divFactor = widget.message.attachments.isNotEmpty ? 1 @@ -282,8 +283,10 @@ class _MessageActionsModalState extends State { var result = 0.0; final maxWidth = constraints.maxWidth; + final maxHeight = constraints.maxHeight; - print('INFO - max width: ${maxWidth}. ' + print('INFO - max width: $maxWidth. ' + 'maxHeight: $maxHeight ' 'shiftFactor: $shiftFactor ' 'divFactor: $divFactor'); @@ -294,15 +297,11 @@ class _MessageActionsModalState extends State { offset necessary for the position of reaction look the best way possible. */ - const positiveConstant = 2700; - const negativeConstant = 1700; + const constant = 1500; - if (maxWidth <= 752) { - result = shiftFactor - maxWidth / negativeConstant; - } else { - result = shiftFactor + maxWidth / positiveConstant; - } + result = shiftFactor - maxWidth / constant; } else { + // Small messages, it is simpler to align then. result = 1.2 - divFactor; } } else { From 40b27eca21b6355d82e2d1c28b4c49e3db909a05 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Tue, 7 Feb 2023 20:46:12 +0100 Subject: [PATCH 06/24] Update CHANGELOG.md --- packages/stream_chat_flutter/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/stream_chat_flutter/CHANGELOG.md b/packages/stream_chat_flutter/CHANGELOG.md index 405f49f0..92964fed 100644 --- a/packages/stream_chat_flutter/CHANGELOG.md +++ b/packages/stream_chat_flutter/CHANGELOG.md @@ -12,6 +12,10 @@ - Updated `share_plus` dependency to `^6.3.0` +🚀 Improved +- +- Improved draw of reaction options. [#1455](https://github.com/GetStream/stream-chat-flutter/pull/1455) + ## 5.3.0 🔄 Changed From 64df124e37c78758d500031ff1af01f255ae9861 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Wed, 8 Feb 2023 12:05:47 +0100 Subject: [PATCH 07/24] Extracting reactions align --- .../message_actions_modal.dart | 54 ++----------------- .../reactions/reactions_align.dart | 54 +++++++++++++++++++ 2 files changed, 57 insertions(+), 51 deletions(-) create mode 100644 packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart index 3e1260d5..18a49c95 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart @@ -2,6 +2,7 @@ import 'dart:ui'; import 'package:flutter/material.dart' hide ButtonStyle; import 'package:stream_chat_flutter/src/message_actions_modal/mam_widgets.dart'; +import 'package:stream_chat_flutter/src/message_widget/reactions/reactions_align.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart'; /// {@template messageActionsModal} @@ -135,8 +136,9 @@ class _MessageActionsModalState extends State { builder: (context, constraints) { return Align( alignment: Alignment( - _calculateReactionsHorizontalAlignmentValue( + calculateReactionsHorizontalAlignmentValue( user, + widget.message, divFactor, shiftFactor, constraints, @@ -274,56 +276,6 @@ class _MessageActionsModalState extends State { ); } - double _calculateReactionsHorizontalAlignmentValue( - User? user, - num divFactor, - double shiftFactor, - BoxConstraints constraints, - ) { - var result = 0.0; - - final maxWidth = constraints.maxWidth; - final maxHeight = constraints.maxHeight; - - print('INFO - max width: $maxWidth. ' - 'maxHeight: $maxHeight ' - 'shiftFactor: $shiftFactor ' - 'divFactor: $divFactor'); - - if (user?.id == widget.message.user?.id) { - if (divFactor >= 1.0) { - /* - This is an empiric value. This number tries to approximate all the - offset necessary for the position of reaction look the best way - possible. - */ - const constant = 1500; - - result = shiftFactor - maxWidth / constant; - } else { - // Small messages, it is simpler to align then. - result = 1.2 - divFactor; - } - } else { - if (divFactor >= 1.0) { - result = shiftFactor + 0.2; - } else { - result = -(1.2 - divFactor); - } - } - - print('INFO - result: $result'); - - // Ensure reactions don't get pushed past the edge of the screen. - // - // Hacky!!! Needs improvement!!! - if (result > 1.0) { - return 1; - } else { - return result; - } - } - InkWell _buildCustomAction( BuildContext context, StreamMessageAction messageAction, diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart new file mode 100644 index 00000000..e6e81eb6 --- /dev/null +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -0,0 +1,54 @@ +import 'package:flutter/material.dart'; +import 'package:stream_chat_flutter/stream_chat_flutter.dart'; + +/// Document here!! +double calculateReactionsHorizontalAlignmentValue( + User? user, + Message message, + num divFactor, + double shiftFactor, + BoxConstraints constraints, + ) { + var result = 0.0; + + final maxWidth = constraints.maxWidth; + final maxHeight = constraints.maxHeight; + + print('INFO - max width: $maxWidth. ' + 'maxHeight: $maxHeight ' + 'shiftFactor: $shiftFactor ' + 'divFactor: $divFactor'); + + if (user?.id == message.user?.id) { + if (divFactor >= 1.0) { + /* + This is an empiric value. This number tries to approximate all the + offset necessary for the position of reaction look the best way + possible. + */ + const constant = 1300; + + result = shiftFactor - maxWidth / constant; + } else { + // Small messages, it is simpler to align then. + result = 1.2 - divFactor; + } + } else { + if (divFactor >= 1.0) { + result = shiftFactor + 0.2; + } else { + result = -(1.2 - divFactor); + } + } + + print('INFO - result: $result'); + + // Ensure reactions don't get pushed past the edge of the screen. + // + // Hacky!!! Needs improvement!!! + if (result > 1.0) { + return 1; + } else { + return result; + } +} From c0936f87ab6f1bb0dabc4d6175cc0378f5d1b3a9 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Wed, 8 Feb 2023 12:50:11 +0100 Subject: [PATCH 08/24] Using the same logic for alignment --- .../message_actions_modal.dart | 14 +++--- .../reactions/message_reactions_modal.dart | 45 +++++++++---------- .../reactions/reactions_align.dart | 22 ++++++--- 3 files changed, 43 insertions(+), 38 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart index 18a49c95..0ca7ac16 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart @@ -106,19 +106,16 @@ class _MessageActionsModalState extends State { final roughSentenceSize = widget.message .roughMessageSize(widget.messageTheme.messageTextStyle?.fontSize); + final fontSize = widget.messageTheme.messageTextStyle?.fontSize; + print('roughSentenceSize $roughSentenceSize'); print('roughMaxSize $roughMaxSize'); - final divFactor = widget.message.attachments.isNotEmpty - ? 1 - : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); - final streamChatThemeData = StreamChatTheme.of(context); final numberOfReactions = StreamChatConfiguration.of(context).reactionIcons.length; - final shiftFactor = - numberOfReactions < 5 ? (5 - numberOfReactions) * 0.1 : 0.0; + final channel = StreamChannel.of(context).channel; final child = Center( @@ -139,9 +136,10 @@ class _MessageActionsModalState extends State { calculateReactionsHorizontalAlignmentValue( user, widget.message, - divFactor, - shiftFactor, constraints, + roughMaxSize, + fontSize, + numberOfReactions, ), 0, ), diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart index 5cc804d1..813c3d25 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart @@ -2,6 +2,7 @@ import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:stream_chat_flutter/src/message_widget/reactions/reaction_bubble.dart'; +import 'package:stream_chat_flutter/src/message_widget/reactions/reactions_align.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart'; /// {@template streamMessageReactionsModal} @@ -45,19 +46,10 @@ class StreamMessageReactionsModal extends StatelessWidget { final hasReactionPermission = _userPermissions.contains(PermissionType.sendReaction); - final roughMaxSize = size.width * 2 / 3; - - final roughSentenceSize = - message.roughMessageSize(messageTheme.messageTextStyle?.fontSize); - final divFactor = message.attachments.isNotEmpty - ? 1 - : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize)); - + final fontSize = messageTheme.messageTextStyle?.fontSize; final numberOfReactions = StreamChatConfiguration.of(context).reactionIcons.length; - final shiftFactor = - numberOfReactions < 5 ? (5 - numberOfReactions) * 0.1 : 0.0; final child = Center( child: SingleChildScrollView( @@ -69,20 +61,25 @@ class StreamMessageReactionsModal extends StatelessWidget { children: [ if ((showReactions ?? hasReactionPermission) && (message.status == MessageSendingStatus.sent)) - Align( - alignment: Alignment( - user!.id == message.user!.id - ? (divFactor >= 1.0 - ? -0.2 - shiftFactor - : (1.2 - divFactor)) - : (divFactor >= 1.0 - ? shiftFactor + 0.2 - : -(1.2 - divFactor)), - 0, - ), - child: StreamReactionPicker( - message: message, - ), + LayoutBuilder( + builder: (context, constraints) { + return Align( + alignment: Alignment( + calculateReactionsHorizontalAlignmentValue( + user, + message, + constraints, + roughMaxSize, + fontSize, + numberOfReactions, + ), + 0, + ), + child: StreamReactionPicker( + message: message, + ), + ); + }, ), const SizedBox(height: 10), IgnorePointer( diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index e6e81eb6..8abced3e 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -3,17 +3,25 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart'; /// Document here!! double calculateReactionsHorizontalAlignmentValue( - User? user, - Message message, - num divFactor, - double shiftFactor, - BoxConstraints constraints, - ) { + User? user, + Message message, + BoxConstraints constraints, + double maxSize, + double? fontSize, + int reactionsCount, +) { var result = 0.0; + final shiftFactor = reactionsCount < 5 ? (5 - reactionsCount) * 0.1 : 0.0; final maxWidth = constraints.maxWidth; final maxHeight = constraints.maxHeight; + final roughSentenceSize = message.roughMessageSize(fontSize); + + final divFactor = message.attachments.isNotEmpty + ? 1 + : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / maxSize)); + print('INFO - max width: $maxWidth. ' 'maxHeight: $maxHeight ' 'shiftFactor: $shiftFactor ' @@ -48,6 +56,8 @@ double calculateReactionsHorizontalAlignmentValue( // Hacky!!! Needs improvement!!! if (result > 1.0) { return 1; + } else if (result < -1.0) { + return -1; } else { return result; } From df98fd5d8dc8e9c6fe2ec23bbf7c6a1b434c51d1 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Wed, 8 Feb 2023 20:38:27 +0100 Subject: [PATCH 09/24] reducing code duplication --- .../message_actions_modal.dart | 2 + .../reactions/message_reactions_modal.dart | 2 + .../reactions/reactions_align.dart | 91 ++++++++++++++++++- 3 files changed, 91 insertions(+), 4 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart index 0ca7ac16..f14aa438 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart @@ -100,6 +100,7 @@ class _MessageActionsModalState extends State { final mediaQueryData = MediaQuery.of(context); final size = mediaQueryData.size; final user = StreamChat.of(context).currentUser; + final orientation = mediaQueryData.orientation; final roughMaxSize = size.width * 2 / 3; @@ -140,6 +141,7 @@ class _MessageActionsModalState extends State { roughMaxSize, fontSize, numberOfReactions, + orientation, ), 0, ), diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart index 813c3d25..6e746f38 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart @@ -43,6 +43,7 @@ class StreamMessageReactionsModal extends StatelessWidget { final size = MediaQuery.of(context).size; final user = StreamChat.of(context).currentUser; final _userPermissions = StreamChannel.of(context).channel.ownCapabilities; + final orientation = MediaQuery.of(context).orientation; final hasReactionPermission = _userPermissions.contains(PermissionType.sendReaction); @@ -72,6 +73,7 @@ class StreamMessageReactionsModal extends StatelessWidget { roughMaxSize, fontSize, numberOfReactions, + orientation, ), 0, ), diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index 8abced3e..800e82e9 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -9,9 +9,8 @@ double calculateReactionsHorizontalAlignmentValue( double maxSize, double? fontSize, int reactionsCount, + Orientation orientation, ) { - var result = 0.0; - final shiftFactor = reactionsCount < 5 ? (5 - reactionsCount) * 0.1 : 0.0; final maxWidth = constraints.maxWidth; final maxHeight = constraints.maxHeight; @@ -22,11 +21,42 @@ double calculateReactionsHorizontalAlignmentValue( ? 1 : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / maxSize)); + if (orientation == Orientation.portrait) { + return _portraitAlign( + user, + message, + maxWidth, + maxHeight, + shiftFactor, + divFactor, + ); + } else { + return _landScapeAlign( + user, + message, + maxWidth, + maxHeight, + shiftFactor, + divFactor, + ); + } +} + +double _portraitAlign( + User? user, + Message message, + double maxWidth, + double maxHeight, + double shiftFactor, + num divFactor, +) { print('INFO - max width: $maxWidth. ' 'maxHeight: $maxHeight ' 'shiftFactor: $shiftFactor ' 'divFactor: $divFactor'); + var result = 0.0; + if (user?.id == message.user?.id) { if (divFactor >= 1.0) { /* @@ -49,11 +79,64 @@ double calculateReactionsHorizontalAlignmentValue( } } - print('INFO - result: $result'); + print('INFO - result portrait: $result'); // Ensure reactions don't get pushed past the edge of the screen. // - // Hacky!!! Needs improvement!!! + // This happens if divFactor is really big. When this happens, we can simply + // move the model all the way to the end of screen. + if (result > 1.0) { + return 1; + } else if (result < -1.0) { + return -1; + } else { + return result; + } +} + +double _landScapeAlign( + User? user, + Message message, + double maxWidth, + double maxHeight, + double shiftFactor, + num divFactor, +) { + var result = 0.0; + + print('INFO - max width: $maxWidth. ' + 'maxHeight: $maxHeight ' + 'shiftFactor: $shiftFactor ' + 'divFactor: $divFactor'); + + if (user?.id == message.user?.id) { + if (divFactor >= 1.7) { + /* + This is an empiric value. This number tries to approximate all the + offset necessary for the position of reaction look the best way + possible. + */ + const constant = 3000; + + result = shiftFactor - maxWidth / constant; + } else { + // Small messages, it is simpler to align then. + result = 1 - divFactor * 0.6; + } + } else { + if (divFactor >= 1.7) { + result = shiftFactor + 0.2; + } else { + result = -(1.2 - divFactor); + } + } + + print('INFO - result landscape: $result'); + + // Ensure reactions don't get pushed past the edge of the screen. + // + // This happens if divFactor is really big. When this happens, we can simply + // move the model all the way to the end of screen. if (result > 1.0) { return 1; } else if (result < -1.0) { From 26d519029d4c5a81de5557888df075dbf8e64e35 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Wed, 8 Feb 2023 20:38:49 +0100 Subject: [PATCH 10/24] Applying max for message lengh --- packages/stream_chat_flutter/lib/src/utils/extensions.dart | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/utils/extensions.dart b/packages/stream_chat_flutter/lib/src/utils/extensions.dart index 4e2da383..a653219f 100644 --- a/packages/stream_chat_flutter/lib/src/utils/extensions.dart +++ b/packages/stream_chat_flutter/lib/src/utils/extensions.dart @@ -1,3 +1,5 @@ +import 'dart:math'; + import 'package:collection/collection.dart'; import 'package:diacritic/diacritic.dart'; import 'package:file_picker/file_picker.dart'; @@ -366,11 +368,11 @@ extension MessageX on Message { /// Returns an approximation of message size double roughMessageSize(double? fontSize) { - var messageTextLength = text!.biggestLine().length; + var messageTextLength = min(text!.biggestLine().length, 65); if (quotedMessage != null) { var quotedMessageLength = - (quotedMessage!.text?.biggestLine().length ?? 0) + 6; + (min(quotedMessage!.text?.biggestLine().length ?? 0, 65)) + 6; if (quotedMessage!.attachments.isNotEmpty) { quotedMessageLength += 40; From 8ad70e02e433dc0fd5d35ccd27b5e40edce41614 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Wed, 8 Feb 2023 20:53:31 +0100 Subject: [PATCH 11/24] FIxing attachments --- .../reactions/reactions_align.dart | 38 ++++++++++--------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index 800e82e9..7ea4d0da 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -16,8 +16,8 @@ double calculateReactionsHorizontalAlignmentValue( final maxHeight = constraints.maxHeight; final roughSentenceSize = message.roughMessageSize(fontSize); - - final divFactor = message.attachments.isNotEmpty + final hasAttachments = message.attachments.isNotEmpty; + final divFactor = hasAttachments ? 1 : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / maxSize)); @@ -29,6 +29,7 @@ double calculateReactionsHorizontalAlignmentValue( maxHeight, shiftFactor, divFactor, + hasAttachments, ); } else { return _landScapeAlign( @@ -38,6 +39,7 @@ double calculateReactionsHorizontalAlignmentValue( maxHeight, shiftFactor, divFactor, + hasAttachments, ); } } @@ -49,6 +51,7 @@ double _portraitAlign( double maxHeight, double shiftFactor, num divFactor, + bool hasAttachments, ) { print('INFO - max width: $maxWidth. ' 'maxHeight: $maxHeight ' @@ -57,23 +60,21 @@ double _portraitAlign( var result = 0.0; - if (user?.id == message.user?.id) { - if (divFactor >= 1.0) { - /* - This is an empiric value. This number tries to approximate all the - offset necessary for the position of reaction look the best way - possible. - */ - const constant = 1300; + // This is an empiric value. This number tries to approximate all the + // offset necessary for the position of reaction look the best way + // possible. + const constant = 1300; + if (user?.id == message.user?.id) { + if (divFactor >= 1.0 || hasAttachments) { result = shiftFactor - maxWidth / constant; } else { // Small messages, it is simpler to align then. result = 1.2 - divFactor; } } else { - if (divFactor >= 1.0) { - result = shiftFactor + 0.2; + if (divFactor >= 1.0 || hasAttachments) { + result = shiftFactor + maxWidth / constant; } else { result = -(1.2 - divFactor); } @@ -101,6 +102,7 @@ double _landScapeAlign( double maxHeight, double shiftFactor, num divFactor, + bool hasAttachments, ) { var result = 0.0; @@ -109,15 +111,15 @@ double _landScapeAlign( 'shiftFactor: $shiftFactor ' 'divFactor: $divFactor'); - if (user?.id == message.user?.id) { - if (divFactor >= 1.7) { - /* + /* This is an empiric value. This number tries to approximate all the offset necessary for the position of reaction look the best way possible. */ - const constant = 3000; + const constant = 3000; + if (user?.id == message.user?.id) { + if (divFactor >= 1.7) { result = shiftFactor - maxWidth / constant; } else { // Small messages, it is simpler to align then. @@ -125,9 +127,9 @@ double _landScapeAlign( } } else { if (divFactor >= 1.7) { - result = shiftFactor + 0.2; + result = shiftFactor + maxWidth / constant; } else { - result = -(1.2 - divFactor); + result = -(1.2 - divFactor * 0.6); } } From 91b801296437e243a9746d36ddb69887efc86a07 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Wed, 8 Feb 2023 20:54:50 +0100 Subject: [PATCH 12/24] Removing prints from reactions_align --- .../reactions/reactions_align.dart | 20 ++++--------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index 7ea4d0da..f5d0cce5 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -53,11 +53,6 @@ double _portraitAlign( num divFactor, bool hasAttachments, ) { - print('INFO - max width: $maxWidth. ' - 'maxHeight: $maxHeight ' - 'shiftFactor: $shiftFactor ' - 'divFactor: $divFactor'); - var result = 0.0; // This is an empiric value. This number tries to approximate all the @@ -106,16 +101,11 @@ double _landScapeAlign( ) { var result = 0.0; - print('INFO - max width: $maxWidth. ' - 'maxHeight: $maxHeight ' - 'shiftFactor: $shiftFactor ' - 'divFactor: $divFactor'); - /* - This is an empiric value. This number tries to approximate all the - offset necessary for the position of reaction look the best way - possible. - */ + This is an empiric value. This number tries to approximate all the + offset necessary for the position of reaction look the best way + possible. + */ const constant = 3000; if (user?.id == message.user?.id) { @@ -133,8 +123,6 @@ double _landScapeAlign( } } - print('INFO - result landscape: $result'); - // Ensure reactions don't get pushed past the edge of the screen. // // This happens if divFactor is really big. When this happens, we can simply From c9c43567a3170a31d24a287278ee371faed64089 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Wed, 8 Feb 2023 20:56:35 +0100 Subject: [PATCH 13/24] Removing prints --- .../src/message_actions_modal/message_actions_modal.dart | 9 --------- .../src/message_widget/reactions/reactions_align.dart | 2 -- 2 files changed, 11 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart index f14aa438..d8f5614b 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart @@ -103,17 +103,8 @@ class _MessageActionsModalState extends State { final orientation = mediaQueryData.orientation; final roughMaxSize = size.width * 2 / 3; - - final roughSentenceSize = widget.message - .roughMessageSize(widget.messageTheme.messageTextStyle?.fontSize); - final fontSize = widget.messageTheme.messageTextStyle?.fontSize; - - print('roughSentenceSize $roughSentenceSize'); - print('roughMaxSize $roughMaxSize'); - final streamChatThemeData = StreamChatTheme.of(context); - final numberOfReactions = StreamChatConfiguration.of(context).reactionIcons.length; diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index f5d0cce5..2dcc659c 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -75,8 +75,6 @@ double _portraitAlign( } } - print('INFO - result portrait: $result'); - // Ensure reactions don't get pushed past the edge of the screen. // // This happens if divFactor is really big. When this happens, we can simply From 8fa7abea1b214815c936f5b028de92f85068d413 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Wed, 8 Feb 2023 20:59:45 +0100 Subject: [PATCH 14/24] Update reactions_align.dart --- .../reactions/reactions_align.dart | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index 2dcc659c..0808092b 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -1,7 +1,9 @@ import 'package:flutter/material.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart'; -/// Document here!! +/// This method calculates the align that the modal of reactions should have. +/// THis is an approximation based on the size of the message and the +/// available space in the screen. double calculateReactionsHorizontalAlignmentValue( User? user, Message message, @@ -75,17 +77,7 @@ double _portraitAlign( } } - // Ensure reactions don't get pushed past the edge of the screen. - // - // This happens if divFactor is really big. When this happens, we can simply - // move the model all the way to the end of screen. - if (result > 1.0) { - return 1; - } else if (result < -1.0) { - return -1; - } else { - return result; - } + return _capResult(result); } double _landScapeAlign( @@ -121,10 +113,14 @@ double _landScapeAlign( } } - // Ensure reactions don't get pushed past the edge of the screen. - // - // This happens if divFactor is really big. When this happens, we can simply - // move the model all the way to the end of screen. + return _capResult(result); +} + +// Ensure reactions don't get pushed past the edge of the screen. +// +// This happens if divFactor is really big. When this happens, we can simply +// move the model all the way to the end of screen. +double _capResult(double result) { if (result > 1.0) { return 1; } else if (result < -1.0) { From 6b3c8ad95dfbf6e44214bb2bc2f27391fd486892 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Thu, 9 Feb 2023 13:50:06 +0100 Subject: [PATCH 15/24] Fixing static analyses --- packages/stream_chat_flutter/lib/src/utils/extensions.dart | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/stream_chat_flutter/lib/src/utils/extensions.dart b/packages/stream_chat_flutter/lib/src/utils/extensions.dart index a653219f..bbe43690 100644 --- a/packages/stream_chat_flutter/lib/src/utils/extensions.dart +++ b/packages/stream_chat_flutter/lib/src/utils/extensions.dart @@ -1,6 +1,5 @@ import 'dart:math'; -import 'package:collection/collection.dart'; import 'package:diacritic/diacritic.dart'; import 'package:file_picker/file_picker.dart'; import 'package:flutter/foundation.dart'; From 4dda50df73299720004eb6c2cfd088c725f321ed Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Sun, 26 Feb 2023 16:29:07 +0100 Subject: [PATCH 16/24] Fixing images alignment in portrait mode --- .../lib/src/message_widget/reactions/reactions_align.dart | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index 0808092b..9985bd43 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -97,8 +97,9 @@ double _landScapeAlign( possible. */ const constant = 3000; - - if (user?.id == message.user?.id) { + if (hasAttachments) { + result = 0; + } else if (user?.id == message.user?.id) { if (divFactor >= 1.7) { result = shiftFactor - maxWidth / constant; } else { From dcf5abc11884b085321eec4b6142d7150a73c12c Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Sun, 26 Feb 2023 16:53:13 +0100 Subject: [PATCH 17/24] Fixing some measures --- .../reactions/reactions_align.dart | 24 ++++++++++++------- .../lib/src/utils/extensions.dart | 2 +- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index 9985bd43..639fad4c 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -18,8 +18,12 @@ double calculateReactionsHorizontalAlignmentValue( final maxHeight = constraints.maxHeight; final roughSentenceSize = message.roughMessageSize(fontSize); + print('roughSentenceSize: $roughSentenceSize'); + print('maxSize: $maxSize'); final hasAttachments = message.attachments.isNotEmpty; - final divFactor = hasAttachments + final isReply = message.quotedMessageId != null; + final isAttachment = hasAttachments && !isReply; + final divFactor = isAttachment ? 1 : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / maxSize)); @@ -31,7 +35,7 @@ double calculateReactionsHorizontalAlignmentValue( maxHeight, shiftFactor, divFactor, - hasAttachments, + isAttachment, ); } else { return _landScapeAlign( @@ -41,7 +45,7 @@ double calculateReactionsHorizontalAlignmentValue( maxHeight, shiftFactor, divFactor, - hasAttachments, + isAttachment, ); } } @@ -53,7 +57,7 @@ double _portraitAlign( double maxHeight, double shiftFactor, num divFactor, - bool hasAttachments, + bool isAttachment, ) { var result = 0.0; @@ -63,14 +67,14 @@ double _portraitAlign( const constant = 1300; if (user?.id == message.user?.id) { - if (divFactor >= 1.0 || hasAttachments) { + if (divFactor >= 1.0 || isAttachment) { result = shiftFactor - maxWidth / constant; } else { // Small messages, it is simpler to align then. result = 1.2 - divFactor; } } else { - if (divFactor >= 1.0 || hasAttachments) { + if (divFactor >= 1.0 || isAttachment) { result = shiftFactor + maxWidth / constant; } else { result = -(1.2 - divFactor); @@ -87,17 +91,21 @@ double _landScapeAlign( double maxHeight, double shiftFactor, num divFactor, - bool hasAttachments, + bool isAttachment, ) { var result = 0.0; + print('is attachment: $isAttachment'); + print('shiftFactor: $shiftFactor'); + print('divFactor: $divFactor'); + /* This is an empiric value. This number tries to approximate all the offset necessary for the position of reaction look the best way possible. */ const constant = 3000; - if (hasAttachments) { + if (isAttachment) { result = 0; } else if (user?.id == message.user?.id) { if (divFactor >= 1.7) { diff --git a/packages/stream_chat_flutter/lib/src/utils/extensions.dart b/packages/stream_chat_flutter/lib/src/utils/extensions.dart index bbe43690..8b575910 100644 --- a/packages/stream_chat_flutter/lib/src/utils/extensions.dart +++ b/packages/stream_chat_flutter/lib/src/utils/extensions.dart @@ -374,7 +374,7 @@ extension MessageX on Message { (min(quotedMessage!.text?.biggestLine().length ?? 0, 65)) + 6; if (quotedMessage!.attachments.isNotEmpty) { - quotedMessageLength += 40; + quotedMessageLength += 8; } if (quotedMessageLength > messageTextLength) { messageTextLength = quotedMessageLength; From 7586929a9c8006036648896629464789af2ef6e7 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Sun, 26 Feb 2023 17:16:19 +0100 Subject: [PATCH 18/24] Fixing calculus of message size when the message is a reply --- .../lib/src/utils/extensions.dart | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/utils/extensions.dart b/packages/stream_chat_flutter/lib/src/utils/extensions.dart index 8b575910..bf5b30fb 100644 --- a/packages/stream_chat_flutter/lib/src/utils/extensions.dart +++ b/packages/stream_chat_flutter/lib/src/utils/extensions.dart @@ -371,17 +371,25 @@ extension MessageX on Message { if (quotedMessage != null) { var quotedMessageLength = - (min(quotedMessage!.text?.biggestLine().length ?? 0, 65)) + 6; + (min(quotedMessage!.text?.biggestLine().length ?? 0, 65)) + 8; if (quotedMessage!.attachments.isNotEmpty) { quotedMessageLength += 8; } - if (quotedMessageLength > messageTextLength) { + + if (quotedMessageLength > messageTextLength * 1.2) { messageTextLength = quotedMessageLength; } } - return messageTextLength * (fontSize ?? 1) * 1.2; + // Quoted message have a smaller font, so it is necessary to reduce the + // size of the multiplier to count for the smaller font. + var multiplier = 1.2; + if (quotedMessage != null) { + multiplier = 1; + } + + return messageTextLength * (fontSize ?? 1) * multiplier; } /// It returns the message with the translated text if available locally From dc1b01f883779911cd9bd63a5953cb2b50f2356b Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Sun, 26 Feb 2023 17:16:36 +0100 Subject: [PATCH 19/24] Moving modal to the middle of the screen when message is big --- .../lib/src/message_widget/reactions/reactions_align.dart | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index 639fad4c..3fedbeff 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -66,6 +66,10 @@ double _portraitAlign( // possible. const constant = 1300; + print('is attachment: $isAttachment'); + print('shiftFactor: $shiftFactor'); + print('divFactor: $divFactor'); + if (user?.id == message.user?.id) { if (divFactor >= 1.0 || isAttachment) { result = shiftFactor - maxWidth / constant; @@ -109,7 +113,7 @@ double _landScapeAlign( result = 0; } else if (user?.id == message.user?.id) { if (divFactor >= 1.7) { - result = shiftFactor - maxWidth / constant; + result = 0; } else { // Small messages, it is simpler to align then. result = 1 - divFactor * 0.6; From 9dc56f55014c5b717ef6b0d7fa76d5e275a0d037 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Sun, 26 Feb 2023 17:29:35 +0100 Subject: [PATCH 20/24] Fixing div factory and making alignment symmetrical --- .../lib/src/message_widget/reactions/reactions_align.dart | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index 3fedbeff..ec149718 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -112,17 +112,17 @@ double _landScapeAlign( if (isAttachment) { result = 0; } else if (user?.id == message.user?.id) { - if (divFactor >= 1.7) { + if (divFactor >= 1.0) { result = 0; } else { // Small messages, it is simpler to align then. result = 1 - divFactor * 0.6; } } else { - if (divFactor >= 1.7) { + if (divFactor >= 1.0) { result = shiftFactor + maxWidth / constant; } else { - result = -(1.2 - divFactor * 0.6); + result = -(1 - divFactor * 0.6); } } From 4818d094af83322e2b23dec37383626d4630bda9 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Sun, 26 Feb 2023 17:53:22 +0100 Subject: [PATCH 21/24] Fixing modal in the middle for big messages in landscape --- .../lib/src/message_widget/reactions/reactions_align.dart | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index ec149718..da63f589 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -108,19 +108,18 @@ double _landScapeAlign( offset necessary for the position of reaction look the best way possible. */ - const constant = 3000; if (isAttachment) { result = 0; } else if (user?.id == message.user?.id) { - if (divFactor >= 1.0) { + if (divFactor >= 1.3) { result = 0; } else { // Small messages, it is simpler to align then. result = 1 - divFactor * 0.6; } } else { - if (divFactor >= 1.0) { - result = shiftFactor + maxWidth / constant; + if (divFactor >= 1.3) { + result = 0; } else { result = -(1 - divFactor * 0.6); } From 009860d96aa687cd3a2b3743397043d508c78044 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Sun, 26 Feb 2023 19:02:46 +0100 Subject: [PATCH 22/24] Refactoring modal alignment logic --- .../message_actions_modal.dart | 8 +- .../reactions/message_reactions_modal.dart | 8 +- .../reactions/reactions_align.dart | 122 +++--------------- .../lib/src/utils/extensions.dart | 4 +- 4 files changed, 24 insertions(+), 118 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart index d8f5614b..2ccb0bc2 100644 --- a/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_actions_modal/message_actions_modal.dart @@ -98,15 +98,11 @@ class _MessageActionsModalState extends State { Widget _showMessageOptionsModal() { final mediaQueryData = MediaQuery.of(context); - final size = mediaQueryData.size; final user = StreamChat.of(context).currentUser; final orientation = mediaQueryData.orientation; - final roughMaxSize = size.width * 2 / 3; final fontSize = widget.messageTheme.messageTextStyle?.fontSize; final streamChatThemeData = StreamChatTheme.of(context); - final numberOfReactions = - StreamChatConfiguration.of(context).reactionIcons.length; final channel = StreamChannel.of(context).channel; @@ -125,13 +121,11 @@ class _MessageActionsModalState extends State { builder: (context, constraints) { return Align( alignment: Alignment( - calculateReactionsHorizontalAlignmentValue( + calculateReactionsHorizontalAlignment( user, widget.message, constraints, - roughMaxSize, fontSize, - numberOfReactions, orientation, ), 0, diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart index 6e746f38..0703ce19 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/message_reactions_modal.dart @@ -40,17 +40,13 @@ class StreamMessageReactionsModal extends StatelessWidget { @override Widget build(BuildContext context) { - final size = MediaQuery.of(context).size; final user = StreamChat.of(context).currentUser; final _userPermissions = StreamChannel.of(context).channel.ownCapabilities; final orientation = MediaQuery.of(context).orientation; final hasReactionPermission = _userPermissions.contains(PermissionType.sendReaction); - final roughMaxSize = size.width * 2 / 3; final fontSize = messageTheme.messageTextStyle?.fontSize; - final numberOfReactions = - StreamChatConfiguration.of(context).reactionIcons.length; final child = Center( child: SingleChildScrollView( @@ -66,13 +62,11 @@ class StreamMessageReactionsModal extends StatelessWidget { builder: (context, constraints) { return Align( alignment: Alignment( - calculateReactionsHorizontalAlignmentValue( + calculateReactionsHorizontalAlignment( user, message, constraints, - roughMaxSize, fontSize, - numberOfReactions, orientation, ), 0, diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index da63f589..7f5f4cff 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -2,129 +2,47 @@ import 'package:flutter/material.dart'; import 'package:stream_chat_flutter/stream_chat_flutter.dart'; /// This method calculates the align that the modal of reactions should have. -/// THis is an approximation based on the size of the message and the +/// This is an approximation based on the size of the message and the /// available space in the screen. -double calculateReactionsHorizontalAlignmentValue( +double calculateReactionsHorizontalAlignment( User? user, Message message, BoxConstraints constraints, - double maxSize, double? fontSize, - int reactionsCount, Orientation orientation, ) { - final shiftFactor = reactionsCount < 5 ? (5 - reactionsCount) * 0.1 : 0.0; final maxWidth = constraints.maxWidth; - final maxHeight = constraints.maxHeight; final roughSentenceSize = message.roughMessageSize(fontSize); - print('roughSentenceSize: $roughSentenceSize'); - print('maxSize: $maxSize'); final hasAttachments = message.attachments.isNotEmpty; final isReply = message.quotedMessageId != null; final isAttachment = hasAttachments && !isReply; - final divFactor = isAttachment - ? 1 - : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / maxSize)); - if (orientation == Orientation.portrait) { - return _portraitAlign( - user, - message, - maxWidth, - maxHeight, - shiftFactor, - divFactor, - isAttachment, - ); - } else { - return _landScapeAlign( - user, - message, - maxWidth, - maxHeight, - shiftFactor, - divFactor, - isAttachment, - ); - } -} + // divFactor is the percentage of the available space that the message takes. + // When the divFactor is bigger than 0.5 that means that the messages is + // bigger than 50% of the available space and the modal should have an offset + // in the direction that the message grows. When the divFactor is smaller + // than 0.5 then the offset should be to he side opposite of the message + // growth. + // In resume, when divFactor > 0.5 then result > 0, when divFactor < 0.5 + // then result < 0. + var divFactor = 0.5; -double _portraitAlign( - User? user, - Message message, - double maxWidth, - double maxHeight, - double shiftFactor, - num divFactor, - bool isAttachment, -) { - var result = 0.0; - - // This is an empiric value. This number tries to approximate all the - // offset necessary for the position of reaction look the best way - // possible. - const constant = 1300; - - print('is attachment: $isAttachment'); - print('shiftFactor: $shiftFactor'); - print('divFactor: $divFactor'); - - if (user?.id == message.user?.id) { - if (divFactor >= 1.0 || isAttachment) { - result = shiftFactor - maxWidth / constant; - } else { - // Small messages, it is simpler to align then. - result = 1.2 - divFactor; - } - } else { - if (divFactor >= 1.0 || isAttachment) { - result = shiftFactor + maxWidth / constant; - } else { - result = -(1.2 - divFactor); - } - } - - return _capResult(result); -} - -double _landScapeAlign( - User? user, - Message message, - double maxWidth, - double maxHeight, - double shiftFactor, - num divFactor, - bool isAttachment, -) { - var result = 0.0; - - print('is attachment: $isAttachment'); - print('shiftFactor: $shiftFactor'); - print('divFactor: $divFactor'); - - /* - This is an empiric value. This number tries to approximate all the - offset necessary for the position of reaction look the best way - possible. - */ + // When in portrait, attachments normally take 75% of the screen, when in + // landscape, attachments normally take 50% of the screen. if (isAttachment) { - result = 0; - } else if (user?.id == message.user?.id) { - if (divFactor >= 1.3) { - result = 0; + if (orientation == Orientation.portrait) { + divFactor = 0.75; } else { - // Small messages, it is simpler to align then. - result = 1 - divFactor * 0.6; + divFactor = 0.5; } } else { - if (divFactor >= 1.3) { - result = 0; - } else { - result = -(1 - divFactor * 0.6); - } + divFactor = roughSentenceSize == 0 ? 0.5 : (roughSentenceSize / maxWidth); } + final signal = user?.id == message.user?.id ? 1 : -1; + final result = signal * (1 - divFactor * 2.0); + return _capResult(result); } diff --git a/packages/stream_chat_flutter/lib/src/utils/extensions.dart b/packages/stream_chat_flutter/lib/src/utils/extensions.dart index bf5b30fb..67b622db 100644 --- a/packages/stream_chat_flutter/lib/src/utils/extensions.dart +++ b/packages/stream_chat_flutter/lib/src/utils/extensions.dart @@ -384,9 +384,9 @@ extension MessageX on Message { // Quoted message have a smaller font, so it is necessary to reduce the // size of the multiplier to count for the smaller font. - var multiplier = 1.2; + var multiplier = 0.55; if (quotedMessage != null) { - multiplier = 1; + multiplier = 0.45; } return messageTextLength * (fontSize ?? 1) * multiplier; From 1f6c3790484765fc446274b4bd5cee179dcab93d Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Sun, 26 Feb 2023 19:05:46 +0100 Subject: [PATCH 23/24] Format comment --- .../lib/src/message_widget/reactions/reactions_align.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart index 7f5f4cff..e4e1ad48 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget/reactions/reactions_align.dart @@ -29,7 +29,7 @@ double calculateReactionsHorizontalAlignment( var divFactor = 0.5; // When in portrait, attachments normally take 75% of the screen, when in - // landscape, attachments normally take 50% of the screen. + // landscape, attachments normally take 50% of the screen. if (isAttachment) { if (orientation == Orientation.portrait) { divFactor = 0.75; From 33d2b4f7c064020494de8eeb2c09ba0ab6c8a054 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Thu, 30 Mar 2023 14:02:09 +0200 Subject: [PATCH 24/24] Bumping flutter --- .github/workflows/stream_flutter_workflow.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/stream_flutter_workflow.yml b/.github/workflows/stream_flutter_workflow.yml index 9de7ca4d..e18a8b7a 100644 --- a/.github/workflows/stream_flutter_workflow.yml +++ b/.github/workflows/stream_flutter_workflow.yml @@ -2,7 +2,7 @@ name: stream_flutter_workflow env: ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true' - flutter_version: "3.3.3" + flutter_version: "3.7.8" melos_version: "2.7.1" on: