Skip to content

Commit

Permalink
Onboarding adjusted for tablets
Browse files Browse the repository at this point in the history
  • Loading branch information
@iiLubos
iiLubos committed Dec 13, 2023
1 parent d943db4 commit 35424e7
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 41 deletions.
2 changes: 2 additions & 0 deletions app/mmstyle.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 )
Expand Down Expand Up @@ -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();
Expand Down
21 changes: 12 additions & 9 deletions app/qml/onboarding/MMAcceptInvitation.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 {
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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()
Expand Down
30 changes: 20 additions & 10 deletions app/qml/onboarding/MMCreateWorkspace.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

Expand All @@ -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
Expand All @@ -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
Expand All @@ -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")
}
Expand All @@ -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()
Expand Down
26 changes: 16 additions & 10 deletions app/qml/onboarding/MMLogin.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ Page {
signal changeServerClicked
signal forgotPasswordClicked

readonly property real hPadding: width < __style.maxPageWidth
? 20 * __dp
: (20 + (width - __style.maxPageWidth) / 2) * __dp

// background as Drawer design
Rectangle {
anchors.fill: parent
Expand All @@ -46,9 +50,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
headerTitle: qsTr("Log In")
titleFont: __style.h3
backColor: __style.lightGreenColor
Expand All @@ -70,24 +74,26 @@ Page {

width: root.width
spacing: 20 * __dp
padding: 20 * __dp
leftPadding: root.hPadding
rightPadding: root.hPadding
topPadding: 20 * __dp

Item { width: 1; height: 1 }

MMInputEditor {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
title: qsTr("Username")
bgColor: __style.lightGreenColor
}

MMPasswordEditor {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
title: qsTr("Password")
bgColor: __style.lightGreenColor
}

MMLink {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
height: 20 * __dp
text: qsTr("Forgot password?")

Expand All @@ -97,7 +103,7 @@ Page {
Item { width: 1; height: 1 }

MMButton {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
text: qsTr("Sign in")

onClicked: root.signInClicked()
Expand All @@ -106,12 +112,12 @@ Page {
Item { width: 1; height: 1 }

MMHlineText {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
title: qsTr("Don't have an account?")
}

MMLinkButton {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
text: qsTr("Sign up")

onClicked: root.signUpClicked()
Expand Down
32 changes: 20 additions & 12 deletions app/qml/onboarding/MMSignUp.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ Page {
signal changeServerClicked
signal forgotPasswordClicked

readonly property real hPadding: width < __style.maxPageWidth
? 20 * __dp
: (20 + (width - __style.maxPageWidth) / 2) * __dp

// background as Drawer design
Rectangle {
anchors.fill: parent
Expand All @@ -46,9 +50,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
headerTitle: qsTr("Sign Up")
titleFont: __style.h3
backColor: __style.lightGreenColor
Expand All @@ -61,6 +65,7 @@ Page {
height: parent.height - header.height - 40 * __dp
anchors.top: header.bottom
anchors.topMargin: 20 * __dp
anchors.bottomMargin: 20 * __dp

ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
Expand All @@ -70,28 +75,31 @@ Page {

width: root.width
spacing: 20 * __dp
padding: 20 * __dp
leftPadding: root.hPadding
rightPadding: root.hPadding
topPadding: 20 * __dp
bottomPadding: 20 * __dp

MMInputEditor {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
title: qsTr("Username")
bgColor: __style.lightGreenColor
}

MMInputEditor {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
title: qsTr("Email address")
bgColor: __style.lightGreenColor
}

MMPasswordEditor {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
title: qsTr("Password")
bgColor: __style.lightGreenColor
}

MMPasswordEditor {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
title: qsTr("Confirm password")
bgColor: __style.lightGreenColor
}
Expand All @@ -108,7 +116,7 @@ Page {
}

Text {
width: parent.width - checkbox.width - parent.spacing - 2 * mainColumn.padding
width: parent.width - checkbox.width - parent.spacing - 2 * root.hPadding
anchors.verticalCenter: parent.verticalCenter

text: qsTr("I accept the Mergin <a href='https://merginmaps.com'>Terms and Conditions and Privacy Policy</a>")
Expand All @@ -127,7 +135,7 @@ Page {
Item { width: 1; height: 1 }

MMButton {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
text: qsTr("Sign up")

onClicked: root.signUpClicked()
Expand All @@ -136,12 +144,12 @@ Page {
Item { width: 1; height: 1 }

MMHlineText {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
title: qsTr("Already have an account?")
}

MMLinkButton {
width: parent.width - 2 * mainColumn.padding
width: parent.width - 2 * root.hPadding
text: qsTr("Sign in")

onClicked: root.signUpClicked()
Expand Down

0 comments on commit 35424e7

Please sign in to comment.