Fix layout of dialog drawers

app/mmstyle.h

@@ -289,6 +289,7 @@ class MMStyle: public QObject
     Q_PROPERTY( double row114 READ number114 CONSTANT )
     Q_PROPERTY( double radius6 READ number6 CONSTANT )
     Q_PROPERTY( double radius12 READ number12 CONSTANT )
+    Q_PROPERTY( double radius16 READ number16 CONSTANT )
     Q_PROPERTY( double radius20 READ number20 CONSTANT )
     Q_PROPERTY( double radius30 READ number30 CONSTANT )
     Q_PROPERTY( double radius40 READ number40 CONSTANT )

app/qml/CMakeLists.txt

@@ -76,6 +76,7 @@ set(MM_QML
     dialogs/MMDiscardGeometryChangesDialog.qml
     dialogs/MMProjectLoadErrorDialog.qml
     dialogs/MMProviderRemoveReceiverDialog.qml
+    dialogs/components/MMDialogAdditionalText.qml
     form/MMFormPage.qml
     form/MMFormStackController.qml
     form/MMFormController.qml

app/qml/components/MMCodeScanner.qml

@@ -13,7 +13,7 @@ import QtMultimedia
 
 import mm 1.0 as MM
 
-Drawer {
+Drawer { // We can keep this one as Drawer - it could actually be Popup instead
   id: root
 
   signal scanFinished( var data )

app/qml/components/MMDrawerDialog.qml

@@ -8,171 +8,74 @@
  ***************************************************************************/
 
 import QtQuick
-import QtQuick.Controls
-import QtQuick.Controls.Basic
-
-Drawer {
-  id: control
-
-  property alias picture: picture.source
-  property alias title: title.text
-  property alias bigTitle: bigTitle.text
-  property alias description: description.text
-  property alias boundedDescription: boundedDescription.text
-  property alias primaryButtonComponent: primaryButton
-  property alias primaryButton: primaryButton.text
-  property alias secondaryButton: secondaryButton.text
-  property alias specialComponent: loader.sourceComponent
+
+MMDrawer {
+  id: root
+
+  property alias title: mmmessage.title
+  property alias description: mmmessage.description
+  property alias imageSource: mmmessage.image
+  property alias link: mmmessage.link
+  property alias linkText: mmmessage.linkText
+
+  property alias additionalContent: additionalContentGroup.children
+
+  property alias primaryButton: primaryBtn
+  property alias secondaryButton: secondaryBtn
+
+  property real spaceBeforeAdditionalContent: __style.margin20
 
   signal primaryButtonClicked
   signal secondaryButtonClicked
 
-  width: window.width // TODO maximum size
-  height: mainColumn.height
-  edge: Qt.BottomEdge
   dim: true
   interactive: false
-  dragMargin: 0
-  closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-
-  Rectangle {
-    color: roundedRect.color
-    anchors.top: parent.top
-    anchors.left: parent.left
-    anchors.right: parent.right
-    height: 2 * radius
-    anchors.topMargin: -radius
-    radius: 20 * __dp
-  }
-
-  Rectangle {
-    id: roundedRect
 
-    anchors.fill: parent
-    color: __style.polarColor
+  drawerContent: MMScrollView {
+    width: parent.width
+    height: root.maxHeightHit ? root.drawerContentAvailableHeight : contentHeight
 
     Column {
-      id: mainColumn
+      id: col
 
       width: parent.width
-      spacing: 20 * __dp
-      leftPadding: 20 * __dp
-      rightPadding: 20 * __dp
-      bottomPadding: 20 * __dp
 
-      // TODO replace with MMPageHeader?
-      Row {
-        width: parent.width
-        spacing: 10 * __dp
-
-        Item {
-          id: emptyItem
-
-          width: closeButton.width
-          height: 1
-        }
-
-        Text {
-          id: title
-
-          anchors.verticalCenter: parent.verticalCenter
-          width: parent.width - emptyItem.width - closeButton.width - mainColumn.leftPadding - mainColumn.rightPadding - 2 * parent.spacing
-          horizontalAlignment: Text.AlignHCenter
-          wrapMode: Text.WordWrap
-          font: __style.t2
-          color: __style.forestColor
-        }
-
-        MMRoundButton {
-          id: closeButton
-          bgndColor: __style.lightGreenColor
-          iconSource: __style.closeIcon
-          onClicked: control.close()
-        }
-      }
-
-      Image {
-        id: picture
+      spacing: 0
 
-        anchors.horizontalCenter: parent.horizontalCenter
-      }
-
-      Text {
-        id: bigTitle
+      MMMessage {
+        id: mmmessage
 
-        anchors.horizontalCenter: parent.horizontalCenter
-        font: __style.t1
-        width: parent.width - 2*20 * __dp
-        color: __style.forestColor
-        visible: text.length > 0
-        horizontalAlignment: Text.AlignHCenter
+        width: parent.width
       }
 
-      Text {
-        id: description
-
-        anchors.horizontalCenter: parent.horizontalCenter
-        font: __style.p5
-        width: parent.width - 2*20 * __dp
-        color: __style.nightColor
-        visible: text.length > 0
-        horizontalAlignment: Text.AlignHCenter
-        wrapMode: Text.WordWrap
-        lineHeight: 1.6
-        textFormat: Text.RichText
-        onLinkActivated: function( link ) {
-          Qt.openUrlExternally( link )
-        }
-      }
+      MMListSpacer { height: root.spaceBeforeAdditionalContent; visible: internal.hasAdditionalContent }
 
-      Rectangle {
-        anchors.horizontalCenter: parent.horizontalCenter
-        visible: boundedDescription.text.length > 0
-        width: parent.width - 2*20 * __dp
-        height: boundedDescription.height
-        radius: 16 * __dp
-        color: __style.lightGreenColor
-
-        Text {
-          id: boundedDescription
-
-          anchors.horizontalCenter: parent.horizontalCenter
-          font: __style.p6
-          width: parent.width
-          color: __style.nightColor
-          visible: text.length > 0
-          horizontalAlignment: Text.AlignLeft
-          wrapMode: Text.WordWrap
-          lineHeight: 1.6
-          padding: 20 * __dp
-          textFormat: Text.RichText
-          onLinkActivated: function( link ) {
-            Qt.openUrlExternally( link )
-          }
-        }
-      }
+      Item {
+        id: additionalContentGroup
 
-      Loader {
-        id: loader
+        width: parent.width
+        height: childrenRect.height
 
-        anchors.horizontalCenter: parent.horizontalCenter
+        visible: children.length > 0
       }
 
-      Item { width: 1; height: 1 }
+      MMListSpacer { height: __style.margin40; visible: primaryBtn.visible || secondaryBtn.visible }
 
       MMButton {
-        id: primaryButton
+        id: primaryBtn
 
-        width: parent.width - 2*20 * __dp
+        width: parent.width
         visible: text.length > 0
 
         onClicked: primaryButtonClicked()
       }
 
+      MMListSpacer { height: __style.margin20; visible: primaryBtn.visible && secondaryBtn.visible }
+
       MMButton {
-        id: secondaryButton
+        id: secondaryBtn
 
-        width: parent.width - 2*20 * __dp
+        width: parent.width
         visible: text.length > 0
 
         type: MMButton.Types.Tertiary
@@ -183,4 +86,10 @@ Drawer {
       }
     }
   }
+
+  QtObject {
+    id: internal
+
+    property bool hasAdditionalContent: additionalContentGroup.children.length > 0
+  }
 }

app/qml/dialogs/MMDiscardGeometryChangesDialog.qml

@@ -19,8 +19,8 @@ MMDrawerDialog {
 
   signal discardChanges()
 
-  picture: __style.positiveMMSymbolImage
-  bigTitle: qsTr( "Discard the changes?" )
+  imageSource: __style.positiveMMSymbolImage
+  title: qsTr( "Discard the changes?" )
   description: {
     if ( root.state === "edit" ) {
       return qsTr( "Clicking ‘Yes’ discards your changes to the geometry. If you would like " +
@@ -34,8 +34,8 @@ MMDrawerDialog {
     return ""
   }
 
-  primaryButton: qsTr ( "Yes, I want to discard" )
-  secondaryButton: qsTr ( "No, thanks" )
+  primaryButton.text: qsTr ( "Yes, I want to discard" )
+  secondaryButton.text: qsTr ( "No, thanks" )
 
   onPrimaryButtonClicked: {
     root.discardChanges()

app/qml/dialogs/MMDownloadProjectDialog.qml

@@ -20,11 +20,11 @@ MMDrawerDialog {
 
   signal downloadClicked()
 
-  picture: __style.positiveMMSymbolImage
-  bigTitle: qsTr( "Download project" )
-  description: qsTr( "Would you like to download the project\n %1 ?" ).arg( relatedProjectId )
-  primaryButton: qsTr("Download")
-  secondaryButton: qsTr("Cancel")
+  imageSource: __style.positiveMMSymbolImage
+  title: qsTr( "Download project" )
+  description: qsTr( "Would you like to download project\n %1 ?" ).arg( relatedProjectId )
+  primaryButton.text: qsTr("Download")
+  secondaryButton.text: qsTr("Cancel")
 
   onPrimaryButtonClicked: {
     downloadClicked()

app/qml/dialogs/MMFormDeleteFeatureDialog.qml

@@ -16,11 +16,11 @@ MMDrawerDialog {
 
   signal deleteFeature()
 
-  picture: __style.negativeMMSymbolImage
-  bigTitle: qsTr( "Delete feature" )
+  imageSource: __style.negativeMMSymbolImage
+  title: qsTr( "Delete feature" )
   description: qsTr( "Are you sure you want to delete this feature?" )
-  primaryButton: qsTr( "Yes, I want to delete" )
-  secondaryButton: qsTr( "No, thanks" )
+  primaryButton.text: qsTr( "Yes, I want to delete" )
+  secondaryButton.text: qsTr( "No, thanks" )
 
   onPrimaryButtonClicked: {
     root.deleteFeature()

app/qml/dialogs/MMFormEditFailedDialog.qml

@@ -14,10 +14,10 @@ import "../components"
 MMDrawerDialog {
   id: root
 
-  picture: __style.negativeMMSymbolImage
-  bigTitle: qsTr( "Saving failed" )
+  imageSource: __style.negativeMMSymbolImage
+  title: qsTr( "Saving failed" )
   description: qsTr( "Failed to save changes. This should not happen normally. Please restart the app and try again — if that does not help, please contact support." )
-  primaryButton: qsTr( "Ok, I understand" )
+  primaryButton.text: qsTr( "Ok, I understand" )
 
   onPrimaryButtonClicked: {
     close()

app/qml/dialogs/MMFormSaveChangesDialog.qml

@@ -17,11 +17,11 @@ MMDrawerDialog {
   signal saveChanges()
   signal discardChanges()
 
-  picture: __style.positiveMMSymbolImage
-  bigTitle: qsTr( "Unsaved changes" )
+  imageSource: __style.positiveMMSymbolImage
+  title: qsTr( "Unsaved changes" )
   description: qsTr( "Do you want to save the changes?" )
-  primaryButton: qsTr( "Yes, I want to save" )
-  secondaryButton: qsTr( "No, thanks" )
+  primaryButton.text: qsTr( "Yes, I want to save" )
+  secondaryButton.text: qsTr( "No, thanks" )
 
   onPrimaryButtonClicked: {
     root.saveChanges()

app/qml/dialogs/MMMigrateToMerginDialog.qml

@@ -16,11 +16,11 @@ MMDrawerDialog {
 
   signal migrationRequested()
 
-  picture: __style.positiveMMSymbolImage
-  bigTitle: qsTr( "Upload project?" )
+  imageSource: __style.positiveMMSymbolImage
+  title: qsTr( "Upload project?" )
   description: qsTr( "This project is currently not uploaded on cloud. Upload it in order to activate synchronization and collaboration." )
-  primaryButton: qsTr( "Yes, I want to upload it" )
-  secondaryButton: qsTr( "No, thanks" )
+  primaryButton.text: qsTr( "Yes, I want to upload it" )
+  secondaryButton.text: qsTr( "No, thanks" )
 
   onPrimaryButtonClicked: {
     root.migrationRequested()

app/qml/dialogs/MMMissingAuthDialog.qml

@@ -16,11 +16,11 @@ MMDrawerDialog {
 
   signal singInRequested()
 
-  picture: __style.signInImage
-  bigTitle: qsTr( "Sign in to your account" )
+  imageSource: __style.signInImage
+  title: qsTr( "Sign in to your account" )
   description: qsTr( "You need to be signed in to your Mergin Maps account in order to synchronize the project." )
-  primaryButton: qsTr( "Yes, I want to sign in" )
-  secondaryButton: qsTr( "No, thanks" )
+  primaryButton.text: qsTr( "Yes, I want to sign in" )
+  secondaryButton.text: qsTr( "No, thanks" )
 
   onPrimaryButtonClicked: {
     root.singInRequested()

app/qml/dialogs/MMNoPermissionsDialog.qml

@@ -14,10 +14,10 @@ import "../components"
 MMDrawerDialog {
   id: root
 
-  picture: __style.noPermissionsImage
-  bigTitle: qsTr( "No rights to access the project" )
+  imageSource: __style.noPermissionsImage
+  title: qsTr( "No rights to access the project" )
   description: qsTr( "You are not allowed to synchronize your changes in this project. Contact the project owner to assign you the correct permission. If you are the project owner, log in to the dashboard." )
-  primaryButton: qsTr( "Ok, I understand" )
+  primaryButton.text: qsTr( "Ok, I understand" )
 
   onPrimaryButtonClicked: {
     close()