Fix vertical tabbar width

This commit is contained in:
Julien Wadel 2023-11-28 17:56:21 +01:00
parent b316074feb
commit bf99675d08
3 changed files with 20 additions and 18 deletions

View file

@ -21,7 +21,6 @@ Item {
VerticalTabBar { VerticalTabBar {
id: tabbar id: tabbar
Layout.fillHeight: true Layout.fillHeight: true
Layout.preferredWidth: width
model: [ model: [
{icon: AppIcons.phone, selectedIcon: AppIcons.phoneSelected, label: qsTr("Appels")}, {icon: AppIcons.phone, selectedIcon: AppIcons.phoneSelected, label: qsTr("Appels")},
{icon: AppIcons.adressBook, selectedIcon: AppIcons.adressBookSelected, label: qsTr("Contacts")}, {icon: AppIcons.adressBook, selectedIcon: AppIcons.adressBookSelected, label: qsTr("Contacts")},

View file

@ -9,11 +9,9 @@ Control.TabBar {
id: mainItem id: mainItem
spacing: 15 spacing: 15
topPadding: 20 topPadding: 20
// leftPadding: 15
// rightPadding: 15
property var model property var model
contentItem: ListView { contentItem: ListView {
model: mainItem.contentModel model: mainItem.contentModel
currentIndex: mainItem.currentIndex currentIndex: mainItem.currentIndex
@ -55,31 +53,35 @@ Control.TabBar {
} }
Repeater { Repeater {
id: actionsRepeater
model: mainItem.model model: mainItem.model
Control.TabButton { Control.TabButton {
id: tabButton id: tabButton
anchors.left: parent.left width: mainItem.width
anchors.right: parent.right
contentItem: ColumnLayout { contentItem: ColumnLayout {
anchors.fill: parent height: tabButton.height
width: tabButton.width
EffectImage { EffectImage {
id: buttonIcon id: buttonIcon
property int buttonSize: 20
image.source: mainItem.currentIndex === index ? modelData.selectedIcon : modelData.icon image.source: mainItem.currentIndex === index ? modelData.selectedIcon : modelData.icon
Layout.preferredWidth: 20 Layout.preferredWidth: buttonSize
Layout.preferredHeight: 20 Layout.preferredHeight: buttonSize
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
image.sourceSize.width: 20 image.sourceSize.width: buttonSize
image.fillMode: Image.PreserveAspectFit image.fillMode: Image.PreserveAspectFit
effect.brightness: 1.0 effect.brightness: 1.0
} }
Text { Text {
id: buttonText id: buttonText
text: modelData.label text: modelData.label
font.bold: mainItem.currentIndex === index font {
font.pointSize: DefaultStyle.verticalTabButtonTextSize bold: mainItem.currentIndex === index
pointSize: DefaultStyle.verticalTabButtonTextSize
}
color: DefaultStyle.verticalTabBarTextColor color: DefaultStyle.verticalTabBarTextColor
Layout.preferredWidth: txtMeter.width Layout.fillWidth: true
Layout.preferredHeight: txtMeter.height Layout.preferredHeight: txtMeter.height
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@ -91,11 +93,14 @@ Control.TabBar {
id: txtMeter id: txtMeter
text: modelData.label text: modelData.label
font: buttonText.font font: buttonText.font
Component.onCompleted: mainItem.width = Math.max(mainItem.width, advanceWidth) Component.onCompleted: {
font.bold= true
mainItem.implicitWidth = Math.max(mainItem.implicitWidth, advanceWidth + buttonIcon.buttonSize)
}
} }
background: Item { background: Item {
} }
} }
} }
} }

View file

@ -29,11 +29,9 @@ Item {
color: Control.SplitHandle.hovered ? DefaultStyle.splitViewHoveredHandleColor : DefaultStyle.splitViewHandleColor color: Control.SplitHandle.hovered ? DefaultStyle.splitViewHoveredHandleColor : DefaultStyle.splitViewHandleColor
} }
Component.onCompleted: {
leftPanel.implicitWidth = 280
}
ColumnLayout { ColumnLayout {
id: leftPanel id: leftPanel
Control.SplitView.preferredWidth: 280
} }
Rectangle { Rectangle {
id: rightPanel id: rightPanel