From 6bacd3125afda2f98c1a32fb3cf7b2983e5dfbc1 Mon Sep 17 00:00:00 2001
From: Aline Gondim Santos <aline.gondimsantos@savoirfairelinux.com>
Date: Tue, 9 Aug 2022 16:37:21 -0300
Subject: [PATCH] callbuttons: update popup layout
GitLab: #729
Change-Id: I802bf6fbaa4d0c3b0084857efdd459545ad57db8
---
src/app/constant/JamiTheme.qml | 2 +-
src/app/mainview/components/CallActionBar.qml | 60 ++++++----
.../components/CallButtonDelegate.qml | 105 ++++++++++++------
3 files changed, 115 insertions(+), 52 deletions(-)
diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml
index ac10daa65..3b745e022 100644
--- a/src/app/constant/JamiTheme.qml
+++ b/src/app/constant/JamiTheme.qml
@@ -250,7 +250,7 @@ Item {
property real settingsFontSize: calcSize(11 + fontSizeOffset)
property real buttonFontSize: calcSize(9)
property real materialButtonPreferredHeight: calcSize(36)
- property real participantFontSize: calcSize(10)
+ property real participantFontSize: calcSize(10 + fontSizeOffset)
property real menuFontSize: calcSize(12 + fontSizeOffset)
property real headerFontSize: calcSize(13 + fontSizeOffset)
property real titleFontSize: calcSize(16 + fontSizeOffset)
diff --git a/src/app/mainview/components/CallActionBar.qml b/src/app/mainview/components/CallActionBar.qml
index 6e524e253..51530fb5e 100644
--- a/src/app/mainview/components/CallActionBar.qml
+++ b/src/app/mainview/components/CallActionBar.qml
@@ -32,7 +32,8 @@ Control {
enum ActionPopupMode {
MediaDevice = 0,
- ListElement
+ ListElement,
+ LayoutOption
}
property alias overflowOpen: overflowButton.popup.visible
@@ -151,7 +152,7 @@ Control {
Action {
id: layoutMenuAction
text: JamiStrings.layoutSettings
- property int popupMode: CallActionBar.ActionPopupMode.ListElement
+ property int popupMode: CallActionBar.ActionPopupMode.LayoutOption
property var listModel: ListModel {
id: layoutModel
}
@@ -166,14 +167,16 @@ Control {
CallAdapter.showGridConferenceLayout()
break
case JamiStrings.participantsSide:
- var onTheSide = UtilsAdapter.getAppValue(Settings.ParticipantsSide)
- UtilsAdapter.setAppValue(Settings.ParticipantsSide, !onTheSide)
- participantsSide = !onTheSide
+ if (!UtilsAdapter.getAppValue(Settings.ParticipantsSide)) {
+ UtilsAdapter.setAppValue(Settings.ParticipantsSide, true)
+ participantsSide = true
+ }
break
case JamiStrings.participantsTop:
- var onTheSide = UtilsAdapter.getAppValue(Settings.ParticipantsSide)
- UtilsAdapter.setAppValue(Settings.ParticipantsSide, !onTheSide)
- participantsSide = !onTheSide
+ if (UtilsAdapter.getAppValue(Settings.ParticipantsSide)) {
+ UtilsAdapter.setAppValue(Settings.ParticipantsSide, false)
+ participantsSide = false
+ }
case JamiStrings.hideSelf:
UtilsAdapter.setAppValue(Settings.HideSelf, !layoutModel.get(index).ActiveSetting)
GenericParticipantsFilterModel.hideSelf = UtilsAdapter.getAppValue(Settings.HideSelf)
@@ -193,27 +196,44 @@ Control {
if (isConference) {
layoutModel.append({"Name": JamiStrings.mosaic,
"IconSource": JamiResources.mosaic_black_24dp_svg,
- "ActiveSetting": isGrid})
- layoutModel.append({})
+ "ActiveSetting": isGrid,
+ "TopMargin": true,
+ "BottomMargin": true,
+ "SectionEnd": true})
var onTheSide = UtilsAdapter.getAppValue(Settings.ParticipantsSide)
- layoutModel.append({"Name": onTheSide ? JamiStrings.participantsSide : JamiStrings.participantsTop,
- "IconSource": onTheSide ? JamiResources.ontheside_black_24dp_svg : JamiResources.onthetop_black_24dp_svg,
- "ActiveSetting": true})
- layoutModel.append({})
+ layoutModel.append({"Name": JamiStrings.participantsTop,
+ "IconSource": JamiResources.onthetop_black_24dp_svg,
+ "ActiveSetting": !onTheSide,
+ "TopMargin": true,
+ "BottomMargin": false,
+ "SectionEnd": false})
+ layoutModel.append({"Name": JamiStrings.participantsSide,
+ "IconSource": JamiResources.ontheside_black_24dp_svg,
+ "ActiveSetting": onTheSide,
+ "TopMargin": false,
+ "BottomMargin": true,
+ "SectionEnd": true})
+
layoutModel.append({"Name": JamiStrings.hideSelf,
"IconSource": JamiResources.hidemyself_black_24dp_svg,
- "ActiveSetting": UtilsAdapter.getAppValue(Settings.HideSelf)})
- layoutModel.append({})
+ "ActiveSetting": UtilsAdapter.getAppValue(Settings.HideSelf),
+ "TopMargin": true,
+ "BottomMargin": true,
+ "SectionEnd": true})
}
layoutModel.append({"Name": JamiStrings.viewFullScreen,
"IconSource": JamiResources.open_in_full_24dp_svg,
- "ActiveSetting": layoutManager.isCallFullscreen})
+ "ActiveSetting": layoutManager.isCallFullscreen,
+ "TopMargin": true,
+ "BottomMargin": true,
+ "SectionEnd": isConference})
if (isConference) {
- layoutModel.append({})
layoutModel.append({"Name": JamiStrings.hideAudioOnly,
"IconSource": JamiResources.videocam_off_24dp_svg,
- "ActiveSetting": UtilsAdapter.getAppValue(Settings.HideAudioOnly)})
+ "ActiveSetting": UtilsAdapter.getAppValue(Settings.HideAudioOnly),
+ "TopMargin": true,
+ "BottomMargin": true})
}
}
},
@@ -360,7 +380,7 @@ Control {
icon.source: JamiResources.mosaic_black_24dp_svg
icon.color: "white"
text: JamiStrings.layoutSettings
- property real size: 34
+ property real size: 28
property var menuAction: layoutMenuAction
},
Action {
diff --git a/src/app/mainview/components/CallButtonDelegate.qml b/src/app/mainview/components/CallButtonDelegate.qml
index 4b8e22684..9b7618ede 100644
--- a/src/app/mainview/components/CallButtonDelegate.qml
+++ b/src/app/mainview/components/CallButtonDelegate.qml
@@ -207,47 +207,79 @@ ItemDelegate {
id: menuItem
width: itemListView.menuItemWidth
+ height: {
+ if (menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption &&
+ (!TopMargin || !BottomMargin)) {
+ return 40
+ }
+ return 45
+ }
background: Rectangle {
anchors.fill: parent
color: menuItem.down ? "#c4aaaaaa" : menuItem.hovered ? "#c4777777" : "transparent"
}
- contentItem: RowLayout {
+ contentItem: ColumnLayout {
anchors.fill: parent
- ResponsiveImage {
- Layout.leftMargin: 6
- source: menuAction.popupMode === CallActionBar.ActionPopupMode.ListElement ?
- IconSource : (menuItem.ListView.isCurrentItem ?
- JamiResources.check_box_24dp_svg :
- JamiResources.check_box_outline_blank_24dp_svg)
- color: "white"
- visible: delegateText.visible
- }
- Text {
- id: delegateText
- Layout.rightMargin: 6
+ spacing: 0
+ RowLayout {
Layout.fillWidth: true
- horizontalAlignment: Text.AlignLeft
- verticalAlignment: Text.AlignVCenter
- text: menuAction.popupMode
- === CallActionBar.ActionPopupMode.ListElement ? Name : DeviceName
- elide: Text.ElideRight
- font.pointSize: 9
- color: "white"
- visible: text
- }
- ResponsiveImage {
- Layout.leftMargin: 6
- source: JamiResources.check_black_24dp_svg
- color: "white"
- visible: delegateText.visible && ActiveSetting
+ Layout.rightMargin: 15
+ Layout.leftMargin: 20
+ Layout.fillHeight: true
+ Layout.alignment: {
+ if (menuAction.popupMode !== CallActionBar.ActionPopupMode.LayoutOption ||
+ TopMargin && BottomMargin) {
+ return Qt.AlignLeft | Qt.AlignVCenter
+ }
+ if (TopMargin) {
+ Layout.bottomMargin = 4
+ return Qt.AlignBottom
+ }
+ Layout.topMargin = 4
+ return Qt.AlignTop
+ }
+
+ spacing: 6
+ ResponsiveImage {
+ source: menuAction.popupMode === CallActionBar.ActionPopupMode.ListElement ||
+ menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption ?
+ IconSource : (menuItem.ListView.isCurrentItem ?
+ JamiResources.check_box_24dp_svg :
+ JamiResources.check_box_outline_blank_24dp_svg)
+ color: "white"
+ width: 20
+ height: 20
+ }
+ Text {
+ id: delegateText
+ Layout.fillWidth: true
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignVCenter
+ text: menuAction.popupMode === CallActionBar.ActionPopupMode.ListElement ||
+ menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption ?
+ Name : DeviceName
+ elide: Text.ElideRight
+ font.pointSize: JamiTheme.participantFontSize
+ color: "white"
+ }
+ ResponsiveImage {
+ source: JamiResources.check_black_24dp_svg
+ color: "white"
+ width: 20
+ height: 20
+ visible: menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption ?
+ ActiveSetting : false
+ }
}
Rectangle {
id: buttonDiv
- visible: !delegateText.visible
+ visible: menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption ? SectionEnd : false
Layout.fillWidth: true
height: 1
+ opacity: 0.2
border.width : 0
color: JamiTheme.separationLine
+ Layout.alignment: Qt.AlignBottom
}
}
}
@@ -256,7 +288,14 @@ ItemDelegate {
id: itemPopup
y: isVertical ? -(implicitHeight - wrapper.height) / 2 - 18 : -implicitHeight - 12
- x: isVertical ? -implicitWidth - 12 : -(implicitWidth - wrapper.width) / 2 - 18
+ x: {
+ if (isVertical)
+ return -implicitWidth - 12
+ var xValue = -(implicitWidth - wrapper.width) / 2 - 18
+ var mainPoint = mapToItem(mainView, xValue, y)
+ var diff = mainPoint.x + itemListView.implicitWidth - mainView.width
+ return diff > 0 ? xValue - diff - 24 : xValue
+ }
implicitWidth: contentItem.implicitWidth
implicitHeight: contentItem.implicitHeight
@@ -274,19 +313,23 @@ ItemDelegate {
pixelAligned: true
orientation: ListView.Vertical
implicitWidth: menuItemWidth
- implicitHeight: Math.min(contentHeight, menuItemHeight * 6) + 24
+ implicitHeight: Math.min(contentHeight, menuItemHeight * 9) + 24
model: menu.delegateModel
TextMetrics {
id: itemTextMetrics
- font.pointSize: 9
+ font.pointSize: JamiTheme.participantFontSize
}
// recalc list width based on max item width
onCountChanged: {
var maxWidth = 0
+ if (count && menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption) {
+ menuItemWidth = 290
+ return
+ }
for (var i = 0; i < count; ++i) {
if (menuAction.popupMode === CallActionBar.ActionPopupMode.ListElement) {
itemTextMetrics.text = menuAction.listModel.get(i).Name
--
GitLab