lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-08-04 14:55:43 +02:00
Code Activity

callbuttons: update popup layout

Browse source 
GitLab: #729

Change-Id: I802bf6fbaa4d0c3b0084857efdd459545ad57db8
This commit is contained in:
Aline Gondim Santos 2022-08-09 16:37:21 -03:00
parent e897a88baf
commit 6bacd3125a
3 changed files with 115 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/constant/JamiTheme.qml
View file

@ -250,7 +250,7 @@ Item {
property real settingsFontSize: calcSize(11 + fontSizeOffset) property real settingsFontSize: calcSize(11 + fontSizeOffset)
property real buttonFontSize: calcSize(9) property real buttonFontSize: calcSize(9)
property real materialButtonPreferredHeight: calcSize(36) property real materialButtonPreferredHeight: calcSize(36)
property real participantFontSize: calcSize(10) property real participantFontSize: calcSize(10 + fontSizeOffset)
property real menuFontSize: calcSize(12 + fontSizeOffset) property real menuFontSize: calcSize(12 + fontSizeOffset)
property real headerFontSize: calcSize(13 + fontSizeOffset) property real headerFontSize: calcSize(13 + fontSizeOffset)
property real titleFontSize: calcSize(16 + fontSizeOffset) property real titleFontSize: calcSize(16 + fontSizeOffset)

60
src/app/mainview/components/CallActionBar.qml
View file

@ -32,7 +32,8 @@ Control {
enum ActionPopupMode { enum ActionPopupMode {
MediaDevice = 0, MediaDevice = 0,
ListElement ListElement,
LayoutOption
} }
property alias overflowOpen: overflowButton.popup.visible property alias overflowOpen: overflowButton.popup.visible
@ -151,7 +152,7 @@ Control {
Action { Action {
id: layoutMenuAction id: layoutMenuAction
text: JamiStrings.layoutSettings text: JamiStrings.layoutSettings
property int popupMode: CallActionBar.ActionPopupMode.ListElement property int popupMode: CallActionBar.ActionPopupMode.LayoutOption
property var listModel: ListModel { property var listModel: ListModel {
id: layoutModel id: layoutModel
} }
@ -166,14 +167,16 @@ Control {
CallAdapter.showGridConferenceLayout() CallAdapter.showGridConferenceLayout()
break break
case JamiStrings.participantsSide: case JamiStrings.participantsSide:
var onTheSide = UtilsAdapter.getAppValue(Settings.ParticipantsSide) if (!UtilsAdapter.getAppValue(Settings.ParticipantsSide)) {
UtilsAdapter.setAppValue(Settings.ParticipantsSide, !onTheSide) UtilsAdapter.setAppValue(Settings.ParticipantsSide, true)
participantsSide = !onTheSide participantsSide = true
}
break break
case JamiStrings.participantsTop: case JamiStrings.participantsTop:
var onTheSide = UtilsAdapter.getAppValue(Settings.ParticipantsSide) if (UtilsAdapter.getAppValue(Settings.ParticipantsSide)) {
UtilsAdapter.setAppValue(Settings.ParticipantsSide, !onTheSide) UtilsAdapter.setAppValue(Settings.ParticipantsSide, false)
participantsSide = !onTheSide participantsSide = false
}
case JamiStrings.hideSelf: case JamiStrings.hideSelf:
UtilsAdapter.setAppValue(Settings.HideSelf, !layoutModel.get(index).ActiveSetting) UtilsAdapter.setAppValue(Settings.HideSelf, !layoutModel.get(index).ActiveSetting)
GenericParticipantsFilterModel.hideSelf = UtilsAdapter.getAppValue(Settings.HideSelf) GenericParticipantsFilterModel.hideSelf = UtilsAdapter.getAppValue(Settings.HideSelf)
@ -193,27 +196,44 @@ Control {
if (isConference) { if (isConference) {
layoutModel.append({"Name": JamiStrings.mosaic, layoutModel.append({"Name": JamiStrings.mosaic,
"IconSource": JamiResources.mosaic_black_24dp_svg, "IconSource": JamiResources.mosaic_black_24dp_svg,
"ActiveSetting": isGrid}) "ActiveSetting": isGrid,
layoutModel.append({}) "TopMargin": true,
"BottomMargin": true,
"SectionEnd": true})
var onTheSide = UtilsAdapter.getAppValue(Settings.ParticipantsSide) var onTheSide = UtilsAdapter.getAppValue(Settings.ParticipantsSide)
layoutModel.append({"Name": onTheSide ? JamiStrings.participantsSide : JamiStrings.participantsTop, layoutModel.append({"Name": JamiStrings.participantsTop,
"IconSource": onTheSide ? JamiResources.ontheside_black_24dp_svg : JamiResources.onthetop_black_24dp_svg, "IconSource": JamiResources.onthetop_black_24dp_svg,
"ActiveSetting": true}) "ActiveSetting": !onTheSide,
layoutModel.append({}) "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, layoutModel.append({"Name": JamiStrings.hideSelf,
"IconSource": JamiResources.hidemyself_black_24dp_svg, "IconSource": JamiResources.hidemyself_black_24dp_svg,
"ActiveSetting": UtilsAdapter.getAppValue(Settings.HideSelf)}) "ActiveSetting": UtilsAdapter.getAppValue(Settings.HideSelf),
layoutModel.append({}) "TopMargin": true,
"BottomMargin": true,
"SectionEnd": true})
} }
layoutModel.append({"Name": JamiStrings.viewFullScreen, layoutModel.append({"Name": JamiStrings.viewFullScreen,
"IconSource": JamiResources.open_in_full_24dp_svg, "IconSource": JamiResources.open_in_full_24dp_svg,
"ActiveSetting": layoutManager.isCallFullscreen}) "ActiveSetting": layoutManager.isCallFullscreen,
"TopMargin": true,
"BottomMargin": true,
"SectionEnd": isConference})
if (isConference) { if (isConference) {
layoutModel.append({})
layoutModel.append({"Name": JamiStrings.hideAudioOnly, layoutModel.append({"Name": JamiStrings.hideAudioOnly,
"IconSource": JamiResources.videocam_off_24dp_svg, "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.source: JamiResources.mosaic_black_24dp_svg
icon.color: "white" icon.color: "white"
text: JamiStrings.layoutSettings text: JamiStrings.layoutSettings
property real size: 34 property real size: 28
property var menuAction: layoutMenuAction property var menuAction: layoutMenuAction
}, },
Action { Action {

73
src/app/mainview/components/CallButtonDelegate.qml
View file

@ -207,47 +207,79 @@ ItemDelegate {
id: menuItem id: menuItem
width: itemListView.menuItemWidth width: itemListView.menuItemWidth
height: {
if (menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption &&
(!TopMargin || !BottomMargin)) {
return 40
}
return 45
}
background: Rectangle { background: Rectangle {
anchors.fill: parent anchors.fill: parent
color: menuItem.down ? "#c4aaaaaa" : menuItem.hovered ? "#c4777777" : "transparent" color: menuItem.down ? "#c4aaaaaa" : menuItem.hovered ? "#c4777777" : "transparent"
} }
contentItem: RowLayout { contentItem: ColumnLayout {
anchors.fill: parent anchors.fill: parent
spacing: 0
RowLayout {
Layout.fillWidth: true
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 { ResponsiveImage {
Layout.leftMargin: 6 source: menuAction.popupMode === CallActionBar.ActionPopupMode.ListElement ||
source: menuAction.popupMode === CallActionBar.ActionPopupMode.ListElement ? menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption ?
IconSource : (menuItem.ListView.isCurrentItem ? IconSource : (menuItem.ListView.isCurrentItem ?
JamiResources.check_box_24dp_svg : JamiResources.check_box_24dp_svg :
JamiResources.check_box_outline_blank_24dp_svg) JamiResources.check_box_outline_blank_24dp_svg)
color: "white" color: "white"
visible: delegateText.visible width: 20
height: 20
} }
Text { Text {
id: delegateText id: delegateText
Layout.rightMargin: 6
Layout.fillWidth: true Layout.fillWidth: true
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
text: menuAction.popupMode text: menuAction.popupMode === CallActionBar.ActionPopupMode.ListElement ||
=== CallActionBar.ActionPopupMode.ListElement ? Name : DeviceName menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption ?
Name : DeviceName
elide: Text.ElideRight elide: Text.ElideRight
font.pointSize: 9 font.pointSize: JamiTheme.participantFontSize
color: "white" color: "white"
visible: text
} }
ResponsiveImage { ResponsiveImage {
Layout.leftMargin: 6
source: JamiResources.check_black_24dp_svg source: JamiResources.check_black_24dp_svg
color: "white" color: "white"
visible: delegateText.visible && ActiveSetting width: 20
height: 20
visible: menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption ?
ActiveSetting : false
}
} }
Rectangle { Rectangle {
id: buttonDiv id: buttonDiv
visible: !delegateText.visible visible: menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption ? SectionEnd : false
Layout.fillWidth: true Layout.fillWidth: true
height: 1 height: 1
opacity: 0.2
border.width : 0 border.width : 0
color: JamiTheme.separationLine color: JamiTheme.separationLine
Layout.alignment: Qt.AlignBottom
} }
} }
} }
@ -256,7 +288,14 @@ ItemDelegate {
id: itemPopup id: itemPopup
y: isVertical ? -(implicitHeight - wrapper.height) / 2 - 18 : -implicitHeight - 12 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 implicitWidth: contentItem.implicitWidth
implicitHeight: contentItem.implicitHeight implicitHeight: contentItem.implicitHeight
@ -274,19 +313,23 @@ ItemDelegate {
pixelAligned: true pixelAligned: true
orientation: ListView.Vertical orientation: ListView.Vertical
implicitWidth: menuItemWidth implicitWidth: menuItemWidth
implicitHeight: Math.min(contentHeight, menuItemHeight * 6) + 24 implicitHeight: Math.min(contentHeight, menuItemHeight * 9) + 24
model: menu.delegateModel model: menu.delegateModel
TextMetrics { TextMetrics {
id: itemTextMetrics id: itemTextMetrics
font.pointSize: 9 font.pointSize: JamiTheme.participantFontSize
} }
// recalc list width based on max item width // recalc list width based on max item width
onCountChanged: { onCountChanged: {
var maxWidth = 0 var maxWidth = 0
if (count && menuAction.popupMode === CallActionBar.ActionPopupMode.LayoutOption) {
menuItemWidth = 290
return
}
for (var i = 0; i < count; ++i) { for (var i = 0; i < count; ++i) {
if (menuAction.popupMode === CallActionBar.ActionPopupMode.ListElement) { if (menuAction.popupMode === CallActionBar.ActionPopupMode.ListElement) {
itemTextMetrics.text = menuAction.listModel.get(i).Name itemTextMetrics.text = menuAction.listModel.get(i).Name