diff --git a/images/icons/ic_hangup_participant-24px.svg b/images/icons/ic_hangup_participant-24px.svg new file mode 100644 index 0000000000000000000000000000000000000000..35b8a23441e6a8a5993772ef52f94034d10678d1 --- /dev/null +++ b/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> \ No newline at end of file diff --git a/resources.qrc b/resources.qrc index 2a29924a02b5f33b0fefee40695eee34b92b05ff..6c4b30e12760ccbe683a914118c278d1ed141a0c 100644 --- a/resources.qrc +++ b/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> diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml index 23dab0c690c78308840f26befa243fb9f2320699..11ec57391b20f35069a418076f2d10aeadfa69dd 100644 --- a/src/constant/JamiTheme.qml +++ b/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" diff --git a/src/mainview/components/CallOverlay.qml b/src/mainview/components/CallOverlay.qml index aca0ae87867f81f84b768b822df52644cbda2392..c9deb621056e1402ffd82242702875df5076326d 100644 --- a/src/mainview/components/CallOverlay.qml +++ b/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) { diff --git a/src/mainview/components/ParticipantOverlay.qml b/src/mainview/components/ParticipantOverlay.qml index d74c9dd3aa06ecedb9ed1a06f9e0e117dea2499d..035ccd2d6f5dca3c3e01330f73fc65687bf9ec14 100644 --- a/src/mainview/components/ParticipantOverlay.qml +++ b/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" + } } diff --git a/src/mainview/components/ParticipantOverlayMenu.qml b/src/mainview/components/ParticipantOverlayMenu.qml index 78249d5fe409c873fdb140e45c71cbe711dab785..559dbf2f34195ec2a9b0a690b9c934f56d2e4b47 100644 --- a/src/mainview/components/ParticipantOverlayMenu.qml +++ b/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 net.jami.Adapters 1.0 +import QtQuick.Shapes 1.14 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 + + 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 - // values taken from sketch - width: hasMinimumSize? parent.width : minimumWidth - height: hasMinimumSize? parent.height: minimumHeight + color: isBarLayout? "transparent" : JamiTheme.darkGreyColorOpacity - color: hasMinimumSize? "transparent" : JamiTheme.darkGreyColorOpacity - radius: 10 + radius: (isBarLayout || !isOverlayRect)? 0 : 10 MouseArea { id: mouseAreaHover @@ -70,37 +93,62 @@ Rectangle { acceptedButtons: Qt.LeftButton onExited: mouseAreaExited() + onMouseXChanged: mouseChanged() + + Shape { + id: myShape + visible: isBarLayout + ShapePath { + id: backgroundShape + strokeColor: "transparent" + fillColor: JamiTheme.darkGreyColorOpacity + capStyle: ShapePath.RoundCap + PathSvg { path: pathShape } + } + } - ColumnLayout { - id: layout - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - spacing: 8 - - Text { - id: participantName + 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 + } - TextMetrics { - id: participantMetrics - text: bestName - elide: Text.ElideRight - elideWidth: root.width - JamiTheme.preferredMarginSize * 2 - } + text: participantMetricsColumn.elidedText + color: JamiTheme.whiteColor + font.pointSize: JamiTheme.participantFontSize + horizontalAlignment: isBarLayout? Text.AlignLeft : Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } - text: participantMetrics.elidedText - color: JamiTheme.whiteColor - font.pointSize: JamiTheme.participantFontSize - Layout.alignment: Qt.AlignCenter - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter + Rectangle { + color: "transparent" + width: buttonsSize + 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) } RowLayout { id: rowLayoutButtons - - Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom - Layout.fillWidth: true - spacing: 7 + anchors.centerIn: parent + anchors.fill: parent 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 - : JamiTheme.whiteColor + imageColor: 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 - text: showSetModerator? JamiStrings.setModerator - : JamiStrings.unsetModerator - horizontalAlignment: Text.AlignHCenter - anchors.top: parent.bottom - anchors.topMargin: 6 - color: JamiTheme.whiteColor - font.pointSize: JamiTheme.tinyFontSize + radius: 2 + + Text { + id: toggleModeratorToolTipText + anchors.centerIn: parent + text: showSetModerator? JamiStrings.setModerator + : JamiStrings.unsetModerator + 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 - : JamiTheme.whiteColor + imageColor: JamiTheme.whiteColor onClicked: CallAdapter.muteParticipant(uri, showModeratorMute) - onHoveredChanged: { - toggleParticipantToolTip.visible = hovered - localMutedText.visible = hovered && isLocalMuted - } - - Text { - id: toggleParticipantToolTip - - visible: false - width: parent.width - text: showModeratorMute? JamiStrings.muteParticipant - : JamiStrings.unmuteParticipant - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignTop - - anchors.top: parent.bottom - anchors.topMargin: 6 - color: JamiTheme.whiteColor - font.pointSize: JamiTheme.tinyFontSize - } - - Text { - id: localMutedText - + 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 - 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 + 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 { @@ -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 - : JamiTheme.whiteColor + imageColor: 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 - text: JamiStrings.maximizeParticipant - horizontalAlignment: Text.AlignHCenter - anchors.top: parent.bottom - anchors.topMargin: 6 - color: JamiTheme.whiteColor - font.pointSize: JamiTheme.tinyFontSize + radius: 2 + + Text { + id: maximizeParticipantToolTipText + text: JamiStrings.maximizeParticipant + horizontalAlignment: Text.AlignHCenter + 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 - : JamiTheme.whiteColor + imageColor: 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 - text: JamiStrings.minimizeParticipant - horizontalAlignment: Text.AlignHCenter - anchors.top: parent.bottom - anchors.topMargin: 6 - color: JamiTheme.whiteColor - font.pointSize: JamiTheme.tinyFontSize + radius: 2 + + Text { + id: minimizeParticipantToolTipText + text: JamiStrings.minimizeParticipant + horizontalAlignment: Text.AlignHCenter + 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" - imageColor: hovered? JamiTheme.darkGreyColor - : JamiTheme.whiteColor + source: "qrc:/images/icons/ic_hangup_participant-24px.svg" + imageColor: 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 - text: JamiStrings.hangupParticipant - horizontalAlignment: Text.AlignHCenter - anchors.top: parent.bottom - anchors.topMargin: 6 - color: JamiTheme.whiteColor - font.pointSize: JamiTheme.tinyFontSize + radius: 2 + + Text { + id: hangupParticipantToolTipText + text: JamiStrings.hangupParticipant + horizontalAlignment: Text.AlignHCenter + anchors.centerIn: parent + color: JamiTheme.whiteColor + font.pointSize: JamiTheme.tinyFontSize + } } } }