Improve ui to access chat header buttons when window is at its minimum width

This commit is contained in:
Gaelle Braud 2026-02-24 15:13:27 +01:00
parent 9da9c25dba
commit 447e82097b
7 changed files with 33 additions and 114 deletions

View file

@ -180,8 +180,8 @@ ListView {
id: friendAddress
Layout.fillWidth: true
maximumLineCount: 1
text: modelData? UtilsCpp.encodeEmojiToQmlRichFormat(modelData.core.title) : ""
textFormat: Text.RichText
text: modelData ? modelData.core.title : ""
textFormat: Text.PlainText
color: DefaultStyle.main2_800
font {
pixelSize: Typography.p1.pixelSize

View file

@ -90,14 +90,20 @@ FocusScope {
header.bottomPadding: Utils.getSizeWithScreenRatio(searchBarLayout.visible ? 3 : 6)
header.contentItem: ColumnLayout {
id: chatHeader
Layout.fillWidth: true
Layout.leftMargin: mainItem.call ? 0 : Utils.getSizeWithScreenRatio(31)
Layout.rightMargin: Utils.getSizeWithScreenRatio(41)
spacing: searchBarLayout.visible ? Utils.getSizeWithScreenRatio(9) : 0
RowLayout {
property real minimumWidthForSwitchintToRowLayout: headerInfos.implicitWidth + headerActionButtons.implicitWidth
property var useVerticalLayout: width < minimumWidthForSwitchintToRowLayout
GridLayout {
columns: chatHeader.useVerticalLayout ? 1 : children.length
rows: 1
RowLayout {
id: chatHeader
id: headerInfos
spacing: Utils.getSizeWithScreenRatio(12)
// property int childrenWidth:
Avatar {
property var contactObj: mainItem.chat ? UtilsCpp.findFriendByAddress(mainItem.chat?.core.peerAddress) : null
contact: contactObj?.value || null
@ -108,10 +114,10 @@ FocusScope {
}
ColumnLayout {
Text {
Layout.fillWidth: true
text: UtilsCpp.encodeEmojiToQmlRichFormat(mainItem.chat?.core.title) || ""
color: DefaultStyle.main2_600
maximumLineCount: 1
textFormat: Text.RichText
font {
pixelSize: Typography.h4.pixelSize
weight: Utils.getSizeWithScreenRatio(400)
@ -121,7 +127,7 @@ FocusScope {
visible: mainItem.chat?.core.ephemeralEnabled || false
EffectImage {
colorizationColor: DefaultStyle.main1_500_main
Layout.preferredWidth: Utils.getSizeWithScreenRatio(14)
Layout.preferredWidth: visible ? Utils.getSizeWithScreenRatio(14) : 0
Layout.preferredHeight: Utils.getSizeWithScreenRatio(14)
imageSource: AppIcons.clockCountDown
}
@ -160,8 +166,8 @@ FocusScope {
imageSource: AppIcons.bellSlash
}
}
Item{Layout.fillWidth: true}
RowLayout {
id: headerActionButtons
spacing: Utils.getSizeWithScreenRatio(16)
RoundButton {
visible: !mainItem.call && !mainItem.chat?.core.isReadOnly
@ -198,6 +204,7 @@ FocusScope {
visible: !mainItem.call
style: ButtonStyle.noBackground
checkable: true
Layout.preferredWidth: width
checkedImageColor: DefaultStyle.main1_500_main
icon.source: AppIcons.info
checked: detailsPanel.visible

View file

@ -25,122 +25,30 @@ FocusScope {
property int rightPanelStackBottomMargin: 0
signal noItemButtonPressed()
// Control.SplitView {
// id: splitView
// anchors.fill: parent
// anchors.topMargin: Utils.getSizeWithScreenRatio(10)
// handle: Rectangle {
// implicitWidth: Utils.getSizeWithScreenRatio(8)
// color: Control.SplitHandle.hovered ? DefaultStyle.grey_200 : DefaultStyle.grey_100
// }
// ColumnLayout {
// id: leftPanel
// Control.SplitView.preferredWidth: Utils.getSizeWithScreenRatio(350)
// Control.SplitView.minimumWidth: Utils.getSizeWithScreenRatio(350)
// }
// Rectangle {
// id: rightPanel
// clip: true
// color: DefaultStyle.grey_100
// StackLayout {
// currentIndex: mainItem.showDefaultItem ? 0 : 1
// anchors.fill: parent
// ColumnLayout {
// id: defaultItem
// Layout.fillWidth: true
// Layout.fillHeight: true
// RowLayout {
// Layout.fillHeight: true
// Layout.fillWidth: true
// Layout.alignment: Qt.AlignHCenter
// Item {
// Layout.fillWidth: true
// }
// ColumnLayout {
// spacing: Utils.getSizeWithScreenRatio(30)
// Item {
// Layout.fillHeight: true
// }
// Image {
// Layout.alignment: Qt.AlignHCenter
// source: AppIcons.noItemImage
// Layout.preferredWidth: Utils.getSizeWithScreenRatio(359)
// Layout.preferredHeight: Utils.getSizeWithScreenRatio(314)
// fillMode: Image.PreserveAspectFit
// }
// Text {
// text: mainItem.emptyListText
// Layout.alignment: Qt.AlignHCenter
// font {
// pixelSize: Utils.getSizeWithScreenRatio(22)
// weight: Utils.getSizeWithScreenRatio(800)
// }
// }
// Button {
// Layout.alignment: Qt.AlignHCenter
// contentItem: RowLayout {
// Layout.alignment: Qt.AlignVCenter
// EffectImage {
// colorizationColor: DefaultStyle.grey_0
// source: mainItem.newItemIconSource
// width: Utils.getSizeWithScreenRatio(24)
// height: Utils.getSizeWithScreenRatio(24)
// fillMode: Image.PreserveAspectFit
// }
// Text {
// text: mainItem.noItemButtonText
// wrapMode: Text.WordWrap
// color: DefaultStyle.grey_0
// font {
// weight: Utils.getSizeWithScreenRatio(600)
// pixelSize: Utils.getSizeWithScreenRatio(18)
// family: DefaultStyle.defaultFont
// }
// }
// }
// onPressed: mainItem.noItemButtonPressed()
// }
// Item {
// Layout.fillHeight: true
// }
// }
// Item {
// Layout.fillWidth: true
// }
// }
// }
// ColumnLayout {
// id: rightPanelItem
// Layout.fillWidth: true
// Layout.fillHeight: true
// }
// }
// }
// }
RowLayout {
Control.SplitView {
id: splitView
anchors.fill: parent
spacing: 0
anchors.topMargin: Utils.getSizeWithScreenRatio(10)
handle: Rectangle {
implicitWidth: Utils.getSizeWithScreenRatio(6)
color: Control.SplitHandle.hovered ? DefaultStyle.main2_200 : DefaultStyle.grey_200
}
ColumnLayout {
id: leftPanel
Layout.preferredWidth: Utils.getSizeWithScreenRatio(404)
Layout.fillWidth:false
spacing:0
}
Rectangle {
Layout.fillHeight: true
Layout.preferredWidth: Utils.getSizeWithScreenRatio(1)
color: DefaultStyle.main2_200
// Control.SplitView.fillWidth:false
Control.SplitView.fillHeight: true
Control.SplitView.preferredWidth: Utils.getSizeWithScreenRatio(404)
Control.SplitView.minimumWidth: Utils.getSizeWithScreenRatio(200)
Control.SplitView.maximumWidth: Utils.getSizeWithScreenRatio(500)
}
Rectangle {
id: rightPanel
clip: true
color: mainItem.rightPanelColor
Layout.fillWidth: true
Layout.fillHeight: true
Control.SplitView.fillWidth: true
Control.SplitView.fillHeight: true
StackLayout {
currentIndex: mainItem.showDefaultItem ? 0 : 1

View file

@ -148,6 +148,7 @@ AbstractMainPage {
Layout.fillWidth: true
//: "Appels"
text: qsTr("call_history_call_list_title")
maximumLineCount: 1
color: DefaultStyle.main2_700
font.pixelSize: Typography.h2.pixelSize
font.weight: Typography.h2.weight

View file

@ -129,6 +129,7 @@ AbstractMainPage {
Layout.fillWidth: true
//: "Conversations"
text: qsTr("chat_list_title")
maximumLineCount: 1
color: DefaultStyle.main2_700
font.pixelSize: Typography.h2.pixelSize
font.weight: Typography.h2.weight

View file

@ -233,6 +233,7 @@ AbstractMainPage {
Layout.fillWidth: true
//: "Contacts"
text: qsTr("bottom_navigation_contacts_label")
maximumLineCount: 1
color: DefaultStyle.main2_700
font.pixelSize: Typography.h2.pixelSize
font.weight: Typography.h2.weight

View file

@ -160,6 +160,7 @@ AbstractMainPage {
//: Réunions
text: qsTr("meetings_list_title")
color: DefaultStyle.main2_700
maximumLineCount: 1
font.pixelSize: Typography.h2.pixelSize
font.weight: Typography.h2.weight
}