Added new design for animated dialogs (Drawers) and Check items

MerginMaps · Oct 6, 2023 · 2aab9b3 · 2aab9b3
1 parent 24ccf02
commit 2aab9b3
Show file tree

Hide file tree

Showing 10 changed files with 282 additions and 2 deletions.
diff --git a/app/icons/CloseButton.svg b/app/icons/CloseButton.svg
diff --git a/app/icons/ReachedDataLimitImage.svg b/app/icons/ReachedDataLimitImage.svg
diff --git a/app/icons/UploadImage.svg b/app/icons/UploadImage.svg
diff --git a/app/icons/icons.qrc b/app/icons/icons.qrc
@@ -11,5 +11,8 @@
         <file>Arrow Up.svg</file>
         <file>QR Code.svg</file>
         <file>Checkmark.svg</file>
+        <file>CloseButton.svg</file>
+        <file>UploadImage.svg</file>
+        <file>ReachedDataLimitImage.svg</file>
     </qresource>
 </RCC>
diff --git a/app/qmlV2/Style.js b/app/qmlV2/Style.js
@@ -69,8 +69,14 @@ const arrowUpIcon = "qrc:/Arrow Up.svg"
 const arrowDownIcon = "qrc:/Arrow Down.svg"
 const qrCodeIcon = "qrc:/QR Code.svg"
 const checkmarkIcon = "qrc:/Checkmark.svg"
+const closeButtonIcon = "qrc:/CloseButton.svg"
 
-const textColor = "black"
+// Images
+const uploadImage = "qrc:/UploadImage.svg"
+const ReachedDataLimitImage = "qrc:/ReachedDataLimitImage.svg"
+
+// Spacing
+const commonSpacing = 20 * __dp
 
 function dynamicText() {
   return "Dynamic text"

diff --git a/app/qmlV2/component/MMButton.qml b/app/qmlV2/component/MMButton.qml
@@ -16,6 +16,8 @@ import "."
 Button {
   id: control
 
+  property bool transparent: false
+
   contentItem: Text {
     anchors.centerIn: control
     font: Qt.font(Style.t3)
@@ -31,7 +33,7 @@ Button {
   }
 
   background: Rectangle {
-    color: control.enabled ? control.down || control.hovered ? Style.forest : Style.grass : Style.mediumGreen
+    color: transparent ? "transparent" : control.enabled ? control.down || control.hovered ? Style.forest : Style.grass : Style.mediumGreen
     radius: height / 2
   }
 

diff --git a/gallery/qml.qrc b/gallery/qml.qrc
@@ -19,5 +19,7 @@
         <file>../app/qmlV2/component/MMCheckBox.qml</file>
         <file>../app/qmlV2/component/MMRadioButton.qml</file>
         <file>../app/qmlV2/component/MMSwitch.qml</file>
+        <file>../app/qmlV2/component/MMDrawer.qml</file>
+        <file>qml/pages/DrawerPage.qml</file>
     </qresource>
 </RCC>
diff --git a/gallery/qml/Main.qml b/gallery/qml/Main.qml
@@ -100,6 +100,10 @@ ApplicationWindow {
       }
 
       model: ListModel {
+        ListElement {
+          title: "Initial"
+          source: "InitialGalleryPage.qml"
+        }
         ListElement {
           title: "Buttons"
           source: "ButtonsPage.qml"
@@ -120,6 +124,10 @@ ApplicationWindow {
           title: "Checks"
           source: "ChecksPage.qml"
         }
+        ListElement {
+          title: "Drawers"
+          source: "DrawerPage.qml"
+        }
       }
 
       ScrollIndicator.vertical: ScrollIndicator {}

diff --git a/gallery/qml/pages/ChecksPage.qml b/gallery/qml/pages/ChecksPage.qml
@@ -0,0 +1,115 @@
+/***************************************************************************
+ *                                                                         *
+ *   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 "../../app/qmlV2/component"
+
+Column {
+  padding: 20
+  spacing: 20
+
+  GroupBox {
+    title: "MMCheckBox"
+    background: Rectangle {
+      color: "lightGray"
+      border.color: "gray"
+    }
+    label: Label {
+      color: "black"
+      text: parent.title
+      padding: 5
+    }
+
+    Row {
+      spacing: 20
+      anchors.fill: parent
+      MMCheckBox {
+        checked: false
+        text: checked ? "checked" : "unchecked"
+      }
+      MMCheckBox {
+        checked: true
+      }
+      MMCheckBox {
+        checked: false
+        enabled: false
+      }
+      MMCheckBox {
+        checked: true
+        enabled: false
+      }
+    }
+  }
+
+  GroupBox {
+    title: "MMRadioButton"
+    background: Rectangle {
+      color: "lightGray"
+      border.color: "gray"
+    }
+    label: Label {
+      color: "black"
+      text: parent.title
+      padding: 5
+    }
+
+    Row {
+      spacing: 20
+      anchors.fill: parent
+      MMRadioButton {
+        text: "one"
+        checked: false
+      }
+      MMRadioButton {
+        text: "two"
+        checked: true
+      }
+      MMRadioButton {
+        text: "three"
+        enabled: false
+        checked: false
+      }
+    }
+  }
+
+  GroupBox {
+    title: "MMSwitch"
+    background: Rectangle {
+      color: "lightGray"
+      border.color: "gray"
+    }
+    label: Label {
+      color: "black"
+      text: parent.title
+      padding: 5
+    }
+
+    Row {
+      spacing: 20
+      anchors.fill: parent
+      MMSwitch {
+        textOn: "ON"
+        textOff: "OFF"
+        checked: false
+      }
+      MMSwitch {
+        text: "static"
+        checked: true
+      }
+      MMSwitch {
+        text: "disabled"
+        enabled: false
+        checked: false
+      }
+    }
+  }
+}
diff --git a/gallery/qml/pages/DrawerPage.qml b/gallery/qml/pages/DrawerPage.qml
@@ -0,0 +1,67 @@
+/***************************************************************************
+ *                                                                         *
+ *   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 "../../app/qmlV2/component"
+import "../../app/qmlV2/Style.js" as Style
+
+Page {
+  id: pane
+
+  Column {
+    width: parent.width
+    spacing: 10
+
+    MMButton {
+      text: "Upload"
+      onClicked: drawer1.visible = true
+    }
+    MMButton {
+      text: "Reached Data Limit"
+      onClicked: drawer2.visible = true
+    }
+    MMButton {
+      text: "Synchronization Failed"
+      onClicked: drawer3.visible = true
+    }
+  }
+
+  MMDrawer {
+    id: drawer1
+
+    picture: Style.uploadImage
+    title: "Upload project to Margin?"
+    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"
+  }
+
+  MMDrawer {
+    id: drawer2
+
+    picture: Style.ReachedDataLimitImage
+    title: "You have reached a data limit"
+    primaryButton: "Manage Subscription"
+    specialComponent: MMButton { text: "Special Component"; padding: 20 }
+  }
+
+  MMDrawer {
+    id: drawer3
+
+    picture: Style.uploadImage
+    title: "Failed to synchronize your changes"
+    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
+  }
+}