Merge pull request #472 from pangeachat/toolbar-location-adjustments

Toolbar location adjustments

lib/pages/chat/events/message.dart

@@ -314,8 +314,9 @@ class Message extends StatelessWidget {
                                 padding: const EdgeInsets.only(left: 8),
                                 child: GestureDetector(
                                   // #Pangea
-                                  onTap: () =>
-                                      toolbarController?.showToolbar(context),
+                                  onTap: () => toolbarController?.showToolbar(
+                                    context,
+                                  ),
                                   onDoubleTap: () =>
                                       toolbarController?.showToolbar(context),
                                   // Pangea#
@@ -585,7 +586,9 @@ class Message extends StatelessWidget {
                           : MainAxisAlignment.start,
                       children: [
                         if (pangeaMessageEvent?.showMessageButtons ?? false)
-                          MessageButtons(toolbarController: toolbarController),
+                          MessageButtons(
+                            toolbarController: toolbarController,
+                          ),
                         MessageReactions(event, timeline),
                       ],
                     ),

lib/pangea/widgets/chat/message_toolbar.dart

@@ -58,7 +58,10 @@ class ToolbarDisplayController {
     );
   }
 
-  void showToolbar(BuildContext context, {MessageMode? mode}) {
+  void showToolbar(
+    BuildContext context, {
+    MessageMode? mode,
+  }) {
     bool toolbarUp = true;
     if (highlighted) return;
     if (controller.selectMode) {
@@ -78,8 +81,51 @@ class ToolbarDisplayController {
       final Size transformTargetSize = (targetRenderBox as RenderBox).size;
       messageWidth = transformTargetSize.width;
       final Offset targetOffset = (targetRenderBox).localToGlobal(Offset.zero);
-      final double screenHeight = MediaQuery.of(context).size.height;
-      toolbarUp = targetOffset.dy >= screenHeight / 2;
+
+      // If there is enough space above, procede as normal
+      // Else if there is enough space below, show toolbar underneath
+      if (targetOffset.dy < 320) {
+        final spaceBeneath = MediaQuery.of(context).size.height -
+            (targetOffset.dy + transformTargetSize.height);
+        if (spaceBeneath >= 320) {
+          toolbarUp = false;
+        }
+
+        // See if it's possible to scroll up to make space
+        else if (controller.scrollController.offset - targetOffset.dy + 320 >=
+                controller.scrollController.position.minScrollExtent &&
+            controller.scrollController.offset - targetOffset.dy + 320 <=
+                controller.scrollController.position.maxScrollExtent) {
+          controller.scrollController.animateTo(
+            controller.scrollController.offset - targetOffset.dy + 320,
+            duration: FluffyThemes.animationDuration,
+            curve: FluffyThemes.animationCurve,
+          );
+        }
+
+        // See if it's possible to scroll down to make space
+        else if (controller.scrollController.offset + spaceBeneath - 320 >=
+                controller.scrollController.position.minScrollExtent &&
+            controller.scrollController.offset + spaceBeneath - 320 <=
+                controller.scrollController.position.maxScrollExtent) {
+          controller.scrollController.animateTo(
+            controller.scrollController.offset + spaceBeneath - 320,
+            duration: FluffyThemes.animationDuration,
+            curve: FluffyThemes.animationCurve,
+          );
+          toolbarUp = false;
+        }
+
+        // If message is too big and can't scroll either way
+        // Scroll up as much as possible, and show toolbar above
+        else {
+          controller.scrollController.animateTo(
+            controller.scrollController.position.minScrollExtent,
+            duration: FluffyThemes.animationDuration,
+            curve: FluffyThemes.animationCurve,
+          );
+        }
+      }
     }
 
     final Widget overlayMessage = OverlayMessage(
@@ -106,7 +152,13 @@ class ToolbarDisplayController {
             ? CrossAxisAlignment.end
             : CrossAxisAlignment.start,
         children: [
-          toolbarUp ? toolbar! : overlayMessage,
+          toolbarUp
+              // Column is limited to screen height
+              // If message portion is too tall, decrease toolbar height
+              // as necessary to prevent toolbar from acting strange
+              // Problems may still occur if toolbar height is decreased too much
+              ? toolbar!
+              : overlayMessage,
           const SizedBox(height: 6),
           toolbarUp ? overlayMessage : toolbar!,
         ],
@@ -367,7 +419,8 @@ class MessageToolbarState extends State<MessageToolbar> {
 
   @override
   Widget build(BuildContext context) {
-    return Material(
+    return Flexible(
+      child: Material(
         type: MaterialType.transparency,
         child: Container(
           padding: const EdgeInsets.all(10),
@@ -446,6 +499,7 @@ class MessageToolbarState extends State<MessageToolbar> {
             ],
           ),
         ),
+      ),
     );
   }
 }