Merge pull request #2960 from MerginMaps/onboarding_visual

Onboarding visual
MerginMaps · Dec 13, 2023 · af0dd94 · af0dd94
2 parents fbf477e + d943db4
commit af0dd94
Show file tree

Hide file tree

Showing 19 changed files with 546 additions and 253 deletions.
diff --git a/app/icons/Globe.svg b/app/icons/Globe.svg
diff --git a/app/icons/icons.qrc b/app/icons/icons.qrc
@@ -55,5 +55,6 @@
         <file>X Mark.svg</file>
         <file>X Twitter.svg</file>
         <file>Youtube.svg</file>
+        <file>Globe.svg</file>
     </qresource>
 </RCC>
diff --git a/app/mmstyle.h b/app/mmstyle.h
@@ -131,6 +131,7 @@ class MMStyle: public QObject
     Q_PROPERTY( QUrl xMarkIcon READ xMarkIcon CONSTANT )
     Q_PROPERTY( QUrl xTwitterIcon READ xTwitterIcon CONSTANT )
     Q_PROPERTY( QUrl youtubeIcon READ youtubeIcon CONSTANT )
+    Q_PROPERTY( QUrl globeIcon READ globeIcon CONSTANT )
 
     // Images
     Q_PROPERTY( QUrl acceptInvitationImage READ acceptInvitationImage CONSTANT )
@@ -253,6 +254,7 @@ class MMStyle: public QObject
     QUrl waterResourcesIcon() {return QUrl( "qrc:/Water resources.svg" );}
     QUrl xTwitterIcon() {return QUrl( "qrc:/X Twitter.svg" );}
     QUrl youtubeIcon() {return QUrl( "qrc:/Youtube.svg" );}
+    QUrl globeIcon() {return QUrl( "qrc:/Globe.svg" );}
 
     QUrl acceptInvitationLogoImage() {return QUrl( "qrc:/AcceptInvitationLogoImage.svg" ); }
     QUrl acceptInvitationImage() {return QUrl( "qrc:/AcceptInvitationImage.svg" ); }

diff --git a/app/qml/components/MMDrawer.qml b/app/qml/components/MMDrawer.qml
@@ -17,6 +17,7 @@ Drawer {
 
   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 primaryButton: primaryButton.text
@@ -55,16 +56,37 @@ Drawer {
       rightPadding: 20 * __dp
       bottomPadding: 20 * __dp
 
-      Image {
-        id: closeButton
+      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
+        }
+
+        Image {
+          id: closeButton
 
-        source: __style.closeButtonIcon
-        anchors.right: parent.right
-        anchors.rightMargin: 20 * __dp
+          source: __style.closeButtonIcon
 
-        MouseArea {
-          anchors.fill: parent
-          onClicked: control.visible = false
+          MouseArea {
+            anchors.fill: parent
+            onClicked: control.visible = false
+          }
         }
       }
 
@@ -75,7 +97,7 @@ Drawer {
       }
 
       Text {
-        id: title
+        id: bigTitle
 
         anchors.horizontalCenter: parent.horizontalCenter
         font: __style.t1

diff --git a/app/qml/components/MMHeader.qml b/app/qml/components/MMHeader.qml
@@ -13,10 +13,8 @@ import QtQuick.Controls
 Row {
   id: root
 
-  /* translate in parent! */
-  required property string headerTitle
-  /* -1 no step bar shown; 1, 2, 3 */
-  property int step: -1
+  property string headerTitle
+  property int step: -1 // -1 no step bar shown; 1, 2, 3
   property bool backVisible: true
   property color backColor: __style.whiteColor
   property font titleFont: __style.t4

diff --git a/app/qml/components/MMLink.qml b/app/qml/components/MMLink.qml
@@ -15,29 +15,43 @@ import "."
 Button {
   id: control
 
-  contentItem: Row {
-    anchors.centerIn: control
-    spacing: 10 * __dp
-
-    Text {
-      id: text
-
-      font: __style.t3
-      text: control.text
-      color: control.enabled ? control.down || control.hovered ? __style.nightColor : __style.forestColor : __style.mediumGreenColor
-      horizontalAlignment: Text.AlignHCenter
-      verticalAlignment: Text.AlignVCenter
-      elide: Text.ElideRight
-      anchors.verticalCenter: parent.verticalCenter
-    }
+  property url leftIcon: ""
+  property url rightIcon: ""
+
+  height: 50 * __dp
+
+  contentItem: Item {
+    Row {
+      anchors.centerIn: parent
+      spacing: 5 * __dp
+
+      MMIcon {
+        source: control.leftIcon
+        color: text.color
+      }
+
+      Text {
+        id: text
+
+        font: __style.t3
+        text: control.text
+        color: control.enabled ? control.down || control.hovered ? __style.nightColor : __style.forestColor : __style.mediumGreenColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+        anchors.verticalCenter: parent.verticalCenter
+      }
 
-    MMIcon {
-      source: __style.arrowLinkRightIcon
-      color: text.color
+      MMIcon {
+        source: control.rightIcon
+        color: text.color
+      }
     }
   }
 
   background: Rectangle {
+    width: control.width
+    height: control.height
     color: __style.transparentColor
   }
 }
diff --git a/app/qml/inputs/MMInputEditor.qml b/app/qml/inputs/MMInputEditor.qml
@@ -22,7 +22,7 @@ MMAbstractEditor {
   property bool isReadOnly: parent.readOnly ?? false
 
   property alias placeholderText: textField.placeholderText
-  readonly property alias text: textField.text
+  property alias text: textField.text
 
   signal editorValueChanged( var newValue, var isNull )
 

diff --git a/app/qml/inputs/MMPasswordEditor.qml b/app/qml/inputs/MMPasswordEditor.qml
@@ -17,15 +17,9 @@ import "../components"
 MMAbstractEditor {
   id: root
 
-  property var parentValue: parent.value
-  property bool parentValueIsNull: parent.valueIsNull ?? false
-  property bool isReadOnly: parent.readOnly ?? false
-
   property alias placeholderText: textField.placeholderText
   readonly property alias text: textField.text
 
-  signal editorValueChanged( var newValue, var isNull )
-
   hasFocus: textField.activeFocus
 
   content: TextField {
@@ -34,7 +28,6 @@ MMAbstractEditor {
     anchors.fill: parent
     anchors.verticalCenter: parent.verticalCenter
 
-    text: root.parentValue
     color: root.enabled ? __style.nightColor : __style.mediumGreenColor
     placeholderTextColor: __style.nightAlphaColor
     font: __style.p5

diff --git a/app/qml/onboarding/MMAcceptInvitation.qml b/app/qml/onboarding/MMAcceptInvitation.qml
@@ -11,68 +11,111 @@ import QtQuick.Layouts
 import QtQuick.Controls
 
 import "../components"
+import "../inputs"
 
 Page {
   id: root
 
+  required property string user
+  required property string workspace
+
   signal backClicked
   signal continueClicked
   signal createWorkspaceClicked
 
-  Column {
-    spacing: 20
+  Rectangle {
+    anchors.fill: parent
+    color: __style.lightGreenColor
+  }
 
-    MMHeader {
-      headerTitle: qsTr("Accept Invitation")
+  ScrollView {
+    width: parent.width
+    height: parent.height
 
-      onBackClicked: root.backClicked()
-    }
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+    ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+
+    Column {
+      id: mainColumn
+
+      width: root.width
+      spacing: 20 * __dp
+      leftPadding: 20 * __dp
+      rightPadding: 20 * __dp
+      topPadding: 100 * __dp
+      bottomPadding: 20 * __dp
 
-   Item {
-     width: bg.width
-     height: bg.height
+      Item {
+        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        height: bg.height
 
-     MMIcon {
-       id: bg
-       source: __style.acceptInvitationImage
-     }
+        Image {
+          id: bg
 
-     MMIcon {
-        id: fg
-        x: ( bg.width - fg.width ) / 2 + 7
-        y: ( bg.height - fg.height ) / 2 + 5
-        source: __style.acceptInvitationLogoImage
-     }
-   }
+          anchors.horizontalCenter: parent.horizontalCenter
+          source: __style.acceptInvitationImage
 
-    Label {
+          Image {
+            id: fg
+            x: ( bg.width - fg.width ) / 2 + 7
+            y: ( bg.height - fg.height ) / 2 + 5
+            source: __style.acceptInvitationLogoImage
+          }
+        }
+      }
+
+      Text {
+        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
         text: qsTr("You have been invited to workspace")
-        font: __style.t1
+        font: __style.h3
         color: __style.forestColor
-    }
+        wrapMode: Text.WordWrap
+        horizontalAlignment: Text.AlignHCenter
+        lineHeight: 1.2
+      }
 
-    Label {
-        text: qsTr("User %1 has invited you to join his workspace").arg("andrej")
-        font: __style.p2
-    }
+      Text {
+        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        text: qsTr("User %1 has invited you to join his workspace").arg(root.user)
+        font: __style.p5
+        color: __style.nightColor
+        wrapMode: Text.WordWrap
+        horizontalAlignment: Text.AlignHCenter
+        lineHeight: 1.5
+      }
 
-    Label {
-        text: "my-workspace-funny"
-        font: __style.p2
-    }
+      Item { width: 1; height: 1 }
 
-    MMButton {
-      onClicked: root.continueClicked()
-      text: qsTr("Join workspace")
-    }
+      Text {
+        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        text: root.workspace
+        font: __style.t1
+        color: __style.nightColor
+        wrapMode: Text.WordWrap
+        horizontalAlignment: Text.AlignHCenter
+        lineHeight: 1.5
+      }
 
-    MMHlineText {
-      title: qsTr("or")
-    }
+      Item { width: 1; height: 50 }
+
+      MMButton {
+        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        text: qsTr("Join workspace")
+
+        onClicked: root.continueClicked()
+      }
+
+      MMHlineText {
+        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        title: qsTr("or")
+      }
+
+      MMLinkButton {
+        width: parent.width - mainColumn.leftPadding - mainColumn.rightPadding
+        text: qsTr("Create new workspace")
 
-    MMLinkButton {
-      onClicked: root.createWorkspaceClicked()
-      text: qsTr("Create new workspace")
+        onClicked: root.createWorkspaceClicked()
+      }
     }
   }
 }