From df98fd5d8dc8e9c6fe2ec23bbf7c6a1b434c51d1 Mon Sep 17 00:00:00 2001 From: Leandro Borges Ferreira Date: Wed, 8 Feb 2023 20:38:27 +0100 Subject: [PATCH] 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) {