Replace TabBar with ListView

MerginMaps · Jul 25, 2024 · 25f06ec · 25f06ec · inputapp-bot · Jul 25, 2024
1 parent 0f8a801
commit 25f06ec
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 59 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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