participant-controls: refactor menu layouts

Gitlab: #441
Change-Id: I1d34c7e766d73026d4c6617592a85ce3a75cc4fa

qml.qrc

@@ -144,5 +144,7 @@
         <file>src/commoncomponents/contextmenu/BaseContextMenu.qml</file>
         <file>src/commoncomponents/contextmenu/GeneralMenuItem.qml</file>
         <file>src/commoncomponents/contextmenu/GeneralMenuSeparator.qml</file>
+        <file>src/mainview/components/ParticipantOverlayButton.qml</file>
+        <file>src/mainview/components/ParticipantControlLayout.qml</file>
     </qresource>
 </RCC>

src/mainview/components/ParticipantControlLayout.qml

@@ -0,0 +1,98 @@
+/*
+ * Copyright (C) 2020 by Savoir-faire Linux
+ * Author: Albert Babí <albert.babi@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import net.jami.Adapters 1.0
+import net.jami.Constants 1.0
+
+import "../../commoncomponents"
+
+RowLayout {
+    id: buttonsRect
+
+    property int visibleButtons: toggleModerator.visible
+                                 + toggleMute.visible
+                                 + maximizeParticipant.visible
+                                 + minimizeParticipant.visible
+                                 + hangupParticipant.visible
+
+    ParticipantOverlayButton {
+        id: toggleModerator
+
+        visible: showSetModerator || showUnsetModerator
+        preferredSize: iconButtonPreferredSize
+        Layout.preferredHeight: buttonPreferredSize
+        Layout.preferredWidth: buttonPreferredSize
+        source: "qrc:/images/icons/moderator.svg"
+        onClicked: CallAdapter.setModerator(uri, showSetModerator)
+        toolTipText: showSetModerator? JamiStrings.setModerator
+                                     : JamiStrings.unsetModerator
+    }
+
+    ParticipantOverlayButton {
+        id: toggleMute
+
+        visible: showModeratorMute || showModeratorUnmute
+        preferredSize: iconButtonPreferredSize
+        Layout.preferredHeight: buttonPreferredSize
+        Layout.preferredWidth: buttonPreferredSize
+        source: showModeratorMute? "qrc:/images/icons/mic-24px.svg"
+                                 : "qrc:/images/icons/mic_off-24px.svg"
+        onClicked: CallAdapter.muteParticipant(uri, showModeratorMute)
+        toolTipText: showModeratorMute? JamiStrings.muteParticipant
+                                      : JamiStrings.unmuteParticipant
+    }
+
+    ParticipantOverlayButton {
+        id: maximizeParticipant
+
+        visible: showMaximize
+        preferredSize: iconButtonPreferredSize
+        Layout.preferredHeight: buttonPreferredSize
+        Layout.preferredWidth: buttonPreferredSize
+        source: "qrc:/images/icons/open_in_full-24px.svg"
+        onClicked: CallAdapter.maximizeParticipant(uri)
+        toolTipText: JamiStrings.maximizeParticipant
+    }
+
+    ParticipantOverlayButton {
+        id: minimizeParticipant
+
+        visible: showMinimize
+        preferredSize: iconButtonPreferredSize
+        Layout.preferredHeight: buttonPreferredSize
+        Layout.preferredWidth: buttonPreferredSize
+        source: "qrc:/images/icons/close_fullscreen-24px.svg"
+        onClicked: CallAdapter.minimizeParticipant(uri)
+        toolTipText: JamiStrings.minimizeParticipant
+    }
+
+    ParticipantOverlayButton {
+        id: hangupParticipant
+
+        visible: showHangup
+        preferredSize: iconButtonPreferredSize
+        Layout.preferredHeight: buttonPreferredSize
+        Layout.preferredWidth: buttonPreferredSize
+        source: "qrc:/images/icons/ic_hangup_participant-24px.svg"
+        onClicked: CallAdapter.hangupParticipant(uri)
+        toolTipText: JamiStrings.hangupParticipant
+    }
+}

src/mainview/components/ParticipantOverlay.qml

@@ -49,7 +49,6 @@ Item {
     property bool participantIsModerator: false
     property bool participantIsMuted: false
     property bool participantIsModeratorMuted: false
-    property bool participantMenuActive: false
 
     z: 1
 

src/mainview/components/ParticipantOverlayButton.qml

@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2020 by Savoir-faire Linux
+ * Author: Albert Babí <albert.babi@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.14
+
+import net.jami.Constants 1.0
+
+import "../../commoncomponents"
+
+PushButton {
+    id: root
+
+    property alias toolTipText: toolTip.text
+
+    normalColor: JamiTheme.buttonConference
+    hoveredColor: JamiTheme.buttonConferenceHovered
+    pressedColor: JamiTheme.buttonConferencePressed
+
+    imageColor: JamiTheme.whiteColor
+
+    Rectangle {
+        id: toolTipRect
+        height: 16
+        width: toolTip.width + 8
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            top: parent.bottom
+            topMargin: isBarLayout? 6 : 2
+        }
+        color : isBarLayout? JamiTheme.darkGreyColorOpacity
+                           : "transparent"
+        visible: root.hovered && !isSmall
+        radius: 2
+
+        Text {
+            id: toolTip
+            anchors.centerIn: parent
+            horizontalAlignment: Text.AlignHCenter
+            color: JamiTheme.whiteColor
+            font.pointSize: JamiTheme.tinyFontSize
+        }
+    }
+}

src/mainview/components/ParticipantOverlayMenu.qml

@@ -18,9 +18,7 @@
 
 import QtQuick 2.14
 import QtQuick.Controls 2.14
-import QtGraphicalEffects 1.14
 import QtQuick.Layouts 1.14
-import QtQuick.Shapes 1.14
 
 import net.jami.Adapters 1.0
 import net.jami.Models 1.0
@@ -29,7 +27,7 @@ import net.jami.Constants 1.0
 import "../../commoncomponents"
 
 // Overlay menu for conference moderation
-Control {
+Item {
     id: root
 
     property string uri: ""
@@ -43,342 +41,128 @@ Control {
     property bool showMinimize: false
     property bool showHangup: false
 
+    property int shapeHeight: 30
+    property int shapeRadius: 8
+
+    property bool isBarLayout: root.width > 220
+    property int isSmall: !isBarLayout && (root.height < 100 || root.width < 160)
+
     property int buttonPreferredSize: 24
     property int iconButtonPreferredSize: 16
 
-    property int visibleButtons: toggleModerator.visible
-                                 + toggleMute.visible
-                                 + maximizeParticipant.visible
-                                 + minimizeParticipant.visible
-                                 + hangupParticipant.visible
+    property bool hovered: false
 
-    property int buttonsSize: visibleButtons * 24 + 8 * 2
+    anchors.fill: parent
 
-    property int shapeWidth: bestNameLabel.contentWidth + (visibleButtons > 0
-                                                           ? buttonsSize : 0) + 32
-    property int shapeHeight: 30
-    property int shapeRadius: 8
-    property string pathShape: "M0,0 h%1 v%2 q0,%3 -%3,%3 h-%4 z"
-    .arg(shapeWidth).arg(shapeHeight-shapeRadius).arg(shapeRadius).
-    arg(shapeWidth-shapeRadius)
+    Loader { sourceComponent: isBarLayout ? barComponent : rectComponent }
 
-    property bool isBarLayout: parent.width > 220
-    property bool isOverlayRect: buttonsSize + 32 > parent.width
-
-    property int labelMaxWidth: isBarLayout? Math.max(parent.width - buttonsSize, 80)
-                                           : visibleButtons > 0? buttonsSize
-                                                               : parent.width - 16
-
-    property int isSmall: !isBarLayout && (height < 100 || width < 160)
-
-    width: isBarLayout? bestNameLabel.contentWidth + buttonsSize + 32
-                      : (isOverlayRect? buttonsSize + 32 : parent.width)
-    height: isBarLayout? shapeHeight : (isOverlayRect? 80 : parent.height)
-
-    anchors.top: isBarLayout? parent.top : undefined
-    anchors.left: isBarLayout? parent.left : undefined
-    anchors.centerIn: isBarLayout? undefined : parent
-
-    background: Rectangle {
-        color: isBarLayout? "transparent" : JamiTheme.darkGreyColorOpacity
-        radius: (isBarLayout || !isOverlayRect)? 0 : 10
+    TextMetrics {
+        id: nameTextMetrics
+        text: bestName
+        font.pointSize: JamiTheme.participantFontSize
     }
 
-    Item {
-        anchors.fill: parent
+    Component {
+        id: rectComponent
 
-        Shape {
-            id: myShape
-            visible: isBarLayout
-            ShapePath {
-                id: backgroundShape
-                strokeColor: "transparent"
-                fillColor: JamiTheme.darkGreyColorOpacity
-                capStyle: ShapePath.RoundCap
-                PathSvg { path: pathShape }
+        Control {
+            width: root.width
+            height: root.height
+
+            onHoveredChanged: root.hovered = hovered
+
+            background: Rectangle {
+                property int buttonsSize: buttonsRect.visibleButtons * 24 + 8 * 2
+                property bool isOverlayRect: buttonsSize + 32 > root.width
+
+                color: JamiTheme.darkGreyColorOpacity
+                radius: isOverlayRect ? 10 : 0
+
+                anchors.fill: isOverlayRect ? undefined : parent
+                anchors.centerIn: parent
+                width: isOverlayRect ? buttonsSize + 32 : parent.width
+                height: isOverlayRect ? 80 : parent.height
+            }
+
+            ColumnLayout {
+
+                anchors.centerIn: parent
+
+                Text {
+                    id: bestNameLabel
+
+                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                    Layout.preferredWidth: Math.min(nameTextMetrics.boundingRect.width + 8,
+                                                    root.width - 16)
+                    Layout.preferredHeight: shapeHeight
+
+                    text: bestName
+                    elide: Text.ElideRight
+                    color: JamiTheme.whiteColor
+                    font.pointSize: JamiTheme.participantFontSize
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
+                }
+                ParticipantControlLayout {
+                    id: buttonsRect
+
+                    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                    Layout.preferredWidth: implicitWidth
+                    Layout.preferredHeight: shapeHeight
+                }
             }
         }
+    }
 
-        Text {
-            id: bestNameLabel
-            anchors {
-                left: isBarLayout? parent.left : undefined
-                leftMargin: isBarLayout? 8 : 0
-                bottom: isBarLayout? parent.bottom : undefined
-                bottomMargin: isBarLayout? 8 : 0
-                horizontalCenter: isBarLayout? undefined : parent.horizontalCenter
-                verticalCenter: parent.verticalCenter
-                verticalCenterOffset:
-                    (isBarLayout || visibleButtons === 0)? 0 : (isSmall? -12 : -16)
-            }
-            TextMetrics {
-                id: participantMetricsColumn
-                text: bestName
-                elide: Text.ElideRight
-                elideWidth: labelMaxWidth
-            }
+    Component {
+        id: barComponent
 
-            text: participantMetricsColumn.elidedText
-            color: JamiTheme.whiteColor
-            font.pointSize: JamiTheme.participantFontSize
-            horizontalAlignment: isBarLayout? Text.AlignLeft : Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-
-        Rectangle {
-            color: "transparent"
-            width: buttonsSize
+        Control {
+            width: rowLayout.implicitWidth
             height: shapeHeight
-            anchors {
-                right: isBarLayout? parent.right : undefined
-                rightMargin: isBarLayout? 8 : 0
-                horizontalCenter: isBarLayout? undefined : parent.horizontalCenter
-                verticalCenter: parent.verticalCenter
-                verticalCenterOffset: isBarLayout? 0 : (isSmall? 12 : 16)
+
+            onHoveredChanged: root.hovered = hovered
+
+            background: Item {
+                clip: true
+                Rectangle {
+                    color: JamiTheme.darkGreyColorOpacity
+                    radius: shapeRadius
+                    width: parent.width + radius
+                    height: parent.height + radius
+                    anchors.fill: parent
+                    anchors.leftMargin: -radius
+                    anchors.topMargin: -radius
+                }
             }
 
             RowLayout {
-                id: rowLayoutButtons
-                anchors.centerIn: parent
-                anchors.fill: parent
+                id: rowLayout
 
-                PushButton {
-                    id: toggleModerator
+                spacing: 8
 
-                    visible: (showSetModerator || showUnsetModerator)
-                    Layout.preferredWidth: buttonPreferredSize
-                    Layout.preferredHeight: buttonPreferredSize
-                    preferredSize: iconButtonPreferredSize
-                    normalColor: JamiTheme.buttonConference
-                    hoveredColor: JamiTheme.buttonConferenceHovered
-                    pressedColor: JamiTheme.buttonConferencePressed
+                Text {
+                    id: bestNameLabel
 
-                    source: "qrc:/images/icons/moderator.svg"
-                    imageColor: JamiTheme.whiteColor
+                    Layout.leftMargin: 8
+                    Layout.preferredWidth: Math.min(nameTextMetrics.boundingRect.width + 8,
+                                                    root.width - buttonsRect.implicitWidth - 16)
+                    Layout.preferredHeight: shapeHeight
 
-                    onClicked: CallAdapter.setModerator(uri, showSetModerator)
-                    onHoveredChanged:
-                        toggleModeratorToolTip.visible = hovered && !isSmall
-
-                    Rectangle {
-                        id: toggleModeratorToolTip
-                        height: 16
-                        width: toggleModeratorToolTipText.width + 8
-                        anchors {
-                            horizontalCenter: parent.horizontalCenter
-                            top: parent.bottom
-                            topMargin: isBarLayout? 6 : 2
-                        }
-                        color : isBarLayout? JamiTheme.darkGreyColorOpacity
-                                           : "transparent"
-                        visible: false
-                        radius: 2
-
-                        Text {
-                            id: toggleModeratorToolTipText
-                            anchors.centerIn: parent
-                            text: showSetModerator? JamiStrings.setModerator
-                                                  : JamiStrings.unsetModerator
-                            horizontalAlignment: Text.AlignHCenter
-                            color: JamiTheme.whiteColor
-                            font.pointSize: JamiTheme.tinyFontSize
-                        }
-                    }
+                    text: bestName
+                    elide: Text.ElideRight
+                    color: JamiTheme.whiteColor
+                    font.pointSize: JamiTheme.participantFontSize
+                    horizontalAlignment: Text.AlignLeft
+                    verticalAlignment: Text.AlignVCenter
                 }
 
-                PushButton {
-                    id: toggleMute
+                ParticipantControlLayout {
+                    id: buttonsRect
 
-                    visible: showModeratorMute || showModeratorUnmute
-                    Layout.preferredWidth: buttonPreferredSize
-                    Layout.preferredHeight: buttonPreferredSize
-                    Layout.alignment: Qt.AlignVCenter
-                    preferredSize: iconButtonPreferredSize
-
-                    normalColor: JamiTheme.buttonConference
-                    hoveredColor: JamiTheme.buttonConferenceHovered
-                    pressedColor: JamiTheme.buttonConferencePressed
-
-                    source: showModeratorMute? "qrc:/images/icons/mic-24px.svg"
-                                             : "qrc:/images/icons/mic_off-24px.svg"
-                    imageColor: JamiTheme.whiteColor
-
-                    onClicked: CallAdapter.muteParticipant(uri, showModeratorMute)
-                    onHoveredChanged:
-                        toggleMuteToolTip.visible = hovered && !isSmall
-
-                    Rectangle {
-                        id: toggleMuteToolTip
-                        height: localMutedText.visible? 28 : 16
-                        width: localMutedText.visible? localMutedText.width + 8
-                                                     : toggleMuteToolTipText.width + 8
-                        anchors {
-                            horizontalCenter: parent.horizontalCenter
-                            top: parent.bottom
-                            topMargin: isBarLayout? 6 : 2
-                        }
-                        color : isBarLayout? JamiTheme.darkGreyColorOpacity
-                                           : "transparent"
-                        visible: false
-                        radius: 2
-
-                        Text {
-                            id: toggleMuteToolTipText
-                            text: (showModeratorMute? JamiStrings.muteParticipant
-                                                    : JamiStrings.unmuteParticipant)
-                            horizontalAlignment: Text.AlignHCenter
-                            anchors {
-                                horizontalCenter: parent.horizontalCenter
-                                top: parent.top
-                            }
-
-                            color: JamiTheme.whiteColor
-                            font.pointSize: JamiTheme.tinyFontSize
-                        }
-
-                        Text {
-                            id: localMutedText
-                            visible: isLocalMuted
-                            text: "(" + JamiStrings.localMuted + ")"
-                            horizontalAlignment: Text.AlignHCenter
-                            anchors {
-                                top: toggleMuteToolTipText.bottom
-                                horizontalCenter: parent.horizontalCenter
-                            }
-                            color: JamiTheme.whiteColor
-                            font.pointSize: JamiTheme.tinyFontSize
-                        }
-                    }
-                }
-
-                PushButton {
-                    id: maximizeParticipant
-
-                    visible: showMaximize
-                    Layout.preferredWidth: buttonPreferredSize
-                    Layout.preferredHeight: buttonPreferredSize
-                    preferredSize: iconButtonPreferredSize
-
-                    normalColor: JamiTheme.buttonConference
-                    hoveredColor: JamiTheme.buttonConferenceHovered
-                    pressedColor: JamiTheme.buttonConferencePressed
-
-                    source: "qrc:/images/icons/open_in_full-24px.svg"
-                    imageColor: JamiTheme.whiteColor
-
-                    onClicked: CallAdapter.maximizeParticipant(uri)
-                    onHoveredChanged:
-                        maximizeParticipantToolTip.visible = hovered && !isSmall
-
-                    Rectangle {
-                        id: maximizeParticipantToolTip
-                        height: 16
-                        width: maximizeParticipantToolTipText.width + 8
-                        anchors {
-                            horizontalCenter: parent.horizontalCenter
-                            top: parent.bottom
-                            topMargin: isBarLayout? 6 : 2
-                        }
-                        color : isBarLayout? JamiTheme.darkGreyColorOpacity
-                                           : "transparent"
-                        visible: false
-                        radius: 2
-
-                        Text {
-                            id: maximizeParticipantToolTipText
-                            text: JamiStrings.maximizeParticipant
-                            horizontalAlignment: Text.AlignHCenter
-                            anchors.centerIn: parent
-                            color: JamiTheme.whiteColor
-                            font.pointSize: JamiTheme.tinyFontSize
-                        }
-                    }
-                }
-
-                PushButton {
-                    id: minimizeParticipant
-
-                    visible: showMinimize
-                    Layout.preferredWidth: buttonPreferredSize
-                    Layout.preferredHeight: buttonPreferredSize
-                    preferredSize: iconButtonPreferredSize
-
-                    normalColor: JamiTheme.buttonConference
-                    hoveredColor: JamiTheme.buttonConferenceHovered
-                    pressedColor: JamiTheme.buttonConferencePressed
-
-                    source: "qrc:/images/icons/close_fullscreen-24px.svg"
-                    imageColor: JamiTheme.whiteColor
-                    onClicked: CallAdapter.minimizeParticipant(uri)
-                    onHoveredChanged:
-                        minimizeParticipantToolTip.visible = hovered && !isSmall
-
-                    Rectangle {
-                        id: minimizeParticipantToolTip
-                        height: 16
-                        width: minimizeParticipantToolTipText.width + 8
-                        anchors {
-                            horizontalCenter: parent.horizontalCenter
-                            top: parent.bottom
-                            topMargin: isBarLayout? 6 : 2
-                        }
-                        color : isBarLayout? JamiTheme.darkGreyColorOpacity
-                                           : "transparent"
-                        visible: false
-                        radius: 2
-
-                        Text {
-                            id: minimizeParticipantToolTipText
-                            text: JamiStrings.minimizeParticipant
-                            horizontalAlignment: Text.AlignHCenter
-                            anchors.centerIn: parent
-                            color: JamiTheme.whiteColor
-                            font.pointSize: JamiTheme.tinyFontSize
-                        }
-                    }
-                }
-
-                PushButton {
-                    id: hangupParticipant
-
-                    visible: showHangup
-                    Layout.preferredWidth: buttonPreferredSize
-                    Layout.preferredHeight: buttonPreferredSize
-                    preferredSize: iconButtonPreferredSize
-
-                    normalColor: JamiTheme.buttonConference
-                    hoveredColor: JamiTheme.buttonConferenceHovered
-                    pressedColor: JamiTheme.buttonConferencePressed
-
-                    source: "qrc:/images/icons/ic_hangup_participant-24px.svg"
-                    imageColor: JamiTheme.whiteColor
-                    onClicked: CallAdapter.hangupParticipant(uri)
-                    onHoveredChanged:
-                        hangupParticipantToolTip.visible = hovered && !isSmall
-
-                    Rectangle {
-                        id: hangupParticipantToolTip
-                        height: 16
-                        width: hangupParticipantToolTipText.width + 8
-                        anchors {
-                            horizontalCenter: parent.horizontalCenter
-                            top: parent.bottom
-                            topMargin: isBarLayout? 6 : 2
-                        }
-                        color : isBarLayout? JamiTheme.darkGreyColorOpacity
-                                           : "transparent"
-                        visible: false
-                        radius: 2
-
-                        Text {
-                            id: hangupParticipantToolTipText
-                            text: JamiStrings.hangupParticipant
-                            horizontalAlignment: Text.AlignHCenter
-                            anchors.centerIn: parent
-                            color: JamiTheme.whiteColor
-                            font.pointSize: JamiTheme.tinyFontSize
-                        }
-                    }
+                    Layout.rightMargin: 8
+                    Layout.preferredWidth: implicitWidth
+                    Layout.preferredHeight: shapeHeight
                 }
             }
         }