moderation: change layout for participant menu

Gitlab: #277

Change-Id: Iffb0e1cc7a57495ba5f84230265cdcec87e26307

images/icons/ic_hangup_participant-24px.svg

@@ -0,0 +1,11 @@
+<?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>

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 buttonConference: "transparent"
-    property string buttonConferenceHovered: "#66cfff"
+    property string buttonConferenceHovered:"#110000"
-    property string buttonConferencePressed: "#66cfff"
+    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()
+                    var newX = Math.trunc(distantRenderer.getXOffset()
-                            + participant.x * distantRenderer.getScaledWidth()
+                            + participant.x * distantRenderer.getScaledWidth())
-                    var newY = distantRenderer.getYOffset()
+                    var newY = Math.trunc(distantRenderer.getYOffset()
-                            + participant.y * distantRenderer.getScaledHeight()
+                            + 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 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(),
+                        x: Math.trunc(distantRenderer.getXOffset() + infos[infoVariant].x * distantRenderer.getScaledWidth()),
-                        y: distantRenderer.getYOffset() + infos[infoVariant].y * distantRenderer.getScaledHeight(),
+                        y: Math.trunc(distantRenderer.getYOffset() + infos[infoVariant].y * distantRenderer.getScaledHeight()),
-                        width: infos[infoVariant].w * distantRenderer.getScaledWidth(),
+                        width: Math.ceil(infos[infoVariant].w * distantRenderer.getScaledWidth()),
-                        height: infos[infoVariant].h * distantRenderer.getScaledHeight(),
+                        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)
+    // svg path for the participant indicators background shape
-    property int offset: indicatorsRowLayout.width
+    property int shapeWidth: indicatorsRowLayout.width + 8
     property int shapeHeight: 16
-    property string pathShape: "M 0.0,%8
+    property int shapeRadius: 6
-    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
+    property string pathShape: "M0,0 h%1 q%2,0 %2,%2 v%3 h-%4 z"
-      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(shapeWidth-shapeRadius).arg(shapeRadius).arg(shapeHeight-shapeRadius).
-    .arg(9+offset).arg(11+offset).arg(15+offset).arg(18+offset).arg(shapeHeight)
+    arg(shapeWidth)
-    .arg(shapeHeight-2)
 
-    // 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"
+    }
 }

src/mainview/components/ParticipantOverlayMenu.qml

@@ -20,8 +20,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
 import net.jami.Constants 1.0
 
@@ -31,19 +30,9 @@ import "../../commoncomponents"
 Rectangle {
     id: root
 
-    property bool hasMinimumSize: true
-    property int buttonPreferredSize: 30
-    property int minimumWidth: Math.max(114, visibleButtons * 37 + 21 * 2)
-    property int minimumHeight: 114
-    property int visibleButtons: toggleModerator.visible
-                                 + toggleMute.visible
-                                 + maximizeParticipant.visible
-                                 + minimizeParticipant.visible
-                                 + hangupParticipant.visible
-
     property string uri: ""
     property string bestName: ""
-    property bool isLocalMuted: false
+    property bool isLocalMuted: true
     property bool showSetModerator: false
     property bool showUnsetModerator: false
     property bool showModeratorMute: false
@@ -52,14 +41,48 @@ Rectangle {
     property bool showMinimize: false
     property bool showHangup: false
 
+    property int buttonPreferredSize: 24
+    property int iconButtonPreferredSize: 16
+
+    property int visibleButtons: toggleModerator.visible
+                                 + toggleMute.visible
+                                 + maximizeParticipant.visible
+                                 + minimizeParticipant.visible
+                                 + hangupParticipant.visible
+
+    property int buttonsSize: visibleButtons * 24 + 8 * 2
+
+    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)
+
+    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)
+
     signal mouseAreaExited
+    signal mouseChanged
 
-    // values taken from sketch
+    width: isBarLayout? bestNameLabel.contentWidth + buttonsSize + 32
-    width: hasMinimumSize? parent.width : minimumWidth
+                      : (isOverlayRect? buttonsSize + 32 : parent.width)
-    height: hasMinimumSize? parent.height: minimumHeight
+    height: isBarLayout? shapeHeight : (isOverlayRect? 80 : parent.height)
 
-    color: hasMinimumSize? "transparent" : JamiTheme.darkGreyColorOpacity
+    anchors.top: isBarLayout? parent.top : undefined
-    radius: 10
+    anchors.left: isBarLayout? parent.left : undefined
+    anchors.centerIn: isBarLayout? undefined : parent
+
+    color: isBarLayout? "transparent" : JamiTheme.darkGreyColorOpacity
+
+    radius: (isBarLayout || !isOverlayRect)? 0 : 10
 
     MouseArea {
         id: mouseAreaHover
@@ -70,37 +93,62 @@ Rectangle {
         acceptedButtons: Qt.LeftButton
 
         onExited: mouseAreaExited()
+        onMouseXChanged: mouseChanged()
 
-        ColumnLayout {
+        Shape {
-            id: layout
+            id: myShape
-            anchors.horizontalCenter: parent.horizontalCenter
+            visible: isBarLayout
-            anchors.verticalCenter: parent.verticalCenter
+            ShapePath {
-            spacing: 8
+                id: backgroundShape
+                strokeColor: "transparent"
+                fillColor: JamiTheme.darkGreyColorOpacity
+                capStyle: ShapePath.RoundCap
+                PathSvg { path: pathShape }
+            }
+        }
 
-            Text {
+        Text {
-                id: participantName
+            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
+            }
 
-                TextMetrics {
+            text: participantMetricsColumn.elidedText
-                    id: participantMetrics
+            color: JamiTheme.whiteColor
-                    text: bestName
+            font.pointSize: JamiTheme.participantFontSize
-                    elide: Text.ElideRight
+            horizontalAlignment: isBarLayout? Text.AlignLeft : Text.AlignHCenter
-                    elideWidth: root.width - JamiTheme.preferredMarginSize * 2
+            verticalAlignment: Text.AlignVCenter
-                }
+        }
 
-                text: participantMetrics.elidedText
+        Rectangle {
-                color: JamiTheme.whiteColor
+            color: "transparent"
-                font.pointSize: JamiTheme.participantFontSize
+            width: buttonsSize
-                Layout.alignment: Qt.AlignCenter
+            height: shapeHeight
-                horizontalAlignment: Text.AlignHCenter
+            anchors {
-                verticalAlignment: Text.AlignVCenter
+                right: isBarLayout? parent.right : undefined
+                rightMargin: isBarLayout? 8 : 0
+                horizontalCenter: isBarLayout? undefined : parent.horizontalCenter
+                verticalCenter: parent.verticalCenter
+                verticalCenterOffset: isBarLayout? 0 : (isSmall? 12 : 16)
             }
 
             RowLayout {
                 id: rowLayoutButtons
-
+                anchors.centerIn: parent
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                anchors.fill: parent
-                Layout.fillWidth: true
-                spacing: 7
 
                 PushButton {
                     id: toggleModerator
@@ -108,30 +156,41 @@ Rectangle {
                     visible: (showSetModerator || showUnsetModerator)
                     Layout.preferredWidth: buttonPreferredSize
                     Layout.preferredHeight: buttonPreferredSize
-                    preferredSize: 16
+                    preferredSize: iconButtonPreferredSize
                     normalColor: JamiTheme.buttonConference
                     hoveredColor: JamiTheme.buttonConferenceHovered
                     pressedColor: JamiTheme.buttonConferencePressed
 
                     source: "qrc:/images/icons/moderator.svg"
-                    imageColor: hovered? JamiTheme.darkGreyColor
+                    imageColor: JamiTheme.whiteColor
-                                       : JamiTheme.whiteColor
 
                     onClicked: CallAdapter.setModerator(uri, showSetModerator)
-                    onHoveredChanged: toggleModeratorToolTip.visible = hovered
+                    onHoveredChanged:
+                        toggleModeratorToolTip.visible = hovered && !isSmall
 
-                    Text {
+                    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
-                        width: parent.width
+                        radius: 2
-                        text: showSetModerator? JamiStrings.setModerator
+
-                                              : JamiStrings.unsetModerator
+                        Text {
-                        horizontalAlignment: Text.AlignHCenter
+                            id: toggleModeratorToolTipText
-                        anchors.top: parent.bottom
+                            anchors.centerIn: parent
-                        anchors.topMargin: 6
+                            text: showSetModerator? JamiStrings.setModerator
-                        color: JamiTheme.whiteColor
+                                                  : JamiStrings.unsetModerator
-                        font.pointSize: JamiTheme.tinyFontSize
+                            horizontalAlignment: Text.AlignHCenter
+                            color: JamiTheme.whiteColor
+                            font.pointSize: JamiTheme.tinyFontSize
+                        }
                     }
                 }
 
@@ -141,7 +200,8 @@ Rectangle {
                     visible: showModeratorMute || showModeratorUnmute
                     Layout.preferredWidth: buttonPreferredSize
                     Layout.preferredHeight: buttonPreferredSize
-                    preferredSize: 16
+                    Layout.alignment: Qt.AlignVCenter
+                    preferredSize: iconButtonPreferredSize
 
                     normalColor: JamiTheme.buttonConference
                     hoveredColor: JamiTheme.buttonConferenceHovered
@@ -149,46 +209,54 @@ Rectangle {
 
                     source: showModeratorMute? "qrc:/images/icons/mic-24px.svg"
                                              : "qrc:/images/icons/mic_off-24px.svg"
-                    imageColor: hovered? JamiTheme.darkGreyColor
+                    imageColor: JamiTheme.whiteColor
-                                       : JamiTheme.whiteColor
 
                     onClicked: CallAdapter.muteParticipant(uri, showModeratorMute)
-                    onHoveredChanged: {
+                    onHoveredChanged:
-                        toggleParticipantToolTip.visible = hovered
+                        toggleMuteToolTip.visible = hovered && !isSmall
-                        localMutedText.visible = hovered && isLocalMuted
-                    }
-
-                    Text {
-                        id: toggleParticipantToolTip
 
+                    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
-                        width: parent.width
+                        radius: 2
-                        text: showModeratorMute? JamiStrings.muteParticipant
-                                               : JamiStrings.unmuteParticipant
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignTop
 
-                        anchors.top: parent.bottom
+                        Text {
-                        anchors.topMargin: 6
+                            id: toggleMuteToolTipText
-                        color: JamiTheme.whiteColor
+                            text: (showModeratorMute? JamiStrings.muteParticipant
-                        font.pointSize: JamiTheme.tinyFontSize
+                                                    : 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
+                        }
                     }
-
-                    Text {
-                        id: localMutedText
-
-                        visible: false
-                        width: parent.width
-                        text: "(" + JamiStrings.localMuted + ")"
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignTop
-
-                        anchors.top: parent.bottom
-                        anchors.topMargin: 16
-                        color: JamiTheme.whiteColor
-                        font.pointSize: JamiTheme.tinyFontSize
-                    }
-
                 }
 
                 PushButton {
@@ -197,30 +265,41 @@ Rectangle {
                     visible: showMaximize
                     Layout.preferredWidth: buttonPreferredSize
                     Layout.preferredHeight: buttonPreferredSize
-                    preferredSize: 16
+                    preferredSize: iconButtonPreferredSize
 
                     normalColor: JamiTheme.buttonConference
                     hoveredColor: JamiTheme.buttonConferenceHovered
                     pressedColor: JamiTheme.buttonConferencePressed
 
                     source: "qrc:/images/icons/open_in_full-24px.svg"
-                    imageColor: hovered? JamiTheme.darkGreyColor
+                    imageColor: JamiTheme.whiteColor
-                                       : JamiTheme.whiteColor
 
                     onClicked: CallAdapter.maximizeParticipant(uri)
-                    onHoveredChanged: maximizeParticipantToolTip.visible = hovered
+                    onHoveredChanged:
+                        maximizeParticipantToolTip.visible = hovered && !isSmall
 
-                    Text {
+                    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
-                        width: parent.width
+                        radius: 2
-                        text: JamiStrings.maximizeParticipant
+
-                        horizontalAlignment: Text.AlignHCenter
+                        Text {
-                        anchors.top: parent.bottom
+                            id: maximizeParticipantToolTipText
-                        anchors.topMargin: 6
+                            text: JamiStrings.maximizeParticipant
-                        color: JamiTheme.whiteColor
+                            horizontalAlignment: Text.AlignHCenter
-                        font.pointSize: JamiTheme.tinyFontSize
+                            anchors.centerIn: parent
+                            color: JamiTheme.whiteColor
+                            font.pointSize: JamiTheme.tinyFontSize
+                        }
                     }
                 }
 
@@ -230,29 +309,40 @@ Rectangle {
                     visible: showMinimize
                     Layout.preferredWidth: buttonPreferredSize
                     Layout.preferredHeight: buttonPreferredSize
-                    preferredSize: 16
+                    preferredSize: iconButtonPreferredSize
 
                     normalColor: JamiTheme.buttonConference
                     hoveredColor: JamiTheme.buttonConferenceHovered
                     pressedColor: JamiTheme.buttonConferencePressed
 
                     source: "qrc:/images/icons/close_fullscreen-24px.svg"
-                    imageColor: hovered? JamiTheme.darkGreyColor
+                    imageColor: JamiTheme.whiteColor
-                                       : JamiTheme.whiteColor
                     onClicked: CallAdapter.minimizeParticipant(uri)
-                    onHoveredChanged: minimizeParticipantToolTip.visible = hovered
+                    onHoveredChanged:
+                        minimizeParticipantToolTip.visible = hovered && !isSmall
 
-                    Text {
+                    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
-                        width: parent.width
+                        radius: 2
-                        text: JamiStrings.minimizeParticipant
+
-                        horizontalAlignment: Text.AlignHCenter
+                        Text {
-                        anchors.top: parent.bottom
+                            id: minimizeParticipantToolTipText
-                        anchors.topMargin: 6
+                            text: JamiStrings.minimizeParticipant
-                        color: JamiTheme.whiteColor
+                            horizontalAlignment: Text.AlignHCenter
-                        font.pointSize: JamiTheme.tinyFontSize
+                            anchors.centerIn: parent
+                            color: JamiTheme.whiteColor
+                            font.pointSize: JamiTheme.tinyFontSize
+                        }
                     }
                 }
 
@@ -262,29 +352,40 @@ Rectangle {
                     visible: showHangup
                     Layout.preferredWidth: buttonPreferredSize
                     Layout.preferredHeight: buttonPreferredSize
-                    preferredSize: 16
+                    preferredSize: iconButtonPreferredSize
 
                     normalColor: JamiTheme.buttonConference
                     hoveredColor: JamiTheme.buttonConferenceHovered
                     pressedColor: JamiTheme.buttonConferencePressed
 
-                    source: "qrc:/images/icons/ic_block_24px.svg"
+                    source: "qrc:/images/icons/ic_hangup_participant-24px.svg"
-                    imageColor: hovered? JamiTheme.darkGreyColor
+                    imageColor: JamiTheme.whiteColor
-                                       : JamiTheme.whiteColor
                     onClicked: CallAdapter.hangupParticipant(uri)
-                    onHoveredChanged: hangupParticipantToolTip.visible = hovered
+                    onHoveredChanged:
+                        hangupParticipantToolTip.visible = hovered && !isSmall
 
-                    Text {
+                    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
-                        width: parent.width
+                        radius: 2
-                        text: JamiStrings.hangupParticipant
+
-                        horizontalAlignment: Text.AlignHCenter
+                        Text {
-                        anchors.top: parent.bottom
+                            id: hangupParticipantToolTipText
-                        anchors.topMargin: 6
+                            text: JamiStrings.hangupParticipant
-                        color: JamiTheme.whiteColor
+                            horizontalAlignment: Text.AlignHCenter
-                        font.pointSize: JamiTheme.tinyFontSize
+                            anchors.centerIn: parent
+                            color: JamiTheme.whiteColor
+                            font.pointSize: JamiTheme.tinyFontSize
+                        }
                     }
                 }
             }