mirror of
https://gitlab.linphone.org/BC/public/linphone-desktop.git
synced 2026-04-17 11:58:27 +00:00
Improve ui to access chat header buttons when window is at its minimum width
This commit is contained in:
parent
9da9c25dba
commit
447e82097b
7 changed files with 33 additions and 114 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue