From 7625e24271ebb98848f92eb69d5706221a2efac3 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Thu, 19 Sep 2019 09:21:47 +0700 Subject: rearrange `Login` flow --- features/Login.qml | 33 +++++++++- features/LoginEmail.qml | 44 +------------ features/LoginEmailForm.ui.qml | 136 +++++++++++++++++++++++++++++++++++++++++ features/LoginForm.ui.qml | 136 ----------------------------------------- features/Onboarding.qml | 2 +- features/OnboardingForm.ui.qml | 6 +- 6 files changed, 173 insertions(+), 184 deletions(-) create mode 100644 features/LoginEmailForm.ui.qml delete mode 100644 features/LoginForm.ui.qml diff --git a/features/Login.qml b/features/Login.qml index 44bf53c..863e908 100644 --- a/features/Login.qml +++ b/features/Login.qml @@ -3,8 +3,39 @@ import QtQuick.Controls 2.12 import QtQuick.Controls.Material 2.12 import QtQuick.Layouts 1.12 -LoginForm {} +Page { + header: + ToolBar { + background: Rectangle { + color: "#FAFFFFFF" + } + RowLayout { + ToolButton { + id: toolButton + icon.name: "back-button" + icon.source: "../components/icons/arrow-back-24px.svg" + highlighted: true + onClicked: { + if (pageView.depth > 1) { + pageView.pop() + } else { + drawer.open() + } + } + } + } + } + + +StackView { + id: contentView + anchors.topMargin: 432 + anchors.fill: parent + initialItem: LoginEmail{ + } +} +} /*##^## Designer { D{i:0;autoSize:true;height:480;width:640} diff --git a/features/LoginEmail.qml b/features/LoginEmail.qml index bfb1e52..3352f4a 100644 --- a/features/LoginEmail.qml +++ b/features/LoginEmail.qml @@ -3,50 +3,8 @@ import QtQuick.Controls 2.12 import QtQuick.Controls.Material 2.12 import QtQuick.Layouts 1.12 -Page { - header: - ToolBar { +LoginEmailForm {} - background: Rectangle { - color: "#FAFFFFFF" - } - RowLayout { - ToolButton { - id: toolButton - icon.name: "back-button" - icon.source: "../components/icons/arrow-back-24px.svg" - highlighted: true - onClicked: { - if (pageView.depth > 1) { - pageView.pop() - } else { - drawer.open() - } - } - } - - Label { - text: contentView.currentItem.title - font.family: "Work Sans" - font.weight: Font.Medium - font.pointSize: 20 - wrapMode: Text.WordWrap - elide: Label.ElideRight - horizontalAlignment: Qt.AlignHCenter - verticalAlignment: Qt.AlignVCenter - } - } - } - - -StackView { - id: contentView - anchors.topMargin: 432 - anchors.fill: parent - initialItem: Login{ - } -} -} /*##^## Designer { D{i:0;autoSize:true;height:480;width:640} diff --git a/features/LoginEmailForm.ui.qml b/features/LoginEmailForm.ui.qml new file mode 100644 index 0000000..501b575 --- /dev/null +++ b/features/LoginEmailForm.ui.qml @@ -0,0 +1,136 @@ +import QtQuick 2.12 +import QtQuick.Layouts 1.12 +import QtQuick.Controls 2.12 +import QtQuick.Controls.Material 2.12 + +Page { + id: page + title: qsTr("Log in") + + property alias continueButton: continueButton + + Text { + id: pageTitle + text: contentView.currentItem.title + verticalAlignment: Text.AlignVCenter + wrapMode: Text.WordWrap + anchors.right: parent.right + anchors.rightMargin: 88 + anchors.bottom: pageInstruction.top + anchors.bottomMargin: 8 + anchors.left: parent.left + anchors.leftMargin: 16 + font.pointSize: 14 + font.family: "Work Sans" + font.weight: Font.Medium + } + Text { + id: pageInstruction + color: "#000000" + text: qsTr("Continue with your email.") + verticalAlignment: Text.AlignVCenter + wrapMode: Text.WordWrap + anchors.right: parent.right + anchors.rightMargin: 88 + font.family: "Work Sans" + + font.pointSize: 24 + font.weight: Font.Bold + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.bottom: emailLayout.top + anchors.bottomMargin: 0 + } + RowLayout { + id: emailLayout + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.bottom: continueLayout.top + anchors.bottomMargin: 16 + spacing: 8 + height: 56 + + Image { + width: 24 + height: 24 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + opacity: 0.54 + sourceSize.height: 24 + sourceSize.width: 24 + Layout.leftMargin: 16 + fillMode: Image.PreserveAspectFit + source: "../components/icons/email-24px.svg" + antialiasing: true + } + + TextField { + id: emailForm + topPadding: 16 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Layout.rightMargin: 16 + Layout.leftMargin: 8 + Layout.fillWidth: true + placeholderText: qsTr("Enter your email") + font.pointSize: 16 + font.family: "Work Sans" + color: "#000000" + } + } + RowLayout { + id: continueLayout + height: 80 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + + Text { + id: disclaimer + text: qsTr("By continuing, you are agree to our Terms of Use and Privacy Policy.") + Layout.rightMargin: 16 + Layout.leftMargin: 16 + font.family: "Roboto" + font.pointSize: 12 + color: "#FA000000" + wrapMode: Text.WordWrap + verticalAlignment: Text.AlignVCenter + rightPadding: 0 + leftPadding: 0 + Layout.alignment: Qt.AlignVCenter + Layout.fillWidth: true + } + + RoundButton { + id: continueButton + width: 72 + height: 72 + Layout.preferredHeight: 64 + Layout.preferredWidth: 64 + Layout.minimumHeight: 64 + Layout.minimumWidth: 64 + Layout.rightMargin: 16 + Layout.leftMargin: 16 + flat: false + rightPadding: 0 + leftPadding: 0 + bottomPadding: 0 + topPadding: 0 + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Material.background: Material.primary + display: AbstractButton.IconOnly + icon.name: "arrow-forward-icon" + icon.source: "../components/icons/arrow-forward-24px.svg" + highlighted: true + } + } +} +/*##^## +Designer { + D{i:0;autoSize:true;height:480;width:640} +} +##^##*/ + diff --git a/features/LoginForm.ui.qml b/features/LoginForm.ui.qml deleted file mode 100644 index c69791b..0000000 --- a/features/LoginForm.ui.qml +++ /dev/null @@ -1,136 +0,0 @@ -import QtQuick 2.12 -import QtQuick.Layouts 1.12 -import QtQuick.Controls 2.12 -import QtQuick.Controls.Material 2.12 - -Page { - id: page - title: qsTr("Log in") - - property alias continueButton: continueButton - - Text { - id: pageTitle - text: pageView.currentItem.title - verticalAlignment: Text.AlignVCenter - wrapMode: Text.WordWrap - anchors.right: parent.right - anchors.rightMargin: 88 - anchors.bottom: pageInstruction.top - anchors.bottomMargin: 8 - anchors.left: parent.left - anchors.leftMargin: 16 - font.pointSize: 14 - font.family: "Work Sans" - font.weight: Font.Medium - } - Text { - id: pageInstruction - color: "#000000" - text: qsTr("Get sh** done today, chill tomorrow.") - verticalAlignment: Text.AlignVCenter - wrapMode: Text.WordWrap - anchors.right: parent.right - anchors.rightMargin: 88 - font.family: "Work Sans" - - font.pointSize: 24 - font.weight: Font.Bold - anchors.left: parent.left - anchors.leftMargin: 16 - anchors.bottom: emailLayout.top - anchors.bottomMargin: 0 - } - RowLayout { - id: emailLayout - anchors.right: parent.right - anchors.rightMargin: 0 - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.bottom: continueLayout.top - anchors.bottomMargin: 16 - spacing: 8 - height: 56 - - Image { - width: 24 - height: 24 - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - opacity: 0.54 - sourceSize.height: 24 - sourceSize.width: 24 - Layout.leftMargin: 16 - fillMode: Image.PreserveAspectFit - source: "../components/icons/email-24px.svg" - antialiasing: true - } - - TextField { - id: emailForm - topPadding: 16 - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - Layout.rightMargin: 16 - Layout.leftMargin: 8 - Layout.fillWidth: true - placeholderText: qsTr("Enter your email") - font.pointSize: 16 - font.family: "Work Sans" - color: "#000000" - } - } - RowLayout { - id: continueLayout - height: 80 - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - anchors.right: parent.right - anchors.rightMargin: 0 - anchors.left: parent.left - anchors.leftMargin: 0 - - Text { - id: disclaimer - text: qsTr("By continuing, you are agree to our Terms of Use and Privacy Policy.") - Layout.rightMargin: 16 - Layout.leftMargin: 16 - font.family: "Roboto" - font.pointSize: 12 - color: "#FA000000" - wrapMode: Text.WordWrap - verticalAlignment: Text.AlignVCenter - rightPadding: 0 - leftPadding: 0 - Layout.alignment: Qt.AlignVCenter - Layout.fillWidth: true - } - - RoundButton { - id: continueButton - width: 72 - height: 72 - Layout.preferredHeight: 64 - Layout.preferredWidth: 64 - Layout.minimumHeight: 64 - Layout.minimumWidth: 64 - Layout.rightMargin: 16 - Layout.leftMargin: 16 - flat: false - rightPadding: 0 - leftPadding: 0 - bottomPadding: 0 - topPadding: 0 - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter - Material.background: Material.primary - display: AbstractButton.IconOnly - icon.name: "arrow-forward-icon" - icon.source: "../components/icons/arrow-forward-24px.svg" - highlighted: true - } - } -} -/*##^## -Designer { - D{i:0;autoSize:true;height:480;width:640} -} -##^##*/ - diff --git a/features/Onboarding.qml b/features/Onboarding.qml index 38e9cf9..1860896 100644 --- a/features/Onboarding.qml +++ b/features/Onboarding.qml @@ -2,7 +2,7 @@ import QtQuick 2.4 OnboardingForm { objectName: "onboarding" - loginButton.onClicked: pageView.push("LoginEmail.qml") + loginButton.onClicked: pageView.push("Login.qml") } /*##^## diff --git a/features/OnboardingForm.ui.qml b/features/OnboardingForm.ui.qml index 13db636..b6a2cff 100644 --- a/features/OnboardingForm.ui.qml +++ b/features/OnboardingForm.ui.qml @@ -48,17 +48,17 @@ Page { } Text { id: onboardingText1 - text: qsTr("Achieve more today, chill tomorrow.") + text: qsTr("Get things done today, chill tomorrow.") anchors.bottom: registerButton.top anchors.bottomMargin: 16 wrapMode: Text.WordWrap anchors.right: parent.right - anchors.rightMargin: 16 + anchors.rightMargin: 72 anchors.left: parent.left anchors.leftMargin: 16 font.pointSize: 24 font.family: "Work Sans" - font.weight: Font.Medium + font.weight: Font.Bold } RoundButton { id: registerButton -- cgit v1.2.3