message info/report message menu work with overlay

lib/pages/chat/chat.dart

@@ -115,6 +115,7 @@ class ChatController extends State<ChatPageWithRoom>
 
   late Choreographer choreographer = Choreographer(pangeaController, this);
   // Pangea#
+
   Room get room => sendingClient.getRoomById(roomId) ?? widget.room;
 
   late Client sendingClient;
@@ -896,7 +897,14 @@ class ChatController extends State<ChatPageWithRoom>
   }
 
   void reportEventAction() async {
+    // #Pangea
+    MatrixState.pAnyState.closeOverlay();
+    MatrixState.pAnyState.closeOverlay();
+    // Pangea#
     final event = selectedEvents.single;
+    // #Pangea
+    clearSelectedEvents();
+    // Pangea#
     final score = await showConfirmationDialog<int>(
       context: context,
       title: L10n.of(context)!.reportMessage,
@@ -1476,8 +1484,18 @@ class ChatController extends State<ChatPageWithRoom>
   bool get isArchived =>
       {Membership.leave, Membership.ban}.contains(room.membership);
 
-  void showEventInfo([Event? event]) =>
-      (event ?? selectedEvents.single).showInfoDialog(context);
+  void showEventInfo([Event? event])
+  // #Pangea
+  // =>
+  {
+    MatrixState.pAnyState.closeOverlay();
+    MatrixState.pAnyState.closeOverlay();
+    // Pangea#
+    (event ?? selectedEvents.single).showInfoDialog(context);
+    // #Pangea
+    clearSelectedEvents();
+    // Pangea#
+  }
 
   void onPhoneButtonTap() async {
     // VoIP required Android SDK 21

lib/pangea/utils/overlay.dart

@@ -28,13 +28,12 @@ class OverlayUtil {
     bool closePrevOverlay = true,
     bool targetScreen = false,
     Function? onDismiss,
+    bool centered = true,
   }) {
     try {
       if (closePrevOverlay) {
         MatrixState.pAnyState.closeOverlay();
       }
-      final LayerLinkAndKey layerLinkAndKey =
-          MatrixState.pAnyState.layerLinkAndKey(transformTargetId);
 
       final OverlayEntry entry = OverlayEntry(
         builder: (context) => AnimatedContainer(
@@ -48,14 +47,28 @@ class OverlayUtil {
                   onDismiss: onDismiss,
                 ),
               Positioned(
+                top: (targetScreen && !centered)
+                    ? FluffyThemes.isColumnMode(context)
+                        ? 20
+                        : 65
+                    : null,
+                right: (targetScreen && !centered)
+                    ? FluffyThemes.isColumnMode(context)
+                        ? 20
+                        : 15
+                    : null,
                 width: width,
                 height: height,
                 child: targetScreen
-                    ? Center(child: child)
+                    ? centered
+                        ? Center(child: child)
+                        : child
                     : CompositedTransformFollower(
                         targetAnchor: targetAnchor ?? Alignment.topLeft,
                         followerAnchor: followerAnchor ?? Alignment.topLeft,
-                        link: layerLinkAndKey.link,
+                        link: MatrixState.pAnyState
+                            .layerLinkAndKey(transformTargetId)
+                            .link,
                         showWhenUnlinked: false,
                         offset: offset ?? Offset.zero,
                         child: child,

lib/pangea/widgets/chat/overlay_header.dart

@@ -1,5 +1,6 @@
 import 'package:fluffychat/pages/chat/chat.dart';
 import 'package:fluffychat/pages/chat/chat_app_bar_title.dart';
+import 'package:fluffychat/pangea/utils/overlay.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:matrix/matrix.dart';
@@ -67,21 +68,67 @@ class OverlayHeader extends StatelessWidget {
             tooltip: L10n.of(context)!.redactMessage,
             onPressed: controller.redactEventsAction,
           ),
-        PopupMenuButton<_EventContextAction>(
-          onSelected: (action) {
-            switch (action) {
-              case _EventContextAction.info:
-                controller.showEventInfo();
-                controller.clearSelectedEvents();
-                break;
-              case _EventContextAction.report:
-                controller.reportEventAction();
-                break;
-            }
-          },
-          itemBuilder: (context) => [
-            PopupMenuItem(
-              value: _EventContextAction.info,
+        IconButton(
+          padding: const EdgeInsets.only(bottom: 6),
+          icon: Icon(
+            Icons.more_horiz,
+            color: Theme.of(context).colorScheme.onSurface,
+          ),
+          onPressed: () => showPopup(context),
+        ),
+      ],
+    );
+  }
+
+  void showPopup(BuildContext context) {
+    OverlayUtil.showOverlay(
+      context: context,
+      child: SelectionPopup(controller: controller),
+      transformTargetId: "",
+      targetAnchor: Alignment.center,
+      followerAnchor: Alignment.center,
+      backgroundColor: Colors.transparent,
+      closePrevOverlay: false,
+      targetScreen: true,
+      onDismiss: closeToolbar,
+      centered: false,
+    );
+  }
+}
+
+class SelectionPopup extends StatelessWidget {
+  ChatController controller;
+
+  SelectionPopup({
+    required this.controller,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      type: MaterialType.transparency,
+      child: Container(
+        // padding: const EdgeInsets.all(5),
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.surfaceContainer,
+          border: Border.all(
+            width: 3,
+            color: Theme.of(context).colorScheme.surfaceContainerHighest,
+          ),
+          borderRadius: const BorderRadius.all(
+            Radius.circular(20),
+          ),
+        ),
+        constraints: const BoxConstraints(
+          maxWidth: 200,
+          maxHeight: 200,
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            TextButton(
+              onPressed: controller.showEventInfo,
               child: Row(
                 mainAxisSize: MainAxisSize.min,
                 children: [
@@ -91,24 +138,27 @@ class OverlayHeader extends StatelessWidget {
                 ],
               ),
             ),
-            if (selectedEvent.status.isSent)
-              PopupMenuItem(
-                value: _EventContextAction.report,
-                child: Row(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    const Icon(
-                      Icons.shield_outlined,
-                      color: Colors.red,
-                    ),
-                    const SizedBox(width: 12),
-                    Text(L10n.of(context)!.reportMessage),
-                  ],
-                ),
+            Divider(
+              color: Theme.of(context).colorScheme.surfaceContainerHighest,
+              height: 5,
+            ),
+            TextButton(
+              onPressed: controller.reportEventAction,
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  const Icon(
+                    Icons.shield_outlined,
+                    color: Colors.red,
+                  ),
+                  const SizedBox(width: 12),
+                  Text(L10n.of(context)!.reportMessage),
+                ],
               ),
+            ),
           ],
         ),
-      ],
+      ),
     );
   }
 }