TW-508: Keep horizontal when open context popup menu

linagora · Aug 31, 2023 · 5ecd5c9 · 5ecd5c9
1 parent 2a5dd12
commit 5ecd5c9
Show file tree

Hide file tree

Showing 15 changed files with 150 additions and 113 deletions.
diff --git a/lib/config/app_config.dart b/lib/config/app_config.dart
@@ -44,7 +44,7 @@ abstract class AppConfig {
   static bool showDirectChatsInSpaces = true;
   static bool separateChatTypes = false;
   static bool autoplayImages = true;
-  static bool sendOnEnter = PlatformInfos.isMobile ? false : true;
+  static bool sendOnEnter = !PlatformInfos.isMobile;
   static bool experimentalVoip = false;
   static const bool hideTypingUsernames = false;
   static const bool hideAllStateEvents = false;

diff --git a/lib/pages/chat/chat.dart b/lib/pages/chat/chat.dart
@@ -13,6 +13,7 @@ import 'package:fluffychat/domain/model/download_file/download_file_for_preview_
 import 'package:fluffychat/domain/model/preview_file/document_uti.dart';
 import 'package:fluffychat/domain/model/preview_file/supported_preview_file_types.dart';
 import 'package:fluffychat/domain/usecase/download_file_for_preview_interactor.dart';
+import 'package:fluffychat/pages/chat/chat_context_menu_actions.dart';
 import 'package:fluffychat/domain/usecase/send_file_interactor.dart';
 import 'package:fluffychat/pages/chat/chat_horizontal_action_menu.dart';
 import 'package:fluffychat/pages/chat/chat_view.dart';
@@ -105,6 +106,7 @@ class ChatController extends State<Chat>
   final AutoScrollController scrollController = AutoScrollController();
   final AutoScrollController forwardListController = AutoScrollController();
   final ValueNotifier<String?> focusHover = ValueNotifier(null);
+  final ValueNotifier<bool> openingPopupMenu = ValueNotifier(false);
 
   FocusNode inputFocus = FocusNode();
 
@@ -1316,13 +1318,19 @@ class ChatController extends State<Chat>
   }
 
   void onHover(bool isHovered, int index, Event event) {
-    if (timeline!.events[index - 1].eventId == event.eventId &&
-        !responsive.isMobile(context) &&
-        !selectMode) {
+    if (index > 0 &&
+        timeline!.events[index - 1].eventId == event.eventId &&
+        responsive.isDesktop(context) &&
+        !selectMode &&
+        !openingPopupMenu.value) {
       focusHover.value = isHovered ? event.eventId : null;
     }
   }
 
+  void _handleStateContextMenu() {
+    openingPopupMenu.value = !openingPopupMenu.value;
+  }
+
   List<ContextMenuItemChatAction> listHorizontalActionMenuBuilder() {
     final listAction = [
       ChatHorizontalActionMenu.reply,
@@ -1358,97 +1366,67 @@ class ChatController extends State<Chat>
     }
   }
 
-  List<PopupMenuEntry> _popupMenuActionTile(
+  List<PopupMenuItem> _popupMenuActionTile(
     BuildContext context,
     Event event,
   ) {
-    return [
-      _buildSelectPopupMenuItem(context, event),
-      _buildCopyMessagePopupMenuItem(context, event),
-      _buildPinMessagePopupMenuItem(context, event),
-      _buildForwardPopupMenuItem(context, event),
+    final listAction = [
+      ChatContextMenuActions.select,
+      ChatContextMenuActions.copyMessage,
+      ChatContextMenuActions.pinMessage,
+      ChatContextMenuActions.forward,
     ];
+    return listAction.map((action) {
+      return PopupMenuItem(
+        padding: EdgeInsets.zero,
+        child: popupItem(
+          context,
+          action.getTitle(context),
+          iconAction: action.getIcon(),
+          onCallbackAction: () => _handleClickOnContextMenuItem(
+            action,
+            event,
+          ),
+        ),
+      );
+    }).toList();
   }
 
-  PopupMenuEntry _buildSelectPopupMenuItem(
-    BuildContext context,
-    Event event,
-  ) {
-    return PopupMenuItem(
-      padding: EdgeInsets.zero,
-      child: popupItem(
-        context,
-        L10n.of(context)!.select,
-        iconAction: Icons.check_circle_outline,
-        onCallbackAction: () {
-          onSelectMessage(event);
-        },
-      ),
-    );
-  }
-
-  PopupMenuEntry _buildCopyMessagePopupMenuItem(
-    BuildContext context,
-    Event event,
-  ) {
-    return PopupMenuItem(
-      padding: EdgeInsets.zero,
-      child: popupItem(
-        context,
-        L10n.of(context)!.copyMessageText,
-        iconAction: Icons.content_copy,
-        onCallbackAction: () {
-          onSelectMessage(event);
-          copyEventsAction();
-        },
-      ),
-    );
-  }
-
-  PopupMenuEntry _buildPinMessagePopupMenuItem(
-    BuildContext context,
-    Event event,
-  ) {
-    return PopupMenuItem(
-      padding: EdgeInsets.zero,
-      child: popupItem(
-        context,
-        L10n.of(context)!.pinMessage,
-        iconAction: Icons.push_pin,
-        onCallbackAction: () {
-          onSelectMessage(event);
-          pinEvent();
-        },
-      ),
-    );
-  }
-
-  PopupMenuEntry _buildForwardPopupMenuItem(
-    BuildContext context,
+  void _handleClickOnContextMenuItem(
+    ChatContextMenuActions action,
     Event event,
   ) {
-    return PopupMenuItem(
-      padding: EdgeInsets.zero,
-      child: popupItem(
-        context,
-        L10n.of(context)!.forward,
-        iconAction: Icons.shortcut,
-        onCallbackAction: () {
-          onSelectMessage(event);
-          forwardEventsAction();
-        },
-      ),
-    );
+    switch (action) {
+      case ChatContextMenuActions.select:
+        onSelectMessage(event);
+        break;
+      case ChatContextMenuActions.copyMessage:
+        onSelectMessage(event);
+        copyEventsAction();
+        break;
+      case ChatContextMenuActions.pinMessage:
+        onSelectMessage(event);
+        pinEvent();
+        break;
+      case ChatContextMenuActions.forward:
+        onSelectMessage(event);
+        forwardEventsAction();
+        break;
+    }
   }
 
   void handleContextMenuAction(
     BuildContext context,
     Event event,
   ) {
+    _handleStateContextMenu();
     openPopupMenuAction(
       context,
       context.getCurrentRelativeRectOfWidget(),
       _popupMenuActionTile(context, event),
+      onClose: () {
+        _handleStateContextMenu();
+      },
     );
   }
 

diff --git a/lib/pages/chat/chat_context_menu_actions.dart b/lib/pages/chat/chat_context_menu_actions.dart
@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
+
+enum ChatContextMenuActions {
+  select,
+  copyMessage,
+  pinMessage,
+  forward;
+
+  String getTitle(BuildContext context) {
+    switch (this) {
+      case ChatContextMenuActions.select:
+        return L10n.of(context)!.select;
+      case ChatContextMenuActions.copyMessage:
+        return L10n.of(context)!.copyMessageText;
+      case ChatContextMenuActions.pinMessage:
+        return L10n.of(context)!.pinMessage;
+      case ChatContextMenuActions.forward:
+        return L10n.of(context)!.forward;
+    }
+  }
+
+  IconData getIcon() {
+    switch (this) {
+      case ChatContextMenuActions.select:
+        return Icons.check_circle_outline;
+      case ChatContextMenuActions.copyMessage:
+        return Icons.content_copy;
+      case ChatContextMenuActions.pinMessage:
+        return Icons.push_pin;
+      case ChatContextMenuActions.forward:
+        return Icons.shortcut;
+    }
+  }
+}
diff --git a/lib/pages/chat/events/message/message_style.dart b/lib/pages/chat/events/message/message_style.dart
@@ -15,6 +15,7 @@ class MessageStyle {
   static const notSameSenderPadding = EdgeInsets.only(left: 8.0, bottom: 4);
 
   static const double buttonHeight = 66;
+
   static List<BoxShadow> boxShadow(BuildContext context) {
     return Theme.of(context).brightness == Brightness.light
         ? const [
@@ -39,6 +40,7 @@ class MessageStyle {
   }
 
   static int get messageFlexMobile => 7;
+
   static int get replyIconFlexMobile => 2;
 
   static TextStyle? displayTime(BuildContext context) =>
@@ -50,6 +52,7 @@ class MessageStyle {
           );
 
   static double get forwardContainerSize => 40.0;
+
   static Color? forwardColorBackground(context) =>
       Theme.of(context).colorScheme.surfaceTint.withOpacity(0.08);
 
@@ -58,12 +61,11 @@ class MessageStyle {
   static const double messageBubbleTabletRatioMaxWidth = 0.50;
 
   static double messageBubbleWidth(BuildContext context) {
-    if (responsiveUtils.isDesktop(context)) {
-      return messageBubbleDesktopMaxWidth;
-    } else if (responsiveUtils.isTablet(context)) {
-      return context.width * messageBubbleTabletRatioMaxWidth;
-    } else {
-      return context.width * messageBubbleMobileRatioMaxWidth;
-    }
+    return context.responsiveValue<double>(
+      desktop: messageBubbleDesktopMaxWidth,
+      tablet: context.width * messageBubbleTabletRatioMaxWidth,
+      mobile:
+          MediaQuery.of(context).size.width * messageBubbleMobileRatioMaxWidth,
+    );
   }
 }
diff --git a/lib/pages/chat/events/message_content.dart b/lib/pages/chat/events/message_content.dart
@@ -82,7 +82,8 @@ class MessageContent extends StatelessWidget {
           leading: CloseButton(onPressed: Navigator.of(context).pop),
           title: Text(
             l10n.whyIsThisMessageEncrypted,
-            style: TextStyle(fontSize: MessageContentStyle.appBarFontSize),
+            style:
+                const TextStyle(fontSize: MessageContentStyle.appBarFontSize),
           ),
         ),
         body: SafeArea(
@@ -426,7 +427,7 @@ class _MessageImageBuilder extends StatelessWidget {
     return ImageBubble(
       event,
       width: MessageContentStyle.imageBubbleWidth(context),
-      height: MessageContentStyle.imageBubbleHeight,
+      height: MessageContentStyle.imageBubbleHeight(context),
       fit: BoxFit.cover,
       onTapSelectMode: onTapSelectMode,
       onTapPreview: onTapPreview,

diff --git a/lib/pages/chat/events/message_content_style.dart b/lib/pages/chat/events/message_content_style.dart
@@ -5,17 +5,28 @@ import 'package:flutter/material.dart';
 class MessageContentStyle {
   static ResponsiveUtils responsiveUtils = getIt.get<ResponsiveUtils>();
 
-  static int get maxLengthTextInline => 180;
-  static double get appBarFontSize => 16.0;
+  static const int maxLengthTextInline = 180;
+  static const double appBarFontSize = 16.0;
+
   static double imageBubbleWidth(BuildContext context) {
     if (responsiveUtils.isDesktop(context)) {
-      return 500;
+      return imageBubbleWidthForWeb;
+    }
+    return imageBubbleWidthForMobileAndTablet;
+  }
+
+  static double imageBubbleHeight(BuildContext context) {
+    if (responsiveUtils.isDesktop(context)) {
+      return imageBubbleHeightForWeb;
     }
-    return 256;
+    return imageBubbleHeightForMobileAndTable;
   }
 
-  static double get imageBubbleHeight => 500;
-  static Color get backgroundColorButton => Colors.white.withAlpha(64);
+  static const double imageBubbleHeightForWeb = 420;
+  static const double imageBubbleHeightForMobileAndTable = 320;
+  static const double imageBubbleWidthForMobileAndTablet = 256;
+  static const double imageBubbleWidthForWeb = 500;
+  static Color backgroundColorButton = Colors.white.withAlpha(64);
 
-  static double get letterSpacingMessageContent => -0.15;
+  static const double letterSpacingMessageContent = -0.15;
 }
diff --git a/lib/pages/chat/events/sending_image_info_widget.dart b/lib/pages/chat/events/sending_image_info_widget.dart
@@ -71,8 +71,8 @@ class SendingImageInfoWidget extends StatelessWidget {
           child: Image.file(
             File(matrixFile.filePath!),
             width: MessageContentStyle.imageBubbleWidth(context),
-            height: MessageContentStyle.imageBubbleHeight,
-            cacheHeight: MessageContentStyle.imageBubbleHeight.toInt(),
+            height: MessageContentStyle.imageBubbleHeight(context),
+            cacheHeight: MessageContentStyle.imageBubbleHeight(context).toInt(),
             cacheWidth: MessageContentStyle.imageBubbleWidth(context).toInt(),
             fit: BoxFit.cover,
             filterQuality: FilterQuality.medium,

diff --git a/lib/pages/chat/events/sending_video_widget.dart b/lib/pages/chat/events/sending_video_widget.dart
@@ -131,7 +131,7 @@ class _SendingVideoWidgetState extends State<SendingVideoWidget>
     if (imageWidth == null || imageHeight == null) {
       return (
         MessageContentStyle.imageBubbleWidth(context),
-        MessageContentStyle.imageBubbleHeight
+        MessageContentStyle.imageBubbleHeight(context)
       );
     }
 
@@ -140,7 +140,7 @@ class _SendingVideoWidgetState extends State<SendingVideoWidget>
     if (imageWidth <= imageHeight) {
       return (
         MessageContentStyle.imageBubbleWidth(context),
-        MessageContentStyle.imageBubbleHeight
+        MessageContentStyle.imageBubbleHeight(context)
       );
     } else {
       return (

diff --git a/lib/pages/chat/events/video_player.dart b/lib/pages/chat/events/video_player.dart
@@ -111,7 +111,7 @@ class EventVideoPlayerState extends State<EventVideoPlayer> {
         color: Colors.black,
         child: SizedBox(
           width: MessageContentStyle.imageBubbleWidth(context),
-          height: MessageContentStyle.imageBubbleHeight,
+          height: MessageContentStyle.imageBubbleHeight(context),
           child: chewieManager != null
               ? FittedBox(
                   fit: BoxFit.contain,

diff --git a/lib/pages/forward/forward_view.dart b/lib/pages/forward/forward_view.dart
@@ -136,7 +136,7 @@ class _ForwardButton extends StatelessWidget {
             alignment: Alignment.centerRight,
             child: TwakeIconButton(
               size: ForwardViewStyle.iconSendSize,
-              onPressed: forwardAction,
+              onTap: forwardAction,
               tooltip: L10n.of(context)!.send,
               imagePath: ImagePaths.icSend,
             ),
@@ -168,7 +168,7 @@ class _ForwardAppBar extends StatelessWidget {
           TwakeIconButton(
             tooltip: L10n.of(context)!.back,
             icon: Icons.arrow_back,
-            onPressed: () {
+            onTap: () {
               Matrix.of(context).shareContent = null;
               if (sendFromRoomId != null) {
                 context.go('/rooms/$sendFromRoomId');
@@ -227,7 +227,7 @@ class _ForwardAppBar extends StatelessWidget {
       actions: [
         TwakeIconButton(
           icon: Icons.search,
-          onPressed: () => isSearchBarShowNotifier.value = true,
+          onTap: () => isSearchBarShowNotifier.value = true,
           tooltip: L10n.of(context)!.search,
         ),
       ],

diff --git a/lib/pages/forward/recent_chat_title.dart b/lib/pages/forward/recent_chat_title.dart
@@ -34,7 +34,7 @@ class RecentChatsTitle extends StatelessWidget {
                 ),
                 icon:
                     isShowRecentlyChats ? Icons.expand_less : Icons.expand_more,
-                onPressed: toggleRecentChat,
+                onTap: toggleRecentChat,
                 tooltip: isShowRecentlyChats
                     ? L10n.of(context)!.shrink
                     : L10n.of(context)!.expand,