TW-1787: Improve when leave chat (#1842)

* TW-1787: Move UI of action items into context menu widget * TW-1787: Update context menu for chat screen * TW-1787: Update context menu for chat list * TW-1787: Update context menu for pinned screen
linagora · Jun 10, 2024 · ede1513 · ede1513
1 parent 692e477
commit ede1513
Show file tree

Hide file tree

Showing 13 changed files with 350 additions and 100 deletions.
diff --git a/lib/pages/chat/chat.dart b/lib/pages/chat/chat.dart
@@ -12,6 +12,7 @@ import 'package:fluffychat/presentation/model/chat/view_event_list_ui_state.dart
 import 'package:fluffychat/utils/extension/basic_event_extension.dart';
 import 'package:fluffychat/utils/extension/event_status_custom_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/filtered_timeline_extension.dart';
+import 'package:fluffychat/widgets/context_menu/context_menu_action.dart';
 import 'package:fluffychat/widgets/mixins/popup_menu_widget_style.dart';
 import 'package:fluffychat/widgets/mixins/twake_context_menu_mixin.dart';
 import 'package:flutter_typeahead/flutter_typeahead.dart';
@@ -1394,10 +1395,7 @@ class ChatController extends State<Chat>
     }
   }
 
-  List<Widget> _popupMenuActionTile(
-    BuildContext context,
-    Event event,
-  ) {
+  List<ChatContextMenuActions> _getListPopupMenuActions(Event event) {
     final listAction = [
       ChatContextMenuActions.select,
       if (event.isCopyable) ChatContextMenuActions.copyMessage,
@@ -1406,25 +1404,26 @@ class ChatController extends State<Chat>
       if (PlatformInfos.isWeb && event.hasAttachment)
         ChatContextMenuActions.downloadFile,
     ];
-    return listAction.map((action) {
-      return popupItemByTwakeAppRouter(
-        context,
-        action.getTitle(
+    return listAction;
+  }
+
+  List<ContextMenuAction> _mapPopupMenuActionsToContextMenuActions(
+    List<ChatContextMenuActions> listActions,
+    Event event,
+  ) {
+    return listActions.map((action) {
+      return ContextMenuAction(
+        name: action.getTitle(
           context,
           unpin: isUnpinEvent(event),
           isSelected: isSelected(event),
         ),
-        iconAction: action.getIconData(
+        icon: action.getIconData(
           unpin: isUnpinEvent(event),
         ),
         imagePath: action.getImagePath(
           unpin: isUnpinEvent(event),
         ),
-        isClearCurrentPage: false,
-        onCallbackAction: () => _handleClickOnContextMenuItem(
-          action,
-          event,
-        ),
       );
     }).toList();
   }
@@ -1461,15 +1460,27 @@ class ChatController extends State<Chat>
     BuildContext context,
     Event event,
     TapDownDetails tapDownDetails,
-  ) {
+  ) async {
     final offset = tapDownDetails.globalPosition;
+    final listPopupMenuActions = _getListPopupMenuActions(event);
+    final listContextMenuActions = _mapPopupMenuActionsToContextMenuActions(
+      listPopupMenuActions,
+      event,
+    );
     _handleStateContextMenu();
-    showTwakeContextMenu(
+    final selectedActionIndex = await showTwakeContextMenu(
       offset: offset,
       context: context,
-      builder: (context) => _popupMenuActionTile(context, event),
+      listActions: listContextMenuActions,
       onClose: _handleStateContextMenu,
     );
+
+    if (selectedActionIndex != null && selectedActionIndex is int) {
+      _handleClickOnContextMenuItem(
+        listPopupMenuActions[selectedActionIndex],
+        event,
+      );
+    }
   }
 
   void hideKeyboardChatScreen() {
@@ -1792,14 +1803,22 @@ class ChatController extends State<Chat>
   void handleAppbarMenuAction(
     BuildContext context,
     TapDownDetails tapDownDetails,
-  ) {
+  ) async {
     final offset = tapDownDetails.globalPosition;
-    showTwakeContextMenu(
+    final listAppBarActions = _getListActionAppBarMenu();
+    final listContextMenuActions =
+        _mapAppbarMenuActionToContextMenuAction(listAppBarActions);
+
+    final selectedActionIndex = await showTwakeContextMenu(
       offset: offset,
       context: context,
-      builder: (_) =>
-          _appbarMenuActionTile(context, _getListActionAppBarMenu()),
+      listActions: listContextMenuActions,
     );
+
+    if (selectedActionIndex != null && selectedActionIndex is int) {
+      final selectedAction = listAppBarActions[selectedActionIndex];
+      onSelectedAppBarActions(selectedAction);
+    }
   }
 
   List<ChatAppBarActions> _getListActionAppBarMenu() {
@@ -1829,23 +1848,19 @@ class ChatController extends State<Chat>
     ];
   }
 
-  List<Widget> _appbarMenuActionTile(
-    BuildContext context,
+  List<ContextMenuAction> _mapAppbarMenuActionToContextMenuAction(
     List<ChatAppBarActions> listAction,
   ) {
     return listAction.map((action) {
-      return popupItemByTwakeAppRouter(
-        context,
-        action.getTitle(context),
-        iconAction: action.getIcon(),
+      return ContextMenuAction(
+        name: action.getTitle(context),
+        icon: action.getIcon(),
         colorIcon: action.getColorIcon(context),
         styleName: action == ChatAppBarActions.leaveGroup
             ? PopupMenuWidgetStyle.defaultItemTextStyle(context)?.copyWith(
                 color: action.getColorIcon(context),
               )
             : null,
-        isClearCurrentPage: false,
-        onCallbackAction: () => onSelectedAppBarActions(action),
       );
     }).toList();
   }

diff --git a/lib/pages/chat/chat_event_list.dart b/lib/pages/chat/chat_event_list.dart
@@ -4,6 +4,7 @@ import 'package:fluffychat/pages/chat/group_chat_empty_view.dart';
 import 'package:fluffychat/pages/chat_draft/draft_chat_empty_widget.dart';
 import 'package:fluffychat/presentation/model/search/presentation_search.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
+import 'package:fluffychat/widgets/context_menu/context_menu_action.dart';
 import 'package:flutter/material.dart';
 
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -189,6 +190,13 @@ class ChatEventList extends StatelessWidget {
                               );
                             },
                             onLongPress: controller.onSelectMessage,
+                            listAction: controller
+                                .listHorizontalActionMenuBuilder(event)
+                                .map((action) {
+                              return ContextMenuAction(
+                                name: action.action.name,
+                              );
+                            }).toList(),
                           )
                         : const SizedBox(),
                   );

diff --git a/lib/pages/chat/chat_pinned_events/pinned_messages.dart b/lib/pages/chat/chat_pinned_events/pinned_messages.dart
@@ -22,6 +22,7 @@ import 'package:fluffychat/utils/localized_exception_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
 import 'package:fluffychat/utils/platform_infos.dart';
 import 'package:fluffychat/utils/twake_snackbar.dart';
+import 'package:fluffychat/widgets/context_menu/context_menu_action.dart';
 import 'package:fluffychat/widgets/matrix.dart';
 import 'package:fluffychat/widgets/mixins/popup_context_menu_action_mixin.dart';
 import 'package:fluffychat/widgets/mixins/popup_menu_widget_mixin.dart';
@@ -216,7 +217,26 @@ class PinnedMessagesController extends State<PinnedMessages>
       builder: (context) {
         return Column(
           mainAxisSize: MainAxisSize.min,
-          children: pinnedMessagesActionsList(context, event),
+          children: getPinnedMessagesActionsList(event).map((action) {
+            return popupItemByTwakeAppRouter(
+              context,
+              action.getTitle(
+                context,
+                unpin: event.isPinned,
+                isSelected: isSelected(event),
+              ),
+              iconAction: action.getIconData(unpin: event.isPinned),
+              imagePath: action.getImagePath(unpin: event.isPinned),
+              colorIcon:
+                  action == ChatContextMenuActions.pinChat && event.isPinned
+                      ? Theme.of(context).colorScheme.onSurface
+                      : null,
+              onCallbackAction: () => _handleClickOnContextMenuItem(
+                action,
+                event,
+              ),
+            );
+          }).toList(),
         );
       },
     );
@@ -284,21 +304,12 @@ class PinnedMessagesController extends State<PinnedMessages>
     openingPopupMenu.toggle();
   }
 
-  // Used for "Right Click" Context Menu
   List<Widget> pinnedMessagesActionsList(
     BuildContext context,
+    List<ChatContextMenuActions> actions,
     Event event,
   ) {
-    final listAction = [
-      ChatContextMenuActions.pinChat,
-      ChatContextMenuActions.select,
-      ChatContextMenuActions.jumpToMessage,
-      ChatContextMenuActions.copyMessage,
-      ChatContextMenuActions.forward,
-      if (PlatformInfos.isWeb && event.hasAttachment)
-        ChatContextMenuActions.downloadFile,
-    ];
-    return listAction.map((action) {
+    return actions.map((action) {
       return popupItemByTwakeAppRouter(
         context,
         action.getTitle(
@@ -319,13 +330,36 @@ class PinnedMessagesController extends State<PinnedMessages>
     }).toList();
   }
 
-  // Used for "More" Context Menu
-  List<Widget> _pinnedMessagesActionsTileList(
+  List<ChatContextMenuActions> getPinnedMessagesActionsList(Event event) {
+    final listAction = [
+      ChatContextMenuActions.pinChat,
+      ChatContextMenuActions.select,
+      ChatContextMenuActions.jumpToMessage,
+      ChatContextMenuActions.copyMessage,
+      ChatContextMenuActions.forward,
+      if (PlatformInfos.isWeb && event.hasAttachment)
+        ChatContextMenuActions.downloadFile,
+    ];
+    return listAction;
+  }
+
+  List<ContextMenuAction> pinnedMessagesContextMenuActionsList(
     BuildContext context,
     Event event,
   ) {
-    final actionTiles = pinnedMessagesActionsList(context, event).map((action) {
-      return action;
+    final actionTiles = getPinnedMessagesActionsList(event).map((action) {
+      return ContextMenuAction(
+        name: action.getTitle(
+          context,
+          unpin: event.isPinned,
+          isSelected: isSelected(event),
+        ),
+        icon: action.getIconData(unpin: event.isPinned),
+        imagePath: action.getImagePath(unpin: event.isPinned),
+        colorIcon: action == ChatContextMenuActions.pinChat && event.isPinned
+            ? Theme.of(context).colorScheme.onSurface
+            : null,
+      );
     }).toList();
     return actionTiles;
   }
@@ -382,15 +416,22 @@ class PinnedMessagesController extends State<PinnedMessages>
     BuildContext context,
     Event event,
     TapDownDetails tapDownDetails,
-  ) {
+  ) async {
     final offset = tapDownDetails.globalPosition;
+    final listActions = pinnedMessagesContextMenuActionsList(context, event);
     _handleStateContextMenu();
-    showTwakeContextMenu(
+    final selectedActionIndex = await showTwakeContextMenu(
       context: context,
       offset: offset,
-      builder: (context) => _pinnedMessagesActionsTileList(context, event),
+      listActions: listActions,
       onClose: _handleStateContextMenu,
     );
+    if (selectedActionIndex != null && selectedActionIndex is int) {
+      _handleClickOnContextMenuItem(
+        getPinnedMessagesActionsList(event)[selectedActionIndex],
+        event,
+      );
+    }
   }
 
   void _listenRoomUpdateEvent() {

diff --git a/lib/pages/chat/chat_pinned_events/pinned_messages_screen.dart b/lib/pages/chat/chat_pinned_events/pinned_messages_screen.dart
@@ -98,13 +98,22 @@ class PinnedMessagesScreen extends StatelessWidget {
                               selectMode: selectedEvents.isNotEmpty,
                               onSelect: controller.onSelectMessage,
                               selected: controller.isSelected(event),
-                              menuChildren: (context) => controller
-                                  .pinnedMessagesActionsList(context, event),
+                              menuChildren: (context) =>
+                                  controller.pinnedMessagesActionsList(
+                                context,
+                                controller.getPinnedMessagesActionsList(event),
+                                event,
+                              ),
                               onLongPress: (event) =>
                                   controller.onLongPressMessage(
                                 context,
                                 event,
                               ),
+                              listAction: controller
+                                  .pinnedMessagesContextMenuActionsList(
+                                context,
+                                event,
+                              ),
                             );
                           },
                         );

diff --git a/lib/pages/chat/events/message/message.dart b/lib/pages/chat/events/message/message.dart
@@ -16,6 +16,7 @@ import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/filtered_timeline_extension.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
 import 'package:fluffychat/widgets/avatar/avatar.dart';
+import 'package:fluffychat/widgets/context_menu/context_menu_action.dart';
 import 'package:fluffychat/widgets/swipeable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
@@ -61,6 +62,7 @@ class Message extends StatefulWidget {
   final FocusNode? focusNode;
   final void Function(Event)? timestampCallback;
   final void Function(Event)? onLongPress;
+  final List<ContextMenuAction> listAction;
 
   const Message(
     this.event, {
@@ -84,6 +86,7 @@ class Message extends StatefulWidget {
     this.focusNode,
     this.timestampCallback,
     this.onLongPress,
+    required this.listAction,
   });
 
   /// Indicates wheither the user may use a mouse instead
@@ -204,6 +207,7 @@ class _MessageState extends State<Message> {
               menuChildren: widget.menuChildren,
               focusNode: widget.focusNode,
               onLongPress: widget.onLongPress,
+              listActions: widget.listAction,
             ),
           ),
         ];

diff --git a/lib/pages/chat/events/message/message_content_with_timestamp_builder.dart b/lib/pages/chat/events/message/message_content_with_timestamp_builder.dart
@@ -10,6 +10,7 @@ import 'package:fluffychat/utils/date_time_extension.dart';
 import 'package:fluffychat/utils/extension/event_status_custom_extension.dart';
 import 'package:fluffychat/utils/matrix_sdk_extensions/event_extension.dart';
 import 'package:fluffychat/utils/responsive/responsive_utils.dart';
+import 'package:fluffychat/widgets/context_menu/context_menu_action.dart';
 import 'package:fluffychat/widgets/context_menu/context_menu_action_item.dart';
 import 'package:fluffychat/widgets/context_menu/twake_context_menu_area.dart';
 import 'package:fluffychat/widgets/twake_components/twake_icon_button.dart';
@@ -32,6 +33,7 @@ class MessageContentWithTimestampBuilder extends StatelessWidget {
   final bool selectMode;
   final ContextMenuBuilder? menuChildren;
   final FocusNode? focusNode;
+  final List<ContextMenuAction> listActions;
 
   static final responsiveUtils = getIt.get<ResponsiveUtils>();
 
@@ -50,6 +52,7 @@ class MessageContentWithTimestampBuilder extends StatelessWidget {
     this.onMenuAction,
     this.menuChildren,
     this.focusNode,
+    required this.listActions,
   });
 
   @override
@@ -78,6 +81,7 @@ class MessageContentWithTimestampBuilder extends StatelessWidget {
           builder: menuChildren != null
               ? (context) => menuChildren!.call(context)
               : null,
+          listActions: listActions,
           child: Container(
             alignment:
                 event.isOwnMessage ? Alignment.topRight : Alignment.topLeft,