conf: fix participant menu focus

Superposing a MouseArea and a hover in a child
component may cause focus problems.
This replaces MouseArea for a HoverHandler
in the participant moderator menu.

Change-Id: Ic4eb763c79f04198d3a2a2f24636fb2a09dca172
GitLab: #601

src/mainview/components/ParticipantOverlay.qml

@@ -61,8 +61,6 @@ Item {
         }
     }
 
-    z: 1
-
     function setAvatar(show, uri, isLocal) {
         if (!show)
             avatar.active = false
@@ -136,47 +134,56 @@ Item {
         }
     }
 
-    // Participant background and buttons for moderation
-    MouseArea {
-        id: participantRect
-
-        anchors.fill: parent
-        opacity: 0
-        z: 1
-
-        propagateComposedEvents: true
-        hoverEnabled: true
-        onPositionChanged: {
+    HoverHandler {
+        onPointChanged: {
             participantRect.opacity = 1
             fadeOutTimer.restart()
-            // Here we could call: root.parent.positionChanged(mouse)
-            // to relay the event to a main overlay mouse area, either
-            // as a parent object or some property passed in. But, this
-            // will still fail when hovering over menus, etc.
-        }
-        onExited: {
-            root.z = 1
-            participantRect.opacity = 0
         }
-        onEntered: {
-            root.z = 2
-            participantRect.opacity = 1
+
+        onHoveredChanged: {
+            if (overlayMenu.hovered) {
+                participantRect.opacity = 1
+                fadeOutTimer.restart()
+                return
+            }
+            participantRect.opacity = hovered ? 1 : 0
         }
+    }
 
-        // Timer to decide when ParticipantOverlay fade out
-        Timer {
-            id: fadeOutTimer
-            interval: JamiTheme.overlayFadeDelay
-            onTriggered: {
-                if (overlayMenu.hovered)
-                    return
-                participantRect.opacity = 0
+    // Timer to decide when ParticipantOverlay fade out
+    Timer {
+        id: fadeOutTimer
+        interval: JamiTheme.overlayFadeDelay
+        onTriggered: {
+            if (overlayMenu.hovered) {
+                fadeOutTimer.restart()
+                return
             }
+            participantRect.opacity = 0
         }
+    }
+
+    // Participant background and buttons for moderation
+    Rectangle {
+        id: participantRect
+
+        width: parent.width
+        height: parent.height
+        color: "transparent"
+        opacity: 0
 
         ParticipantOverlayMenu {
             id: overlayMenu
             visible: isMe || meModerator
+
+            onHoveredChanged: {
+                if (hovered) {
+                    participantRect.opacity = 1
+                    fadeOutTimer.restart()
+                } else {
+                    participantRect.opacity = 0
+                }
+            }
         }
 
         // Participant footer with host, moderator and mute indicators

src/mainview/components/ParticipantOverlayButton.qml

@@ -32,6 +32,7 @@ PushButton {
     pressedColor: JamiTheme.buttonConferencePressed
 
     imageColor: JamiTheme.whiteColor
+    hoverEnabled: false
 
     Rectangle {
         id: toolTipRect
@@ -44,7 +45,7 @@ PushButton {
         }
         color : isBarLayout? JamiTheme.darkGreyColorOpacity
                            : "transparent"
-        visible: root.hovered && !isSmall
+        visible: hover.hovered && !isSmall
         radius: 2
 
         Text {
@@ -55,4 +56,9 @@ PushButton {
             font.pointSize: JamiTheme.tinyFontSize
         }
     }
+    Item {
+        anchors.fill: parent
+
+        HoverHandler { id: hover }
+    }
 }

src/mainview/components/ParticipantOverlayMenu.qml

@@ -49,10 +49,12 @@ Item {
     property int buttonPreferredSize: 24
     property int iconButtonPreferredSize: 16
 
-    property bool hovered: false
+    property alias hovered: hover.hovered
 
     anchors.fill: parent
 
+    HoverHandler { id: hover }
+
     Loader { sourceComponent: isBarLayout ? barComponent : rectComponent }
 
     Component {
@@ -61,8 +63,7 @@ Item {
         Control {
             width: root.width
             height: root.height
-
-            onHoveredChanged: root.hovered = hovered
+            hoverEnabled: false
 
             background: Rectangle {
                 property int buttonsSize: buttonsRect.visibleButtons * 24 + 8 * 2
@@ -77,16 +78,9 @@ Item {
                 height: isOverlayRect ? 80 : parent.height
             }
 
-            ColumnLayout {
+            ParticipantControlLayout {
+                id: buttonsRect
                 anchors.centerIn: parent
-
-                ParticipantControlLayout {
-                    id: buttonsRect
-
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                    Layout.preferredWidth: implicitWidth
-                    Layout.preferredHeight: shapeHeight
-                }
             }
         }
     }
@@ -95,18 +89,17 @@ Item {
         id: barComponent
 
         Control {
-            width: buttonsRect.implicitWidth
+            width: barButtons.implicitWidth
             height: shapeHeight
-
-            onHoveredChanged: root.hovered = hovered
+            hoverEnabled: false
 
             background: Item {
                 clip: true
                 Rectangle {
                     color: JamiTheme.darkGreyColorOpacity
                     radius: shapeRadius
-                    width: parent.width + radius
-                    height: parent.height + radius
+                    width: parent.width + 2 * radius
+                    height: parent.height + 2 * radius
                     anchors.fill: parent
                     anchors.leftMargin: -radius
                     anchors.topMargin: -radius
@@ -114,11 +107,7 @@ Item {
             }
 
             ParticipantControlLayout {
-                id: buttonsRect
-
-                Layout.rightMargin: 8
-                Layout.preferredWidth: implicitWidth
-                Layout.preferredHeight: shapeHeight
+                id: barButtons
             }
         }
     }