Merge pull request #2952 from MerginMaps/onboarding_misc

Styled Progress bar for the Header item
MerginMaps · Dec 11, 2023 · 6e34962 · 6e34962 · inputapp-bot · Dec 11, 2023
2 parents 0515e52 + ae37aca
commit 6e34962
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 18 deletions.
diff --git a/app/qml/components/MMProgressBar.qml b/app/qml/components/MMProgressBar.qml
@@ -14,6 +14,7 @@ Rectangle {
   id: control
 
   required property real position // [0 - 1]
+  property color progressColor: __style.grassColor
 
   width: parent.width
   height: 12 * __dp
@@ -23,7 +24,7 @@ Rectangle {
   Rectangle {
     width: parent.width * control.position
     height: parent.height
-    color: __style.grassColor
+    color: control.progressColor
     radius: height / 2
   }
 }
diff --git a/gallery/qml/pages/MiscPage.qml b/gallery/qml/pages/MiscPage.qml
@@ -17,26 +17,63 @@ Column {
   padding: 20
   spacing: 5
 
-  GroupBox {
-    title: "MMProgressBar"
-    background: Rectangle {
-      color: "white"
-      border.color: "gray"
-    }
-    label: Label {
-      color: "black"
-      text: parent.title
-      padding: 5
+  Row {
+    spacing: 5
+    GroupBox {
+      title: "MMProgressBar"
+      background: Rectangle {
+        color: "white"
+        border.color: "gray"
+      }
+      label: Label {
+        color: "black"
+        text: parent.title
+        padding: 5
+      }
+
+      Column {
+        spacing: 20
+        anchors.fill: parent
+        MMProgressBar {
+          position: 0
+        }
+        MMProgressBar {
+          position: 0.6
+        }
+      }
     }
 
-    Column {
-      spacing: 20
-      anchors.fill: parent
-      MMProgressBar {
-        position: 0
+    GroupBox {
+      title: "MMProgressBar"
+      background: Rectangle {
+        color: "white"
+        border.color: "gray"
+      }
+      label: Label {
+        color: "black"
+        text: parent.title
+        padding: 5
       }
-      MMProgressBar {
-        position: 0.4
+
+      Column {
+        spacing: 20
+        anchors.fill: parent
+        MMProgressBar {
+          width: 60 * __dp
+          height: 4 * __dp
+
+          position: 0
+          color: __style.grassColor
+          progressColor: __style.forestColor
+        }
+        MMProgressBar {
+          width: 60 * __dp
+          height: 4 * __dp
+
+          position: 0.6
+          color: __style.grassColor
+          progressColor: __style.forestColor
+        }
       }
     }
   }