From 9d6f6d25c87eb89563c1b1015eba2902d9854d04 Mon Sep 17 00:00:00 2001 From: ꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ Date: Sun, 2 Apr 2023 11:44:14 +0800 Subject: Separate personal info from checkout to its own file --- Shop/Checkout/PersonalInfo.ui.qml | 329 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 329 insertions(+) create mode 100644 Shop/Checkout/PersonalInfo.ui.qml (limited to 'Shop/Checkout/PersonalInfo.ui.qml') diff --git a/Shop/Checkout/PersonalInfo.ui.qml b/Shop/Checkout/PersonalInfo.ui.qml new file mode 100644 index 0000000..b35878c --- /dev/null +++ b/Shop/Checkout/PersonalInfo.ui.qml @@ -0,0 +1,329 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import Eduport 1.4 +import "../../TextField" +import "../../Label" + +ColumnLayout { + property alias name: name + property alias email: email + property alias mobile: mobile + property alias country: country + property alias state: province + property alias postal: postal + property alias address: address + property alias banks: banks + + anchors { + left: parent.left + right: parent.right + } + + H5 { + text: qsTr("Personal Details") + Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 + } + + GridLayout { + Layout.margins: 16 + columns: body.width < 768 ? 1 : 2 + rows: body.width < 768 ? 4 : 7 + columnSpacing: 0 + rowSpacing: 16 + + ColumnLayout { + + Body { + text: qsTr("Your name *") + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + Input { + id: name + placeholderText: qsTr("Name") + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } + } + + ColumnLayout { + + Body { + text: qsTr("Email address *") + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + Input { + id: email + placeholderText: qsTr("Email") + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } + } + + ColumnLayout { + + Body { + text: qsTr("Mobile number *") + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + Input { + id: mobile + placeholderText: + qsTr("Mobile number") + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } + } + + ColumnLayout { + + Body { + text: qsTr("Select country *") + Layout.fillWidth: true + } + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + Input { + id: country + placeholderText: + qsTr("Select country") + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } + } + + ColumnLayout { + + Body { + text: qsTr("Select state *") + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + Input { + id: province + placeholderText: + qsTr("Select state") + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } + } + + ColumnLayout { + + Body { + text: qsTr("Postal code *") + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + Input { + id: postal + placeholderText: + qsTr("PIN code") + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } + } + + ColumnLayout { + + Body { + text: qsTr("Address *") + Layout.fillWidth: true + } + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + Input { + id: address + placeholderText: qsTr("Address") + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } + } + } + + ColumnLayout { + + H5 { + text: qsTr("Payment method") + Layout.fillWidth: true + Layout.margins: 16 + } + + ColumnLayout { + + Rectangle { + implicitHeight: paymentCard.height + Layout.margins: 16 + Layout.fillWidth: true + border.width: 1 + radius: 8 + border.color: "#4d000000" + + ColumnLayout { + id: paymentCard + anchors { + left: parent.left + right: parent.right + } + Body { + text: + qsTr("Credit or Debit Card") + Layout.fillWidth: true + padding: 16 + } + } + } + + Rectangle { + implicitHeight: paymentNetBanking.height + Layout.margins: 16 + Layout.fillWidth: true + border.width: 1 + radius: 8 + border.color: "#4d000000" + + ColumnLayout { + id: paymentNetBanking + anchors { + left: parent.left + right: parent.right + } + + Body { + text: + qsTr("Pay with Net Banking") + Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 + } + + ColumnLayout { + Layout.margins: 16 + Body { + text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.") + Layout.fillWidth: true + } + + Body { + text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.") + Layout.fillWidth: true + } + + ComboBox { + id: banks + Layout.fillWidth: true + font.pointSize: 14 + font.family: "roboto" + Layout.topMargin: 24 + model: ListModel { + ListElement { + label: "Please choose one" + } + ListElement { + label: "Bank of America" + } + ListElement { + label: "Bank of India" + } + ListElement { + label: "Bank of London" + } + } + delegate: ItemDelegate { + contentItem: Text { + text: label + font { + family: Eduport.bodyFont.family + weight: Eduport.bodyFont.weight + pointSize: Eduport.bodyFont.pointSize + } + } + } + background: Rectangle { + radius: 8 + implicitHeight: 36 + implicitWidth: 200 + color: "#f5f7f9" + } + } + } + } + } + } + } +} + -- cgit v1.3 From d69434998b2c73fa82d779ec08b585239d474ed5 Mon Sep 17 00:00:00 2001 From: ꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ Date: Sun, 2 Apr 2023 12:27:20 +0800 Subject: Move personal info anchoring to Checkout --- Shop/Checkout.ui.qml | 4 ++++ Shop/Checkout/PersonalInfo.ui.qml | 5 ----- 2 files changed, 4 insertions(+), 5 deletions(-) (limited to 'Shop/Checkout/PersonalInfo.ui.qml') diff --git a/Shop/Checkout.ui.qml b/Shop/Checkout.ui.qml index 88f0ec5..8e0c16d 100644 --- a/Shop/Checkout.ui.qml +++ b/Shop/Checkout.ui.qml @@ -67,6 +67,10 @@ Flickable { PersonalInfo { id: personalInfo + anchors { + left: parent.left + right: parent.right + } } } } diff --git a/Shop/Checkout/PersonalInfo.ui.qml b/Shop/Checkout/PersonalInfo.ui.qml index b35878c..77b4698 100644 --- a/Shop/Checkout/PersonalInfo.ui.qml +++ b/Shop/Checkout/PersonalInfo.ui.qml @@ -15,11 +15,6 @@ ColumnLayout { property alias address: address property alias banks: banks - anchors { - left: parent.left - right: parent.right - } - H5 { text: qsTr("Personal Details") Layout.fillWidth: true -- cgit v1.3 From b70b1a6dfef5a52df82ab79bce2d2b570951a755 Mon Sep 17 00:00:00 2001 From: ꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ Date: Sun, 2 Apr 2023 12:28:23 +0800 Subject: bsAccordionBg and its use --- Shop/Checkout/PersonalInfo.ui.qml | 2 ++ imports/Eduport/Eduport.qml | 2 ++ 2 files changed, 4 insertions(+) (limited to 'Shop/Checkout/PersonalInfo.ui.qml') diff --git a/Shop/Checkout/PersonalInfo.ui.qml b/Shop/Checkout/PersonalInfo.ui.qml index 77b4698..a529ea1 100644 --- a/Shop/Checkout/PersonalInfo.ui.qml +++ b/Shop/Checkout/PersonalInfo.ui.qml @@ -226,6 +226,7 @@ ColumnLayout { border.width: 1 radius: 8 border.color: "#4d000000" + color: Eduport.bsAccordionBg ColumnLayout { id: paymentCard @@ -249,6 +250,7 @@ ColumnLayout { border.width: 1 radius: 8 border.color: "#4d000000" + color: Eduport.bsAccordionBg ColumnLayout { id: paymentNetBanking diff --git a/imports/Eduport/Eduport.qml b/imports/Eduport/Eduport.qml index 0077b7a..ab18b33 100644 --- a/imports/Eduport/Eduport.qml +++ b/imports/Eduport/Eduport.qml @@ -40,6 +40,8 @@ QtObject { weight: Font.Normal }) + property color bsAccordionBg: bsBodyBg + readonly property real bsBadgeFontSize: 13.6 property color bsBodyColor: mode ? "#a1a1a8" : "#747579" -- cgit v1.3 From c43051ce55cceeb6d51858e6f5edd6041573c503 Mon Sep 17 00:00:00 2001 From: ꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ Date: Sun, 2 Apr 2023 12:45:22 +0800 Subject: Separate NetBanking to its own file --- Shop.qrc | 1 + Shop/Checkout/PersonalInfo.ui.qml | 69 ++------------------ .../PersonalInfo/PaymentMethod/NetBanking.ui.qml | 76 ++++++++++++++++++++++ 3 files changed, 82 insertions(+), 64 deletions(-) create mode 100644 Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml (limited to 'Shop/Checkout/PersonalInfo.ui.qml') diff --git a/Shop.qrc b/Shop.qrc index 476b0fc..83a9f96 100644 --- a/Shop.qrc +++ b/Shop.qrc @@ -1,6 +1,7 @@ Shop/Course.ui.qml + Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml Shop/Checkout/PersonalInfo.ui.qml Shop/Checkout.ui.qml diff --git a/Shop/Checkout/PersonalInfo.ui.qml b/Shop/Checkout/PersonalInfo.ui.qml index a529ea1..3bdff82 100644 --- a/Shop/Checkout/PersonalInfo.ui.qml +++ b/Shop/Checkout/PersonalInfo.ui.qml @@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15 import Eduport 1.4 import "../../TextField" import "../../Label" +import "PersonalInfo/PaymentMethod" ColumnLayout { property alias name: name @@ -13,7 +14,7 @@ ColumnLayout { property alias state: province property alias postal: postal property alias address: address - property alias banks: banks + property alias paymentMethodNetBanking: paymentMethodNetBanking H5 { text: qsTr("Personal Details") @@ -244,7 +245,7 @@ ColumnLayout { } Rectangle { - implicitHeight: paymentNetBanking.height + implicitHeight: paymentMethodNetBanking.height Layout.margins: 16 Layout.fillWidth: true border.width: 1 @@ -252,72 +253,12 @@ ColumnLayout { border.color: "#4d000000" color: Eduport.bsAccordionBg - ColumnLayout { - id: paymentNetBanking + NetBanking { + id: paymentMethodNetBanking anchors { left: parent.left right: parent.right } - - Body { - text: - qsTr("Pay with Net Banking") - Layout.fillWidth: true - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 16 - } - - ColumnLayout { - Layout.margins: 16 - Body { - text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.") - Layout.fillWidth: true - } - - Body { - text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.") - Layout.fillWidth: true - } - - ComboBox { - id: banks - Layout.fillWidth: true - font.pointSize: 14 - font.family: "roboto" - Layout.topMargin: 24 - model: ListModel { - ListElement { - label: "Please choose one" - } - ListElement { - label: "Bank of America" - } - ListElement { - label: "Bank of India" - } - ListElement { - label: "Bank of London" - } - } - delegate: ItemDelegate { - contentItem: Text { - text: label - font { - family: Eduport.bodyFont.family - weight: Eduport.bodyFont.weight - pointSize: Eduport.bodyFont.pointSize - } - } - } - background: Rectangle { - radius: 8 - implicitHeight: 36 - implicitWidth: 200 - color: "#f5f7f9" - } - } - } } } } diff --git a/Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml b/Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml new file mode 100644 index 0000000..8200de1 --- /dev/null +++ b/Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml @@ -0,0 +1,76 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import Eduport 1.4 +import "../../../../Label" + +ColumnLayout { + property alias banks: banks + + Body { + text: + qsTr("Pay with Net Banking") + Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 + } + + ColumnLayout { + Layout.margins: 16 + + Body { + text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.") + Layout.fillWidth: true + } + + Body { + text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.") + Layout.fillWidth: true + } + + ComboBox { + id: banks + Layout.fillWidth: true + Layout.topMargin: 24 + font: Eduport.bsBodyFont + model: ListModel { + ListElement { + label: "Please choose one" + } + ListElement { + label: "Bank of America" + } + ListElement { + label: "Bank of India" + } + ListElement { + label: "Bank of London" + } + } + contentItem: Text { + text: banks.displayText + font: banks.font + color: Eduport.bsBodyColor + verticalAlignment: Text.AlignVCenter + } + background: Rectangle { + width: banks.width + color: Eduport.bsBodyBg + radius: 8 + } + delegate: ItemDelegate { + contentItem: Text { + text: label + font: banks.font + color: Eduport.bsBodyColor + verticalAlignment: Text.AlignVCenter + } + background: Rectangle { + width: banks.width + color: Eduport.bsBodyBg + } + } + } + } +} -- cgit v1.3