Merge pull request #2961 from MerginMaps/onboarding_visual

Onboarding adjusted for tablets
MerginMaps · Dec 15, 2023 · c545232 · c545232
2 parents 86b8fe2 + 44fc466
commit c545232
Show file tree

Hide file tree

Showing 10 changed files with 307 additions and 331 deletions.
diff --git a/app/mmstyle.h b/app/mmstyle.h
@@ -148,6 +148,7 @@ class MMStyle: public QObject
 
     // Other
     Q_PROPERTY( double inputRadius READ inputRadius CONSTANT )
+    Q_PROPERTY( double maxPageWidth READ maxPageWidth CONSTANT )
 
   public:
     explicit MMStyle( qreal dp )
@@ -267,6 +268,7 @@ class MMStyle: public QObject
     double menuDrawerHeight() {return 67 * mDp;}
 
     double inputRadius() {return 12 * mDp;}
+    double maxPageWidth() {return 500 * mDp;}
 
   signals:
     void styleChanged();

diff --git a/app/qml/components/MMIconCheckBoxHorizontal.qml b/app/qml/components/MMIconCheckBoxHorizontal.qml
@@ -15,7 +15,7 @@ import "."
 CheckBox {
   id: control
 
-  required property var sourceIcon
+  property string sourceIcon: ""
   property bool small: false
 
   height: (control.small ? 50 : 80) * __dp

diff --git a/app/qml/components/MMIconCheckBoxVertical.qml b/app/qml/components/MMIconCheckBoxVertical.qml
@@ -15,8 +15,8 @@ import "."
 CheckBox {
   id: control
 
-  required property var sourceIcon
-  required property var bgColorIcon
+  property string sourceIcon: ""
+  property color bgColorIcon: __style.forestColor
 
   width: 170 * __dp
   height: 158 * __dp

diff --git a/app/qml/onboarding/MMAcceptInvitation.qml b/app/qml/onboarding/MMAcceptInvitation.qml
@@ -23,6 +23,9 @@ Page {
   signal continueClicked
   signal createWorkspaceClicked
 
+  readonly property real hPadding: width < __style.maxPageWidth
+                                   ? 20 * __dp
+                                   : (20 + (width - __style.maxPageWidth) / 2) * __dp
   Rectangle {
     anchors.fill: parent
     color: __style.lightGreenColor
@@ -40,13 +43,13 @@ Page {
 
       width: root.width
       spacing: 20 * __dp
-      leftPadding: 20 * __dp
-      rightPadding: 20 * __dp
+      leftPadding: root.hPadding
+      rightPadding: root.hPadding
       topPadding: 100 * __dp
       bottomPadding: 20 * __dp
 
       Item {
-        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        width: parent.width - 2 * root.hPadding
         height: bg.height
 
         Image {
@@ -65,7 +68,7 @@ Page {
       }
 
       Text {
-        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        width: parent.width - 2 * root.hPadding
         text: qsTr("You have been invited to workspace")
         font: __style.h3
         color: __style.forestColor
@@ -75,7 +78,7 @@ Page {
       }
 
       Text {
-        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        width: parent.width - 2 * root.hPadding
         text: qsTr("User %1 has invited you to join his workspace").arg(root.user)
         font: __style.p5
         color: __style.nightColor
@@ -87,7 +90,7 @@ Page {
       Item { width: 1; height: 1 }
 
       Text {
-        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        width: parent.width - 2 * root.hPadding
         text: root.workspace
         font: __style.t1
         color: __style.nightColor
@@ -99,19 +102,19 @@ Page {
       Item { width: 1; height: 50 }
 
       MMButton {
-        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        width: parent.width - 2 * root.hPadding
         text: qsTr("Join workspace")
 
         onClicked: root.continueClicked()
       }
 
       MMHlineText {
-        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        width: parent.width - 2 * root.hPadding
         title: qsTr("or")
       }
 
       MMLinkButton {
-        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        width: parent.width - 2 * root.hPadding
         text: qsTr("Create new workspace")
 
         onClicked: root.createWorkspaceClicked()

diff --git a/app/qml/onboarding/MMCreateWorkspace.qml b/app/qml/onboarding/MMCreateWorkspace.qml
@@ -18,6 +18,10 @@ Page {
 
   signal continueClicked
 
+  readonly property real hPadding: width < __style.maxPageWidth
+                                   ? 20 * __dp
+                                   : (20 + (width - __style.maxPageWidth) / 2) * __dp
+
   Rectangle {
     anchors.fill: parent
     color: __style.lightGreenColor
@@ -26,9 +30,9 @@ Page {
   MMHeader {
     id: header
 
-    x: mainColumn.padding
-    y: mainColumn.padding
-    width: parent.width - 2 * mainColumn.padding
+    x: mainColumn.leftPadding
+    y: mainColumn.topPadding
+    width: parent.width - 2 * root.hPadding
     backVisible: false
     step: 1
 
@@ -49,10 +53,13 @@ Page {
 
       width: root.width
       spacing: 20 * __dp
-      padding: 20 * __dp
+      leftPadding: root.hPadding
+      rightPadding: root.hPadding
+      topPadding: 20 * __dp
+      bottomPadding: 20 * __dp
 
       Text {
-        width: parent.width - 2 * mainColumn.padding
+        width: parent.width - 2 * root.hPadding
         text: qsTr("Create a workspace")
         font: __style.h3
         color: __style.forestColor
@@ -62,7 +69,7 @@ Page {
       }
 
       Text {
-        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        width: parent.width - 2 * root.hPadding
         text: qsTr("Workspace is a place to store your projects. Colleagues can be invited to your workspace to collaborate on projects.")
         font: __style.p5
         color: __style.nightColor
@@ -74,7 +81,7 @@ Page {
       Item { width: 1; height: 1 }
 
       MMInputEditor {
-        width: parent.width - 2 * mainColumn.padding
+        width: parent.width - 2 * root.hPadding
         title: qsTr("Workspace name")
         placeholderText: qsTr("Your Workspace")
       }
@@ -86,17 +93,20 @@ Page {
 
     width: root.width
     spacing: 20 * __dp
-    padding: 20 * __dp
+    leftPadding: root.hPadding
+    rightPadding: root.hPadding
+    topPadding: 20 * __dp
+    bottomPadding: 20 * __dp
     anchors.bottom: parent.bottom
 
     MMTextBubble {
-      width: root.width - 2 * mainColumn.padding
+      width: root.width - 2 * root.hPadding
       title: "Tip from Mergin Maps"
       description: "A good candidate for a workspace name is the name of your team or organisation"
     }
 
     MMButton {
-      width: parent.width - 2 * mainColumn.padding
+      width: parent.width - 2 * root.hPadding
       text: qsTr("Create workspace")
 
       onClicked: root.continueClicked()