moderation: change layout for participant menu

Gitlab: #277

Change-Id: Iffb0e1cc7a57495ba5f84230265cdcec87e26307

images/icons/ic_hangup_participant-24px.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>supprimer</title>
+    <g id="Icones_Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="supprimer" fill="#000000" fill-rule="nonzero" stroke="#000000" stroke-width="0.5">
+            <g id="noun_Stop_3592251" transform="translate(2.000000, 2.000000)">
+                <path d="M10,0 C4.4771525,0 -2.73285668e-15,4.4771525 -2.73285668e-15,10 C-2.73285668e-15,15.5228475 4.4771525,20 10,20 C15.5228475,20 20,15.5228475 20,10 C20,4.4771525 15.5228475,0 10,0 Z M10,1.33333168 C12.0746076,1.33204969 14.079864,2.08017366 15.6466667,3.44 L3.39333333,15.5933333 C1.21771658,13.0183471 0.73262388,9.41543918 2.14972463,6.35673232 C3.56682538,3.29802546 6.62897124,1.33855529 10,1.33333168 L10,1.33333168 Z M10,18.6666667 C7.91614814,18.6660287 5.90307168,17.9105329 4.33333333,16.54 L16.5866667,4.38 C18.7770629,6.95136307 19.2739172,10.5610635 17.8596803,13.6285834 C16.4454435,16.6961032 13.3778286,18.6624553 10,18.6666667 Z" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

resources.qrc

@@ -32,6 +32,7 @@
         <file>images/icons/ic_arrow_tab_next_black_9dp_2x.png</file>
         <file>images/icons/ic_arrow_tab_previous_black_9dp_2x.png</file>
         <file>images/icons/ic_block_24px.svg</file>
+        <file>images/icons/ic_hangup_participant-24px.svg</file>
         <file>images/icons/delete_forever-24px.svg</file>
         <file>images/icons/phone_forwarded-24px.svg</file>
         <file>images/icons/ic_chat_black_24dp_2x.png</file>

src/constant/JamiTheme.qml

@@ -31,7 +31,8 @@ Item {
     property color blackColor: "#000000"
     property color whiteColor: "#ffffff"
     property color darkGreyColor: "#272727"
-    property color darkGreyColorOpacity: "#4D272727" // 77%
+    property color darkGreyColorOpacity: "#be272727" // 77%
+
     property color transparentColor: "transparent"
     property color primaryForegroundColor: darkTheme? whiteColor : blackColor
     property color primaryBackgroundColor: darkTheme? bgDarkMode_ : whiteColor
@@ -93,9 +94,9 @@ Item {
     property color sipInputButtonHoverColor: "#4477aa"
     property color sipInputButtonPressColor: "#5588bb"
 
-    property string buttonConference: "#110000"
-    property string buttonConferenceHovered: "#66cfff"
-    property string buttonConferencePressed: "#66cfff"
+    property string buttonConference: "transparent"
+    property string buttonConferenceHovered:"#110000"
+    property string buttonConferencePressed: "#110000"
 
     // Wizard / account manager
     property color accountCreationOtherStepColor: "grey"

src/mainview/components/CallOverlay.qml

@@ -95,6 +95,8 @@ Rectangle {
 
     function handleParticipantsInfo(infos) {
         // TODO: in the future the conference layout should be entirely managed by the client
+        // Hack: truncate and ceil participant's overlay position and size to correct
+        // when they are not exacts
         videoCallOverlay.updateMenu()
         var showMax = false
         var showMin = false
@@ -106,14 +108,15 @@ Rectangle {
                 var participant = infos.find(e => e.uri === participantOverlays[p].uri);
                 if (participant) {
                     // Update participant's information
-                    var newX = distantRenderer.getXOffset()
-                            + participant.x * distantRenderer.getScaledWidth()
-                    var newY = distantRenderer.getYOffset()
-                            + participant.y * distantRenderer.getScaledHeight()
-                    var newWidth = participant.w * distantRenderer.getScaledWidth()
-                    var newHeight = participant.h * distantRenderer.getScaledHeight()
-                    var newVisible = participant.w !== 0 && participant.h !== 0
+                    var newX = Math.trunc(distantRenderer.getXOffset()
+                            + participant.x * distantRenderer.getScaledWidth())
+                    var newY = Math.trunc(distantRenderer.getYOffset()
+                            + participant.y * distantRenderer.getScaledHeight())
+
+                    var newWidth = Math.ceil(participant.w * distantRenderer.getScaledWidth())
+                    var newHeight = Math.ceil(participant.h * distantRenderer.getScaledHeight())
 
+                    var newVisible = participant.w !== 0 && participant.h !== 0
                     if (participantOverlays[p].x !== newX)
                         participantOverlays[p].x = newX
                     if (participantOverlays[p].y !== newY)
@@ -162,10 +165,10 @@ Rectangle {
                 // Only create overlay for new participants
                 if (!currentUris.includes(infos[infoVariant].uri)) {
                     var hover = participantComponent.createObject(callOverlayRectMouseArea, {
-                        x: distantRenderer.getXOffset() + infos[infoVariant].x * distantRenderer.getScaledWidth(),
-                        y: distantRenderer.getYOffset() + infos[infoVariant].y * distantRenderer.getScaledHeight(),
-                        width: infos[infoVariant].w * distantRenderer.getScaledWidth(),
-                        height: infos[infoVariant].h * distantRenderer.getScaledHeight(),
+                        x: Math.trunc(distantRenderer.getXOffset() + infos[infoVariant].x * distantRenderer.getScaledWidth()),
+                        y: Math.trunc(distantRenderer.getYOffset() + infos[infoVariant].y * distantRenderer.getScaledHeight()),
+                        width: Math.ceil(infos[infoVariant].w * distantRenderer.getScaledWidth()),
+                        height: Math.ceil(infos[infoVariant].h * distantRenderer.getScaledHeight()),
                         visible: infos[infoVariant].w !== 0 && infos[infoVariant].h !== 0
                     })
                     if (!hover) {

src/mainview/components/ParticipantOverlay.qml

@@ -33,16 +33,14 @@ import "../../commoncomponents"
 Rectangle {
     id: root
 
-    // svg path for the background participant shape (width is offset dependant)
-    property int offset: indicatorsRowLayout.width
+    // svg path for the participant indicators background shape
+    property int shapeWidth: indicatorsRowLayout.width + 8
     property int shapeHeight: 16
-    property string pathShape: "M 0.0,%8
-    C 0.0,%8 %1,%8 %1,%8 %2,%8 %3,%9 %4,10.0 %5,5.0 %5,0.0 %6,0.0 %7,0.0 %4,0.0
-      0.0,0.0 0.0,0.0 0.0,%8 0.0,%8 Z".arg(offset).arg(4.0+offset).arg(7+offset)
-    .arg(9+offset).arg(11+offset).arg(15+offset).arg(18+offset).arg(shapeHeight)
-    .arg(shapeHeight-2)
+    property int shapeRadius: 6
+    property string pathShape: "M0,0 h%1 q%2,0 %2,%2 v%3 h-%4 z"
+    .arg(shapeWidth-shapeRadius).arg(shapeRadius).arg(shapeHeight-shapeRadius).
+    arg(shapeWidth)
 
-    // TODO: properties should be
     property string uri: overlayMenu.uri
     property bool participantIsHost: false
     property bool participantIsModerator: false
@@ -50,6 +48,8 @@ Rectangle {
     property bool participantIsLocalMuted: false
     property bool participantIsModeratorMuted: false
 
+    property bool participantMenuActive: false
+
     // TODO: try to use AvatarImage as well
     function setAvatar(avatar) {
         if (avatar === "") {
@@ -96,11 +96,12 @@ Rectangle {
         height: shapeHeight
         visible: participantIsHost || participantIsModerator || participantIsMuted
         color: "transparent"
+        anchors.bottom: parent.bottom
 
         Shape {
-            id: myShape
+            id: backgroundShape
             ShapePath {
-                id: backgroundShape
+                id: backgroundShapePath
                 strokeColor: "transparent"
                 fillColor: JamiTheme.darkGreyColorOpacity
                 capStyle: ShapePath.RoundCap
@@ -177,7 +178,7 @@ Rectangle {
 
         anchors.fill: parent
         opacity: 0
-        color: JamiTheme.darkGreyColorOpacity
+        color: "transparent"
         z: 1
 
         MouseArea {
@@ -218,8 +219,6 @@ Rectangle {
             ParticipantOverlayMenu {
                 id: overlayMenu
                 visible: participantRect.opacity !== 0
-                anchors.centerIn: parent
-                hasMinimumSize: root.width > minimumWidth && root.height > minimumHeight
 
                 onMouseAreaExited: {
                     if (contactImage.status === Image.Null) {
@@ -227,6 +226,11 @@ Rectangle {
                         participantRect.state = "exited"
                     }
                 }
+                onMouseChanged: {
+                    participantRect.state = "entered"
+                    fadeOutTimer.restart()
+                    participantMenuActive = true
+                }
             }
 
             onClicked: {
@@ -246,6 +250,17 @@ Rectangle {
                     participantRect.state = "exited"
                 }
             }
+
+            onMouseXChanged: {
+                // Hack: avoid listening mouseXChanged emitted when
+                // ParticipantOverlayMenu is exited
+                if (participantMenuActive) {
+                    participantMenuActive = false
+                } else {
+                    participantRect.state = "entered"
+                    fadeOutTimer.restart()
+                }
+            }
         }
 
         states: [
@@ -273,4 +288,11 @@ Rectangle {
             }
         }
     }
+
+    // Timer to decide when ParticipantOverlay fade out
+    Timer {
+        id: fadeOutTimer
+        interval: 5000
+        onTriggered: participantRect.state = "exited"
+    }
 }