diff options
| -rw-r--r-- | SignUpFlickable.ui.qml | 351 |
1 files changed, 195 insertions, 156 deletions
diff --git a/SignUpFlickable.ui.qml b/SignUpFlickable.ui.qml index 3f6a4f6..9960ee1 100644 --- a/SignUpFlickable.ui.qml +++ b/SignUpFlickable.ui.qml @@ -2,195 +2,234 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 -GridLayout { +Flickable { property alias signUpEmail: email property alias signUpPassword: password property alias signUpConfirmPassword: confirmPassword property alias signUpButton: button property alias signUpSignIn: signIn + contentHeight: container.height - ColumnLayout { - Layout.margins: 16 + FontLoader { + id: heebo + name: "Heebo" + source: "Heebo/Heebo-Bold.ttf" + } + + GridLayout { + id: container + anchors { + top: parent.top + left: parent.left + right: parent.right + } ColumnLayout { - spacing: 16 - ColumnLayout { - id: columnLayout - Layout.fillWidth: true - - Label { - id: signUpTitle - text: qsTr("Sign Up Title") - font.family: "Roboto" - font.weight: Font.Medium - font.pointSize: 40 - } - - Label { - id: signUpSubtitle - color: "#6c757d" - text: qsTr("Sign Up Subtitle") - font.weight: Font.Normal - font.pointSize: 22 - } - } + Layout.margins: 16 + ColumnLayout { - Label { - text: qsTr("Email address *") - font.pixelSize: 16 - font.family: "roboto" + spacing: 16 + + ColumnLayout { + id: columnLayout + + Label { + id: signUpTitle + text: qsTr("Sign up for your account!") + wrapMode: Text.Wrap + Layout.fillWidth: true + font.family: heebo.name + font.weight: Font.Medium + font.pointSize: 40 + } + + Label { + id: signUpSubtitle + 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" + } } - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - Image { - id: envelope - source: "Bootstrap/icons/envelope-fill.svg" - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 - } - TextField { - id: email - placeholderText: qsTr("E-mail") - font.pixelSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" + ColumnLayout { + + Label { + text: qsTr("Email address *") + font.pixelSize: 16 + font.family: "Roboto" + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + + RowLayout { + anchors.fill: parent + + Image { + id: envelope + source: "Bootstrap/icons/envelope-fill.svg" + Layout.maximumHeight: 24 + Layout.maximumWidth: 24 + Layout.margins: 16 + } + + TextField { + id: email + placeholderText: qsTr("E-mail") + font.pixelSize: 16 + font.family: "Roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } } } } } - } - ColumnLayout { - Label { - text: qsTr("Password *") - font.pixelSize: 16 - font.family: "roboto" - } - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - Image { - source: "Font-Awesome/svgs/solid/lock.svg" - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 - } - TextField { - id: password - placeholderText: qsTr("Password") - font.pixelSize: 16 - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" + ColumnLayout { + + Label { + text: qsTr("Password *") + font.pixelSize: 16 + font.family: "Roboto" + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + + RowLayout { + anchors.fill: parent + + Image { + source: "Font-Awesome/svgs/solid/lock.svg" + Layout.maximumHeight: 24 + Layout.maximumWidth: 24 + Layout.margins: 16 + } + + TextField { + id: password + placeholderText: "*********" + echoMode: TextInput.Password + font.pixelSize: 16 + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } } } - } + } } - } - ColumnLayout { - Label { - text: qsTr("Confirm password *") - font.pixelSize: 16 - font.family: "roboto" - } - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - Image { - source: "Font-Awesome/svgs/solid/lock.svg" - Layout.maximumHeight: 24 - Layout.maximumWidth: 24 - Layout.margins: 16 - } - TextField { - id: confirmPassword - placeholderText: qsTr("Confirm password") - font.pixelSize: 16 - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" + ColumnLayout { + + Label { + text: qsTr("Confirm Password *") + font.pixelSize: 16 + font.family: "Roboto" + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + + RowLayout { + anchors.fill: parent + + Image { + source: "Font-Awesome/svgs/solid/lock.svg" + Layout.maximumHeight: 24 + Layout.maximumWidth: 24 + Layout.margins: 16 + } + + TextField { + id: confirmPassword + placeholderText: "*********" + echoMode: TextInput.Password + font.pixelSize: 16 + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } } } - } + } } - } - 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" + + RowLayout { + + CheckBox { + id: agreementCheckBox + text: "By signing up, you agree to the <a href=\"#\">terms of service</a>" + font.pointSize: 14 + font.family: "Roboto" + Layout.fillWidth: true + contentItem: Text { + color: "#6c757d" + text: agreementCheckBox.text + verticalAlignment: Text.AlignVCenter + leftPadding: agreementCheckBox.indicator.width + agreementCheckBox.spacing + } + } + } + + Button { + id: button + text: qsTr("Sign Up") + font.pixelSize: 16 + implicitHeight: 40 Layout.fillWidth: true contentItem: Text { - color: "#6c757d" - text: agreementCheckBox.text + color: "#ffffff" + text: "Sign Up" + horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - leftPadding: agreementCheckBox.indicator.width + agreementCheckBox.spacing + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + background: Rectangle { + color: button.down ? "#055aab" : "#066ac9" + radius: 8 } } } - Button { - id: button - text: qsTr("Sign Up") - font.pixelSize: 16 - implicitHeight: 40 - Layout.fillWidth: true - - contentItem: Text { - color: "#ffffff" - text: "Sign Up" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - } + RowLayout { + Layout.alignment: Qt.AlignHCenter - background: Rectangle { - color: button.down ? "#055aab" : "#066ac9" - radius: 8 + Label { + text: qsTr("Already have an account?") + font.pixelSize: 16 } - } - } - RowLayout { - Layout.alignment: Qt.AlignHCenter - Label { - text: qsTr("Already have an account?") - font.pixelSize: 16 - } - Text { - id: signIn - text: "<a href=\"sign-in.html\">Sign in here</a>" - font.pixelSize: 16 - font.underline: false - linkColor: Qt.rgba(.0235, .416, .788, 1.0) + Text { + id: signIn + text: "<a href=\"sign-in.html\">Sign in here</a>" + font.pixelSize: 16 + font.underline: false + linkColor: Qt.rgba(.0235, .416, .788, 1.0) + } } } } |