diff options
| -rw-r--r-- | SignUp.ui.qml | 127 |
1 files changed, 84 insertions, 43 deletions
diff --git a/SignUp.ui.qml b/SignUp.ui.qml index 1df7b1a..92bcd9b 100644 --- a/SignUp.ui.qml +++ b/SignUp.ui.qml @@ -3,11 +3,20 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 Flickable { - property alias signUpEmail: email - property alias signUpPassword: password - property alias signUpConfirmPassword: confirmPassword - property alias signUpButton: button - property alias signUpSignIn: signIn + property string titleHeader: qsTr("Sign up for your account!") + property alias titleParagraph: titleParagraph + property string emailLabel: qsTr("Email address *") + property string emailImage: "Bootstrap/icons/envelope-fill.svg" + property alias email: email + property alias password: password + property alias confirmPassword: confirmPassword + property alias button: button + property alias signIn: signIn + readonly property bool doesntEmbed: Qt.platform.os === "android" + || Qt.platform.os === "linux" + || Qt.platform.os === "osx" + || Qt.platform.os === "unix" + || Qt.platform.os === "windows" contentHeight: container.height FontLoader { @@ -15,7 +24,17 @@ Flickable { source: "Heebo/Heebo-Bold.ttf" } - GridLayout { + FontLoader { + id: medium + source: doesntEmbed ? "" : "Roboto/Roboto-Medium.ttf" + } + + FontLoader { + id: regular + source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf" + } + + GridLayout { id: container anchors { top: parent.top @@ -33,33 +52,36 @@ Flickable { id: columnLayout Label { - id: signUpTitle - text: qsTr("Sign up for your account!") + text: titleHeader wrapMode: Text.Wrap Layout.fillWidth: true - font.family: heebo.name - font.weight: Font.Medium - font.pointSize: 40 + font { + family: heebo.name + pointSize: 21.75 + .013125 * columnLayout.width + } } Label { - id: signUpSubtitle + id: titleParagraph color: "#6c757d" text: qsTr("Nice to see you! Please Sign up with your account.") wrapMode: Text.Wrap Layout.fillWidth: true - font.weight: Font.Normal - font.pointSize: 22 - font.family: "Roboto" + font { + pointSize: 18.75 + family: doesntEmbed ? "Roboto" : regular.name + } } } ColumnLayout { Label { - text: qsTr("Email address *") - font.pixelSize: 16 - font.family: "Roboto" + text: emailLabel + font { + pointSize: 15 + family: doesntEmbed ? "Roboto" : regular.name + } } Rectangle { @@ -73,8 +95,7 @@ Flickable { anchors.fill: parent Image { - id: envelope - source: "Bootstrap/icons/envelope-fill.svg" + source: emailImage Layout.maximumHeight: 24 Layout.maximumWidth: 24 Layout.margins: 16 @@ -83,8 +104,10 @@ Flickable { TextField { id: email placeholderText: qsTr("E-mail") - font.pixelSize: 16 - font.family: "Roboto" + font { + pointSize: 16 + family: doesntEmbed ? "Roboto" : regular.name + } Layout.fillWidth: true Layout.fillHeight: true background: Rectangle { @@ -99,8 +122,10 @@ Flickable { Label { text: qsTr("Password *") - font.pixelSize: 16 - font.family: "Roboto" + font { + pointSize: 15 + family: doesntEmbed ? "Roboto" : regular.name + } } Rectangle { @@ -124,8 +149,10 @@ Flickable { id: password placeholderText: "*********" echoMode: TextInput.Password - font.pixelSize: 16 - font.family: "Roboto" + font { + pointSize: 16 + family: doesntEmbed ? "Roboto" : regular.name + } Layout.fillWidth: true Layout.fillHeight: true background: Rectangle { @@ -140,8 +167,10 @@ Flickable { Label { text: qsTr("Confirm Password *") - font.pixelSize: 16 - font.family: "Roboto" + font { + pointSize: 15 + family: doesntEmbed ? "Roboto" : regular.name + } } Rectangle { @@ -165,8 +194,10 @@ Flickable { id: confirmPassword placeholderText: "*********" echoMode: TextInput.Password - font.pixelSize: 16 - font.family: "Roboto" + font { + pointSize: 16 + family: doesntEmbed ? "Roboto" : regular.name + } Layout.fillWidth: true Layout.fillHeight: true background: Rectangle { @@ -178,12 +209,15 @@ Flickable { } RowLayout { + Layout.fillWidth: true CheckBox { id: agreementCheckBox text: "By signing up, you agree to the <a href=\"#\">terms of service</a>" - font.pointSize: 14 - font.family: "Roboto" + font { + pointSize: 15 + family: doesntEmbed ? "Roboto" : regular.name + } Layout.fillWidth: true contentItem: Text { color: "#6c757d" @@ -198,20 +232,23 @@ Flickable { Button { id: button text: qsTr("Sign Up") - font.pixelSize: 16 implicitHeight: 40 Layout.fillWidth: true + contentItem: Text { color: "#ffffff" - text: "Sign Up" + text: button.text horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 + font { + pointSize: 15 + family: doesntEmbed ? "Roboto" : medium.name + weight: Font.Medium + } } + background: Rectangle { - color: button.down ? "#055aab" : "#066ac9" + color: button.down ? "#0555a1" : button.enabled ? "#066ac9" : "#a6066ac9" radius: 8 } } @@ -222,16 +259,20 @@ Flickable { Label { text: qsTr("Already have an account?") - font.pixelSize: 16 - font.family: "Roboto" + font { + pointSize: 15 + family: doesntEmbed ? "Roboto" : regular.name + } } Text { id: signIn text: "<a href=\"sign-in.html\">Sign in here</a>" - font.pixelSize: 16 - font.family: "Roboto" - font.underline: false + font { + pointSize: 15 + family: doesntEmbed ? "Roboto" : regular.name + underline: false + } linkColor: Qt.rgba(.0235, .416, .788, 1.0) } } |