From 25f06ecc71b848b31562f5ae47e9feaf955715ab Mon Sep 17 00:00:00 2001 From: Tomas Mizera Date: Thu, 25 Jul 2024 16:53:09 +0200 Subject: [PATCH] Replace TabBar with ListView --- app/mmstyle.h | 1 + app/qml/form/MMFormPage.qml | 25 ++++----- app/qml/form/components/MMFormTabBar.qml | 71 ++++++++++-------------- gallery/qml/pages/FormPage.qml | 5 +- 4 files changed, 43 insertions(+), 59 deletions(-) diff --git a/app/mmstyle.h b/app/mmstyle.h index 9288cd98c..7d65b0e91 100644 --- a/app/mmstyle.h +++ b/app/mmstyle.h @@ -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 ) diff --git a/app/qml/form/MMFormPage.qml b/app/qml/form/MMFormPage.qml index 912661501..7715ebdd9 100644 --- a/app/qml/form/MMFormPage.qml +++ b/app/qml/form/MMFormPage.qml @@ -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 ) } @@ -128,7 +131,7 @@ Page { clip: true - onCurrentIndexChanged: tabBar.setCurrentIndex( formSwipe.currentIndex ) + onCurrentIndexChanged: tabBar.currentIndex = formSwipe.currentIndex Repeater { id: swipeViewRepeater @@ -161,7 +164,7 @@ Page { section { property: "Group" delegate: sectionDelegate - labelPositioning: ViewSection.CurrentLabelAtStart | ViewSection.InlineLabels + labelPositioning: ViewSection.InlineLabels } delegate: editorDelegate @@ -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 @@ -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 diff --git a/app/qml/form/components/MMFormTabBar.qml b/app/qml/form/components/MMFormTabBar.qml index 99377eb43..d7989e412 100644 --- a/app/qml/form/components/MMFormTabBar.qml +++ b/app/qml/form/components/MMFormTabBar.qml @@ -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 + } } } + diff --git a/gallery/qml/pages/FormPage.qml b/gallery/qml/pages/FormPage.qml index 615b33102..909dad2f5 100644 --- a/gallery/qml/pages/FormPage.qml +++ b/gallery/qml/pages/FormPage.qml @@ -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" } @@ -73,7 +74,7 @@ Page { clip: true - onCurrentIndexChanged: tabBar.setCurrentIndex(formSwipe.currentIndex) + onCurrentIndexChanged: tabBar.currentIndex = formSwipe.currentIndex Repeater { model: tabModel