Skip to content
Snippets Groups Projects
Commit 767f1003 authored by Andreas Traczyk's avatar Andreas Traczyk
Browse files

participant-controls: refactor menu layouts 

Gitlab: #441
Change-Id: I1d34c7e766d73026d4c6617592a85ce3a75cc4fa
parent a7fdb82f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
qml.qrc
+ 2
− 0
View file @ 767f1003
......@@ -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 → 100644
+ 98
− 0
View file @ 767f1003
/*
* 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
+ 0
− 1
View file @ 767f1003
......@@ -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 → 100644
+ 58
− 0
View file @ 767f1003
/*
* 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
+ 97
− 313
View file @ 767f1003
......@@ -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
TextMetrics {
id: nameTextMetrics
text: bestName
font.pointSize: JamiTheme.participantFontSize
}
property int labelMaxWidth: isBarLayout? Math.max(parent.width - buttonsSize, 80)
: visibleButtons > 0? buttonsSize
: parent.width - 16
Component {
id: rectComponent
property int isSmall: !isBarLayout && (height < 100 || width < 160)
Control {
width: root.width
height: root.height
width: isBarLayout? bestNameLabel.contentWidth + buttonsSize + 32
: (isOverlayRect? buttonsSize + 32 : parent.width)
height: isBarLayout? shapeHeight : (isOverlayRect? 80 : parent.height)
onHoveredChanged: root.hovered = hovered
anchors.top: isBarLayout? parent.top : undefined
anchors.left: isBarLayout? parent.left : undefined
anchors.centerIn: isBarLayout? undefined : parent
background: Rectangle {
property int buttonsSize: buttonsRect.visibleButtons * 24 + 8 * 2
property bool isOverlayRect: buttonsSize + 32 > root.width
background: Rectangle {
color: isBarLayout? "transparent" : JamiTheme.darkGreyColorOpacity
radius: (isBarLayout || !isOverlayRect)? 0 : 10
}
color: JamiTheme.darkGreyColorOpacity
radius: isOverlayRect ? 10 : 0
Item {
anchors.fill: parent
Shape {
id: myShape
visible: isBarLayout
ShapePath {
id: backgroundShape
strokeColor: "transparent"
fillColor: JamiTheme.darkGreyColorOpacity
capStyle: ShapePath.RoundCap
PathSvg { path: pathShape }
anchors.fill: isOverlayRect ? undefined : parent
anchors.centerIn: parent
width: isOverlayRect ? buttonsSize + 32 : parent.width
height: isOverlayRect ? 80 : parent.height
}
}
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
}
ColumnLayout {
anchors.centerIn: parent
Text {
id: bestNameLabel
text: participantMetricsColumn.elidedText
color: JamiTheme.whiteColor
font.pointSize: JamiTheme.participantFontSize
horizontalAlignment: isBarLayout? Text.AlignLeft : Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
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
}
}
}
}
Rectangle {
color: "transparent"
width: buttonsSize
Component {
id: barComponent
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
PushButton {
id: toggleModerator
visible: (showSetModerator || showUnsetModerator)
Layout.preferredWidth: buttonPreferredSize
Layout.preferredHeight: buttonPreferredSize
preferredSize: iconButtonPreferredSize
normalColor: JamiTheme.buttonConference
hoveredColor: JamiTheme.buttonConferenceHovered
pressedColor: JamiTheme.buttonConferencePressed
source: "qrc:/images/icons/moderator.svg"
imageColor: JamiTheme.whiteColor
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
}
}
}
id: rowLayout
PushButton {
id: toggleMute
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
}
}
}
spacing: 8
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
}
}
}
Text {
id: bestNameLabel
Layout.leftMargin: 8
Layout.preferredWidth: Math.min(nameTextMetrics.boundingRect.width + 8,
root.width - buttonsRect.implicitWidth - 16)
Layout.preferredHeight: shapeHeight
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
}
}
text: bestName
elide: Text.ElideRight
color: JamiTheme.whiteColor
font.pointSize: JamiTheme.participantFontSize
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
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
}
}
ParticipantControlLayout {
id: buttonsRect
Layout.rightMargin: 8
Layout.preferredWidth: implicitWidth
Layout.preferredHeight: shapeHeight
}
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment