Added new Style for ProgressBar and ReachedDataLimit part

app/qmlV2/component/MMComponent_reachedDataLimit.qml

@@ -0,0 +1,116 @@
+/***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU General Public License as published by  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import "../Style.js" as Style
+import "."
+
+Item {
+  id: control
+
+  property Component comp: component
+  required property string dataToSync
+  required property string dataUsing
+  required property string plan
+  required property real usedData // [0 = 1]
+
+  width: parent.width
+
+  Component {
+    id: component
+
+    Column {
+      width: control.width - 2 * Style.commonSpacing
+      spacing: Style.commonSpacing / 2
+      topPadding: Style.commonSpacing
+
+      Item {
+        width: parent.width
+        height: dataToSyncText.height
+
+        Text {
+          width: parent.width
+          text: qsTr("Data to sync")
+          font: Qt.font(Style.p5)
+          color: Style.night
+          horizontalAlignment: Text.AlignLeft
+          verticalAlignment: Text.AlignVCenter
+        }
+        Text {
+          id: dataToSyncText
+
+          width: parent.width
+          text: control.dataToSync
+          font: Qt.font(Style.t3)
+          color: Style.night
+          horizontalAlignment: Text.AlignRight
+          verticalAlignment: Text.AlignVCenter
+        }
+      }
+
+      Rectangle { width: parent.width; height: 1; color: Style.gray }
+
+      Item {
+        width: parent.width
+        height: dataUsingText.height
+
+        Text {
+          width: parent.width
+          text: qsTr("Using")
+          font: Qt.font(Style.p5)
+          color: Style.night
+          horizontalAlignment: Text.AlignLeft
+          verticalAlignment: Text.AlignVCenter
+        }
+        Text {
+          id: dataUsingText
+
+          width: parent.width
+          text: control.dataUsing
+          font: Qt.font(Style.t3)
+          color: Style.night
+          horizontalAlignment: Text.AlignRight
+          verticalAlignment: Text.AlignVCenter
+        }
+      }
+
+      MMProgressBar {
+        position: control.usedData
+      }
+
+      Rectangle { width: parent.width; height: 1; color: Style.gray }
+
+      Item {
+        width: parent.width
+        height: planText.height
+
+        Text {
+          width: parent.width
+          text: qsTr("Plan")
+          font: Qt.font(Style.p5)
+          color: Style.night
+          horizontalAlignment: Text.AlignLeft
+          verticalAlignment: Text.AlignVCenter
+        }
+        Text {
+          id: planText
+
+          width: parent.width
+          text: control.plan
+          font: Qt.font(Style.t3)
+          color: Style.night
+          horizontalAlignment: Text.AlignRight
+          verticalAlignment: Text.AlignVCenter
+        }
+      }
+    }
+  }
+}

app/qmlV2/component/MMDrawer.qml

@@ -24,32 +24,37 @@ Drawer {
   property alias secondaryButton: secondaryButton.text
   property alias specialComponent: loader.sourceComponent
 
+  signal primaryButtonClicked
+  signal secondaryButtonClicked
+
   width: window.width
   height: mainColumn.height
   edge: Qt.BottomEdge
 
+  Rectangle {
+    color: roundedRect.color
+    anchors.top: parent.top
+    anchors.left: parent.left
+    anchors.right: parent.right
+    height: 2 * radius
+    anchors.topMargin: -radius
+    radius: Style.commonSpacing
+  }
+
   Rectangle {
     id: roundedRect
 
     anchors.fill: parent
     color: Style.white
-    radius: Style.commonSpacing
-
-    // Make the bottom corners more rounded by masking them
-    Rectangle {
-      anchors.bottom: parent.bottom
-      anchors.left: parent.left
-      anchors.right: parent.right
-      height: roundedRect.radius
-      color: Style.white
-    }
 
     Column {
       id: mainColumn
 
       width: parent.width
       spacing: Style.commonSpacing
-      padding: Style.commonSpacing
+      leftPadding: Style.commonSpacing
+      rightPadding: Style.commonSpacing
+      bottomPadding: Style.commonSpacing
 
       Image {
         id: closeButton
@@ -132,7 +137,7 @@ Drawer {
         width: parent.width - 2*Style.commonSpacing
         visible: text.length > 0
 
-        onClicked: control.visible = false
+        onClicked: primaryButtonClicked()
       }
 
       MMButton {
@@ -143,7 +148,7 @@ Drawer {
         transparent: true
         topPadding: 0
 
-        onClicked: control.visible = false
+        onClicked: secondaryButtonClicked()
       }
     }
   }

app/qmlV2/component/MMProgressBar.qml

@@ -0,0 +1,30 @@
+/***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU General Public License as published by  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+import QtQuick
+import "../Style.js" as Style
+import "."
+
+Rectangle {
+  id: control
+
+  required property real position // [0 - 1]
+
+  width: parent.width
+  height: 12 * __dp
+  color: Style.lightGreen
+  radius: height / 2
+
+  Rectangle {
+    width: parent.width * control.position
+    height: parent.height
+    color: Style.grass
+    radius: height / 2
+  }
+}

gallery/qml.qrc

@@ -22,5 +22,7 @@
         <file>../app/qmlV2/component/MMDrawer.qml</file>
         <file>qml/pages/DrawerPage.qml</file>
         <file>qml/pages/ChecksPage.qml</file>
+        <file>../app/qmlV2/component/MMComponent_reachedDataLimit.qml</file>
+        <file>../app/qmlV2/component/MMProgressBar.qml</file>
     </qresource>
 </RCC>

gallery/qml/pages/DrawerPage.qml

@@ -43,6 +43,9 @@ Page {
     description: "This project is currently not uploaded on Mergin. Upload it to Mergin in order to activate synchronization and collaboration."
     primaryButton: "Yes, Upload Project"
     secondaryButton: "No Cancel"
+
+    onPrimaryButtonClicked: visible = false
+    onSecondaryButtonClicked: visible = false
   }
 
   MMDrawer {
@@ -51,7 +54,19 @@ Page {
     picture: Style.ReachedDataLimitImage
     title: "You have reached a data limit"
     primaryButton: "Manage Subscription"
-    specialComponent: MMButton { text: "Special Component"; padding: 20 }
+    specialComponent: component.comp
+    visible: true
+
+    MMComponent_reachedDataLimit {
+      id: component
+      dataToSync: "643.8 MB"
+      dataUsing: "9.23 MB / 10.0 MB"
+      plan: "Individual"
+      usedData: 0.923
+    }
+
+    onPrimaryButtonClicked: visible = false
+    onSecondaryButtonClicked: visible = false
   }
 
   MMDrawer {
@@ -62,6 +77,8 @@ Page {
     description: "Your changes could not be sent to server, make sure you are connected to internet and have write access to this project."
     primaryButton: "Ok, I understand"
     boundedDescription: "Failed to push changes. Ask the project workspace owner to log in to their Mergin Maps dashboard for more information."
-    visible: true
+
+    onPrimaryButtonClicked: visible = false
+    onSecondaryButtonClicked: visible = false
   }
 }