Updated Header item for Drawers. Added heading fonts

MerginMaps · Dec 11, 2023 · d1a453b · d1a453b · inputapp-bot · Dec 11, 2023
1 parent 969b0a4
commit d1a453b
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/app/mmstyle.h b/app/mmstyle.h
@@ -23,6 +23,11 @@ class MMStyle: public QObject
     // standard - font: __style.p5
     // extended - font.pixelSize: __style.p5.pixelSize; font.italic: true
 
+    // Fonts - Heading
+    Q_PROPERTY( QFont h1 READ h1 CONSTANT )
+    Q_PROPERTY( QFont h2 READ h2 CONSTANT )
+    Q_PROPERTY( QFont h3 READ h3 CONSTANT )
+
     // Fonts - Title
     Q_PROPERTY( QFont t1 READ t1 CONSTANT )
     Q_PROPERTY( QFont t2 READ t2 CONSTANT )
@@ -124,6 +129,10 @@ class MMStyle: public QObject
     {}
     ~MMStyle() = default;
 
+    QFont h1() {return fontFactory( 48, true );}
+    QFont h2() {return fontFactory( 36, true );}
+    QFont h3() {return fontFactory( 24, true );}
+
     QFont t1() {return fontFactory( 18, true );}
     QFont t2() {return fontFactory( 16, true );}
     QFont t3() {return fontFactory( 14, true );}

diff --git a/app/qml/components/MMHeader.qml b/app/qml/components/MMHeader.qml
@@ -14,10 +14,12 @@ Row {
   id: root
 
   /* translate in parent! */
-  required property var headerTitle
+  required property string headerTitle
   /* -1 no step bar shown; 1, 2, 3 */
   property int step: -1
   property bool backVisible: true
+  property color backColor: __style.whiteColor
+  property font titleFont: __style.t4
 
   signal backClicked
 
@@ -30,7 +32,8 @@ Row {
     width: 60 * __dp
 
     MMBackButton {
-      visible: backVisible
+      visible: root.backVisible
+      color: root.backColor
 
       onClicked: root.backClicked()
     }
@@ -53,7 +56,7 @@ Row {
       return root.width
     }
     text: root.headerTitle
-    font: __style.t4
+    font: root.titleFont
     color: __style.forestColor
     wrapMode: Text.WordWrap
     horizontalAlignment: Text.AlignHCenter

diff --git a/gallery/qml/pages/MiscPage.qml b/gallery/qml/pages/MiscPage.qml
@@ -123,6 +123,32 @@ Column {
     }
   }
 
+  GroupBox {
+    title: "MMHeader (for Drawer)"
+    width: page.width - 2 * page.padding
+
+    background: Rectangle {
+      color: "white"
+      border.color: "gray"
+    }
+    label: Label {
+      color: "black"
+      text: parent.title
+      padding: 5
+    }
+
+    Column {
+      spacing: 20
+      anchors.fill: parent
+
+      MMHeader {
+        headerTitle: "Drawer title"
+        titleFont: __style.h3
+        backColor: __style.lightGreenColor
+      }
+    }
+  }
+
   GroupBox {
     title: "MMHlineText"
     background: Rectangle {