Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix TabBar issues with multiple tabs #3546

Merged
merged 1 commit into from
Jul 26, 2024
Merged

Fix TabBar issues with multiple tabs #3546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/mmstyle.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,7 @@ class MMStyle: public QObject
Q_PROPERTY( double row24 READ number24 CONSTANT )
Q_PROPERTY( double row36 READ number36 CONSTANT )
Q_PROPERTY( double row40 READ number40 CONSTANT )
Q_PROPERTY( double row45 READ number45 CONSTANT )
Q_PROPERTY( double row49 READ number49 CONSTANT )
Q_PROPERTY( double row50 READ number50 CONSTANT )
Q_PROPERTY( double row54 READ number54 CONSTANT )
Expand Down
25 changes: 10 additions & 15 deletions app/qml/form/MMFormPage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,12 +108,15 @@ Page {
MMFormComponents.MMFormTabBar {
id: tabBar

Layout.topMargin: __style.margin10
Layout.bottomMargin: __style.margin10
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.maximumWidth: Math.min(__style.maxPageWidth, root.width)

visible: root.controller.hasTabs
model: root.controller.attributeTabProxyModel

tabButtonsModel: root.controller.attributeTabProxyModel
visible: root.controller.hasTabs

onCurrentIndexChanged: formSwipe.setCurrentIndex( tabBar.currentIndex )
}
Expand All @@ -128,7 +131,7 @@ Page {

clip: true

onCurrentIndexChanged: tabBar.setCurrentIndex( formSwipe.currentIndex )
onCurrentIndexChanged: tabBar.currentIndex = formSwipe.currentIndex

Repeater {
id: swipeViewRepeater
Expand Down Expand Up @@ -161,7 +164,7 @@ Page {
section {
property: "Group"
delegate: sectionDelegate
labelPositioning: ViewSection.CurrentLabelAtStart | ViewSection.InlineLabels
labelPositioning: ViewSection.InlineLabels
}

delegate: editorDelegate
Expand Down Expand Up @@ -220,22 +223,14 @@ Page {
Component {
id: sectionDelegate

Item {

property string sectionTitle: section
Rectangle {

height: section ? childrenRect.height : 0
width: ListView.view.width

// section bgnd
Rectangle {
anchors.fill: parent;
color: __style.lightGreenColor;
}
color: __style.lightGreenColor

MMComponents.MMText {
id: sectionTitle

text: section
font: __style.h3
color: __style.forestColor
Expand Down Expand Up @@ -274,7 +269,7 @@ Page {
width: parent.width

property var fieldValue: model.RawValue
property bool fieldValueIsNull: model.RawValueIsNull
property bool fieldValueIsNull: model.RawValueIsNull ?? true

property var field: model.Field
property var fieldIndex: model.FieldIndex
Expand Down
71 changes: 29 additions & 42 deletions app/qml/form/components/MMFormTabBar.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,65 +9,52 @@

import QtQuick
import QtQuick.Controls
import "../../components" as MMComponents

TabBar {
MMComponents.MMListView {
id: root

property alias tabButtonsModel: tabBarRepeater.model
implicitHeight: __style.row45

implicitHeight: 56 * __dp

spacing: 20 * __dp

leftPadding: internal.tabBarPadding
rightPadding: internal.tabBarPadding
spacing: 0

clip: true
orientation: ListView.Horizontal

background: Rectangle {
color: __style.lightGreenColor
}

Repeater {
id: tabBarRepeater

TabButton {
id: tabDelegate

property bool isSelected: TabBar.index === root.currentIndex
interactive: contentWidth > width

height: 45 * __dp
width: contentItem.implicitWidth
header: MMComponents.MMListSpacer { width: __style.margin20 }
footer: MMComponents.MMListSpacer { width: __style.margin20 }

anchors.verticalCenter: parent.verticalCenter
delegate: Control {
id: tabDelegate

focusPolicy: Qt.NoFocus
property bool isSelected: ListView.isCurrentItem

contentItem: Text {
text: model.Name
height: __style.row45
width: contentItem.implicitWidth

leftPadding: __style.margin20
rightPadding: __style.margin20
focusPolicy: Qt.NoFocus

font: __style.t4
color: __style.forestColor
background: Rectangle {
visible: tabDelegate.isSelected
color: __style.grassColor
radius: __style.radius30
}

verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
contentItem: MMComponents.MMText {
text: model.Name

background: Rectangle {
radius: 30 * __dp
color: __style.grassColor
font: __style.t4

visible: tabDelegate.isSelected
}
leftPadding: __style.margin20
rightPadding: __style.margin20
}
}

QtObject {
id: internal

property real tabBarPadding: 20 * __dp
MouseArea {
anchors.fill: parent
onClicked: root.currentIndex = index
}
}
}

5 changes: 3 additions & 2 deletions gallery/qml/pages/FormPage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,10 @@ Page {
id: tabBar

Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.maximumWidth: Math.min(__style.maxPageWidth, root.width)

tabButtonsModel: ListModel {
model: ListModel {
id: tabModel

ListElement { Name: "Address of the object" }
Expand All @@ -73,7 +74,7 @@ Page {

clip: true

onCurrentIndexChanged: tabBar.setCurrentIndex(formSwipe.currentIndex)
onCurrentIndexChanged: tabBar.currentIndex = formSwipe.currentIndex

Repeater {
model: tabModel
Expand Down
Loading