feat: add spacing between messages bubbles

linagora · Oct 6, 2023 · 2a16ca7 · 2a16ca7
1 parent 0314f26
commit 2a16ca7
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/lib/pages/chat/chat_event_list.dart b/lib/pages/chat/chat_event_list.dart
@@ -8,7 +8,7 @@ import 'package:scroll_to_index/scroll_to_index.dart';
 
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pages/chat/chat.dart';
-import 'package:fluffychat/pages/chat/events/message.dart';
+import 'package:fluffychat/pages/chat/events/message/message.dart';
 import 'package:fluffychat/pages/user_bottom_sheet/user_bottom_sheet.dart';
 import 'package:fluffychat/utils/adaptive_bottom_sheet.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/filtered_timeline_extension.dart';

diff --git a/lib/pages/chat/events/message.dart → lib/pages/chat/events/message/message.dart b/lib/pages/chat/events/message.dart → lib/pages/chat/events/message/message.dart
@@ -1,12 +1,17 @@
 import 'dart:math' as math;
 
+import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pages/chat/chat.dart';
 import 'package:fluffychat/pages/chat/chat_horizontal_action_menu.dart';
 import 'package:fluffychat/pages/chat/context_item_chat_action.dart';
 import 'package:fluffychat/pages/chat/events/message/message_style.dart';
+import 'package:fluffychat/pages/chat/events/message_content.dart';
 import 'package:fluffychat/pages/chat/events/message_reactions.dart';
 import 'package:fluffychat/pages/chat/events/message_time.dart';
+import 'package:fluffychat/pages/chat/events/reply_content.dart';
+import 'package:fluffychat/pages/chat/events/state_message.dart';
+import 'package:fluffychat/pages/chat/events/verification_request_content.dart';
 import 'package:fluffychat/pages/chat/sticky_timstamp_widget.dart';
 import 'package:fluffychat/utils/date_time_extension.dart';
 import 'package:fluffychat/widgets/avatar/avatar.dart';
@@ -18,12 +23,6 @@ import 'package:flutter/services.dart';
 import 'package:linagora_design_flutter/colors/linagora_sys_colors.dart';
 import 'package:matrix/matrix.dart';
 
-import '../../../config/app_config.dart';
-import 'message_content.dart';
-import 'reply_content.dart';
-import 'state_message.dart';
-import 'verification_request_content.dart';
-
 typedef OnMenuAction = Function(BuildContext, ChatHorizontalActionMenu, Event);
 
 class Message extends StatelessWidget {
@@ -141,6 +140,11 @@ class Message extends StatelessWidget {
                   Container(
                     alignment: alignment,
                     padding: EdgeInsetsDirectional.only(
+                      top: MessageStyle.messageSpacing(
+                        displayTime,
+                        nextEvent,
+                        event,
+                      ),
                       start: 8,
                       end: selected || controller.responsive.isDesktop(context)
                           ? 8

diff --git a/lib/pages/chat/events/message/message_style.dart b/lib/pages/chat/events/message/message_style.dart
@@ -3,6 +3,7 @@ import 'package:fluffychat/di/global/get_it_initializer.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:fluffychat/utils/extension/build_context_extension.dart';
+import 'package:matrix/matrix.dart';
 
 class MessageStyle {
   static ResponsiveUtils responsiveUtils = getIt.get<ResponsiveUtils>();
@@ -68,4 +69,19 @@ class MessageStyle {
           MediaQuery.of(context).size.width * messageBubbleMobileRatioMaxWidth,
     );
   }
+
+  static double messageSpacing(
+    bool displayTime,
+    Event? nextEvent,
+    Event currentEvent,
+  ) {
+    // add spaces to messages only
+    if (nextEvent == null ||
+        displayTime ||
+        nextEvent.type != EventTypes.Message) {
+      return 0;
+    }
+
+    return currentEvent.senderId != nextEvent.senderId ? 8 : 4;
+  }
 }