From 4480d8ba101ce55bf304ed6e348f217fd7b4807f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Wed, 8 Feb 2023 18:33:29 +0800 Subject: Wrap SignIn with Flickable --- SignInFlickable.ui.qml | 321 ++++++++++++++++++++++++++----------------------- 1 file changed, 170 insertions(+), 151 deletions(-) diff --git a/SignInFlickable.ui.qml b/SignInFlickable.ui.qml index 9a66e90..15fd3e3 100644 --- a/SignInFlickable.ui.qml +++ b/SignInFlickable.ui.qml @@ -2,11 +2,12 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 -GridLayout { +Flickable { property alias signInEmail: email property alias signInPassword: password property alias signInButton: button property alias signInSignUp: signUp + contentHeight: container.height FontLoader { id: heebo @@ -14,185 +15,203 @@ GridLayout { source: "Heebo/Heebo-Bold.ttf" } - ColumnLayout { - Layout.rightMargin: 16 - Layout.leftMargin: 16 + GridLayout { + id: container + anchors { + top: parent.top + left: parent.left + right: parent.right + } ColumnLayout { - spacing: 16 - ColumnLayout { - id: columnLayout - - Label { - id: signInTitle - text: qsTr("Login Into Eduport") - wrapMode: Text.Wrap - Layout.fillWidth: true - font.family: heebo.name - font.weight: Font.Medium - font.pointSize: 40 - } - - Label { - id: signInSubtitle - color: "#6c757d" - text: qsTr("Nice to see you! Please log" - + " in with your account.") - wrapMode: Text.Wrap - Layout.fillWidth: true - font.weight: Font.Normal - font.pointSize: 22 - font.family: "Roboto" - } - } + Layout.rightMargin: 16 + Layout.leftMargin: 16 + ColumnLayout { - Label { - text: qsTr("Email address *") - font.pixelSize: 16 - font.family: "Roboto" + spacing: 16 + ColumnLayout { + id: columnLayout + + Label { + id: signInTitle + text: qsTr("Login Into Eduport") + wrapMode: Text.Wrap + Layout.fillWidth: true + font.family: heebo.name + font.weight: Font.Medium + font.pointSize: 40 + } + + Label { + id: signInSubtitle + color: "#6c757d" + text: qsTr("Nice to see you! " + + "Please log in with " + + "your account.") + wrapMode: Text.Wrap + Layout.fillWidth: true + font.weight: Font.Normal + font.pointSize: 22 + font.family: "Roboto" + } } + 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 + 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" - sourceSize { - width: 24 - height: 24 + RowLayout { + anchors.fill: parent + Image { + id: envelope + source: "Bootstrap/icons/envelope-fill.svg" + sourceSize { + width: 24 + height: 24 + } + Layout.margins: 16 } - 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" + 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" - } + ColumnLayout { + Label { + text: qsTr("Password *") + font.pixelSize: 16 + font.family: "Roboto" + } - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true + 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") - echoMode: TextInput.Password - font.pixelSize: 16 - font.family: "Roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" + 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") + echoMode: TextInput.Password + font.pixelSize: 16 + font.family: "Roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } } } } } - } - Label { - id: passwordHelper - text: "Your password must be 8 characters at least" - font.pixelSize: 12 - color: "#6c757d" - } - RowLayout { - Layout.fillWidth: true - CheckBox { - id: rememberCheckBox - text: qsTr("Remember me") - font.pointSize: 14 - font.family: "Roboto" + Label { + id: passwordHelper + text: "Your password must be 8 " + + "characters at least" + font.pixelSize: 12 + color: "#6c757d" + } + RowLayout { Layout.fillWidth: true - contentItem: Text { - color: "#6c757d" - text: rememberCheckBox.text - font: rememberCheckBox.font - verticalAlignment: Text.AlignVCenter - leftPadding: rememberCheckBox.indicator.width + rememberCheckBox.spacing + CheckBox { + id: rememberCheckBox + text: qsTr("Remember me") + font.pointSize: 14 + font.family: "Roboto" + Layout.fillWidth: true + contentItem: Text { + color: "#6c757d" + text: rememberCheckBox.text + font: rememberCheckBox.font + verticalAlignment: Text.AlignVCenter + leftPadding: rememberCheckBox.indicator.width + rememberCheckBox.spacing + } + } + Text { + id: forgotPassword + text: "Forgot " + + "password?" + font.family: "Roboto" + font.pointSize: 14 + horizontalAlignment: Text.AlignRight + Layout.fillWidth: true + linkColor: Qt.rgba(.0235, .416, + .788, 1.0) } } - Text { - id: forgotPassword - text: "Forgot password?" - font.family: "Roboto" - font.pointSize: 14 - horizontalAlignment: Text.AlignRight + Button { + id: button + text: qsTr("Login") + font.pixelSize: 16 + implicitHeight: 40 Layout.fillWidth: true - linkColor: Qt.rgba(.0235, .416, .788, 1.0) + + contentItem: Text { + color: "#ffffff" + text: "Login" + horizontalAlignment: Text + .AlignHCenter + verticalAlignment: Text + .AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + + background: Rectangle { + color: button.down + ? "#055aab" : "#066ac9" + radius: 8 + } } } - Button { - id: button - text: qsTr("Login") - font.pixelSize: 16 - implicitHeight: 40 - Layout.fillWidth: true - contentItem: Text { - color: "#ffffff" - text: "Login" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium + RowLayout { + Layout.alignment: Qt.AlignHCenter + Label { + text: qsTr("Don't have an account?") + font.pixelSize: 16 font.family: "Roboto" - font.pointSize: 14 } - - background: Rectangle { - color: button.down ? "#055aab" : "#066ac9" - radius: 8 + Text { + id: signUp + text: "Signup " + + "here" + font.pixelSize: 16 + font.family: "Roboto" + font.underline: false + linkColor: Qt.rgba(.0235, .416, .788, + 1.0) } } } - - RowLayout { - Layout.alignment: Qt.AlignHCenter - Label { - text: qsTr("Don't have an account?") - font.pixelSize: 16 - font.family: "Roboto" - } - Text { - id: signUp - text: "Signup here" - font.pixelSize: 16 - font.family: "Roboto" - font.underline: false - linkColor: Qt.rgba(.0235, .416, .788, 1.0) - } - } } } -- cgit v1.2.3