Reorient layout of skip, sign-in and create

* Skip button
  - Moved to the left, such that a user won't click on it mindlessly
  - Made it a Tertiary button, so it will have predictable margins
* Sign-in button
  - Moved to the right bottom, making it the logical next option
* Create an account
  - Moved to be inline with skip and sign-in
  - Made it a secondary button as requested by UX

Contributes to CURA-8602
This commit is contained in:
Jelle Spijker 2021-10-04 16:47:20 +02:00
parent d296531ffa
commit b49004a742
No known key found for this signature in database
GPG key ID: 6662DC033BE6B99A

View file

@ -190,55 +190,48 @@ Item
}
}
}
// Sign in Button
Cura.PrimaryButton
{
id: signInButton
anchors.horizontalCenter: parent.horizontalCenter
text: catalog.i18nc("@button", "Sign in")
onClicked: Cura.API.account.login()
// Content Item is used in order to align the text inside the button. Without it, when resizing the
// button, the text will be aligned on the left
contentItem: Text {
text: signInButton.text
font: UM.Theme.getFont("medium")
color: UM.Theme.getColor("primary_text")
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
// Create an account button
Cura.TertiaryButton
{
id: createAccountButton
anchors.horizontalCenter: parent.horizontalCenter
text: catalog.i18nc("@text", "Create a free Ultimaker Account")
onClicked: Qt.openUrlExternally("https://ultimaker.com/app/ultimaker-cura-account-sign-up?utm_source=cura&utm_medium=software&utm_campaign=onboarding-signup")
}
}
}
// The "Skip" button exists on the bottom right
Label
// Skip button
Cura.TertiaryButton
{
id: skipButton
anchors.left: parent.left
anchors.bottom: parent.bottom
text: catalog.i18nc("@button", "Skip")
onClicked: base.showNextPage()
}
// Create an account button
Cura.SecondaryButton
{
id: createAccountButton
anchors.right: signInButton.left
anchors.rightMargin: UM.Theme.getSize("default_margin").width
anchors.bottom: parent.bottom
text: catalog.i18nc("@text", "Create a free Ultimaker Account")
onClicked: Qt.openUrlExternally("https://ultimaker.com/app/ultimaker-cura-account-sign-up?utm_source=cura&utm_medium=software&utm_campaign=onboarding-signup")
}
// Sign in Button
Cura.PrimaryButton
{
id: signInButton
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.leftMargin: UM.Theme.getSize("default_margin").width
text: catalog.i18nc("@button", "Skip")
color: UM.Theme.getColor("secondary_button_text")
font: UM.Theme.getFont("medium")
renderType: Text.NativeRendering
MouseArea
{
anchors.fill: parent
hoverEnabled: true
onClicked: base.showNextPage()
onEntered: parent.font.underline = true
onExited: parent.font.underline = false
text: catalog.i18nc("@button", "Sign in")
onClicked: Cura.API.account.login()
// Content Item is used in order to align the text inside the button. Without it, when resizing the
// button, the text will be aligned on the left
contentItem: Text {
text: signInButton.text
font: UM.Theme.getFont("medium")
color: UM.Theme.getColor("primary_text")
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
}