mirror of
https://git.jami.net/savoirfairelinux/jami-client-qt.git
synced 2025-08-04 06:45:45 +02:00
callbuttons: update popup layout
GitLab: #729 Change-Id: I802bf6fbaa4d0c3b0084857efdd459545ad57db8
This commit is contained in:
parent
e897a88baf
commit
6bacd3125a
3 changed files with 115 additions and 52 deletions
|
@ -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)
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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
|
||||||
ResponsiveImage {
|
spacing: 0
|
||||||
Layout.leftMargin: 6
|
RowLayout {
|
||||||
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
|
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
horizontalAlignment: Text.AlignLeft
|
Layout.rightMargin: 15
|
||||||
verticalAlignment: Text.AlignVCenter
|
Layout.leftMargin: 20
|
||||||
text: menuAction.popupMode
|
Layout.fillHeight: true
|
||||||
=== CallActionBar.ActionPopupMode.ListElement ? Name : DeviceName
|
Layout.alignment: {
|
||||||
elide: Text.ElideRight
|
if (menuAction.popupMode !== CallActionBar.ActionPopupMode.LayoutOption ||
|
||||||
font.pointSize: 9
|
TopMargin && BottomMargin) {
|
||||||
color: "white"
|
return Qt.AlignLeft | Qt.AlignVCenter
|
||||||
visible: text
|
}
|
||||||
}
|
if (TopMargin) {
|
||||||
ResponsiveImage {
|
Layout.bottomMargin = 4
|
||||||
Layout.leftMargin: 6
|
return Qt.AlignBottom
|
||||||
source: JamiResources.check_black_24dp_svg
|
}
|
||||||
color: "white"
|
Layout.topMargin = 4
|
||||||
visible: delegateText.visible && ActiveSetting
|
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 {
|
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
|
||||||
|
|
Loading…
Add table
Reference in a new issue