From d94b535001984218d03dc8dd0d4d208e2911502c Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Thu, 23 Apr 2020 13:36:30 +0200
Subject: [PATCH] Improve buttons bar

---
 lib/ui/screens/call_screen.dart | 66 +++++++++++++++++++--------------
 1 file changed, 39 insertions(+), 27 deletions(-)

diff --git a/lib/ui/screens/call_screen.dart b/lib/ui/screens/call_screen.dart
index d5de546..9607780 100644
--- a/lib/ui/screens/call_screen.dart
+++ b/lib/ui/screens/call_screen.dart
@@ -468,8 +468,7 @@ class _CallScreenState extends SafeState<CallScreen> {
     return Column(
       children: <Widget>[
         _canHideMenuBar ? Container() : _buildMembersArea(),
-        _buildVideosArea(),
-        _canHideMenuBar ? Container() : _buildFooterArea()
+        _buildVideosArea()
       ],
     );
   }
@@ -512,6 +511,9 @@ class _CallScreenState extends SafeState<CallScreen> {
           isStreamingVideo && _isLocalStreamVisible
               ? _buildLocalVideo()
               : Container(),
+
+          // Buttons bar
+          _canHideMenuBar ? Container() : _buildFooterArea()
         ],
       ),
     );
@@ -527,16 +529,19 @@ class _CallScreenState extends SafeState<CallScreen> {
       height: 50,
       width: 50,
       right: 10,
-      bottom: 10,
+      bottom: (_canHideMenuBar ? 10 : 80),
     );
   }
 
   /// Footer area
   Widget _buildFooterArea() {
-    return Material(
-      color: Colors.black,
+    return Positioned(
+      bottom: 10,
+      right: 0,
+      left: 0,
       child: Row(
         mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
           // Show / hide user video button
           _FooterButton(
@@ -556,6 +561,7 @@ class _CallScreenState extends SafeState<CallScreen> {
 
           // Hang up call
           _FooterButton(
+            width: 60,
             icon: Icon(Icons.phone, color: Colors.red),
             onPressed: () => _leaveCall(),
           ),
@@ -570,23 +576,22 @@ class _CallScreenState extends SafeState<CallScreen> {
           ),
 
           // Interrupt local streaming
-          Expanded(
-            child: PopupMenuButton<_PopupMenuOption>(
-              itemBuilder: (c) => [
-                // Switch camera
-                PopupMenuItem(
-                    enabled: isStreamingVideo,
-                    child: Text(tr("Switch camera")),
-                    value: _PopupMenuOption.SWITCH_CAMERA),
+          PopupMenuButton<_PopupMenuOption>(
+            offset: Offset(0, -110),
+            itemBuilder: (c) => [
+              // Switch camera
+              PopupMenuItem(
+                  enabled: isStreamingVideo,
+                  child: Text(tr("Switch camera")),
+                  value: _PopupMenuOption.SWITCH_CAMERA),
 
-                // Interrupt streaming
-                PopupMenuItem(
-                    child: Text(tr("Stop streaming")),
-                    value: _PopupMenuOption.STOP_STREAMING)
-              ],
-              icon: Icon(Icons.menu),
-              onSelected: (d) => _handleSelectedMenuOption(d),
-            ),
+              // Interrupt streaming
+              PopupMenuItem(
+                  child: Text(tr("Stop streaming")),
+                  value: _PopupMenuOption.STOP_STREAMING)
+            ],
+            child: _FooterButton(icon: Icon(Icons.menu), onPressed: null),
+            onSelected: (d) => _handleSelectedMenuOption(d),
           )
         ],
       ),
@@ -598,24 +603,31 @@ class _FooterButton extends StatelessWidget {
   final Function() onPressed;
   final Widget icon;
   final bool visible;
+  final double width;
 
   const _FooterButton({
     Key key,
     @required this.icon,
     @required this.onPressed,
     this.visible = true,
-  })  : assert(onPressed != null),
-        assert(icon != null),
+    this.width = 35,
+  })  : assert(icon != null),
         assert(visible != null),
         super(key: key);
 
   @override
   Widget build(BuildContext context) {
     if (!visible) return Container();
-    return Expanded(
-      child: IconButton(
-        icon: icon,
-        onPressed: () => onPressed(),
+    return Padding(
+      padding: const EdgeInsets.only(left: 8, right: 8),
+      child: Container(
+        width: width,
+        child: FloatingActionButton(
+          child: icon,
+          foregroundColor: Colors.white,
+          onPressed: onPressed == null ? null : () => onPressed(),
+          backgroundColor: Colors.black,
+        ),
       ),
     );
   }