From 9d6f6d25c87eb89563c1b1015eba2902d9854d04 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: Sun, 2 Apr 2023 11:44:14 +0800 Subject: Separate personal info from checkout to its own file --- Shop/Checkout.ui.qml | 321 +------------------------------------ Shop/Checkout/PersonalInfo.ui.qml | 329 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 334 insertions(+), 316 deletions(-) create mode 100644 Shop/Checkout/PersonalInfo.ui.qml (limited to 'Shop') diff --git a/Shop/Checkout.ui.qml b/Shop/Checkout.ui.qml index c7761c1..8b80af2 100644 --- a/Shop/Checkout.ui.qml +++ b/Shop/Checkout.ui.qml @@ -5,18 +5,12 @@ import Eduport 1.4 import "../TextField" as TxtFld import "../Label" as Lbl import "../Button" as Btn +import "Checkout" Flickable { property alias alert: alert property alias login: login - 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 + property alias personalInfo: personalInfo property alias courseItems: courseItems property alias priceValue: priceValue property alias discountValue: discountValue @@ -66,317 +60,12 @@ Flickable { Rectangle { Layout.fillWidth: true - implicitHeight: personal.height + implicitHeight: personalInfo.height Layout.margins: 16 radius: 8 - ColumnLayout { - id: personal - anchors { - left: parent.left - right: parent.right - } - - Lbl.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 { - - Lbl.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 - TxtFld.Input { - id: name - placeholderText: qsTr("Name") - Layout.fillWidth: true - Layout.fillHeight: true - } - } - } - } - - ColumnLayout { - - Lbl.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 - TxtFld.Input { - id: email - placeholderText: qsTr("Email") - Layout.fillWidth: true - Layout.fillHeight: true - } - } - } - } - - ColumnLayout { - - Lbl.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 - TxtFld.Input { - id: mobile - placeholderText: qsTr("Mobile number") - Layout.fillWidth: true - Layout.fillHeight: true - } - } - } - } - - ColumnLayout { - Lbl.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 - TxtFld.Input { - id: country - placeholderText: qsTr("Select country") - Layout.fillWidth: true - Layout.fillHeight: true - } - } - } - } - - ColumnLayout { - - Lbl.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 - TxtFld.Input { - id: province - placeholderText: qsTr("Select state") - Layout.fillWidth: true - Layout.fillHeight: true - } - } - } - } - - ColumnLayout { - - Lbl.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 - TxtFld.Input { - id: postal - placeholderText: qsTr("PIN code") - Layout.fillWidth: true - Layout.fillHeight: true - } - } - } - } - - ColumnLayout { - - Lbl.Body { - text: qsTr("Address *") - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TxtFld.Input { - id: address - placeholderText: qsTr("Address") - Layout.fillWidth: true - Layout.fillHeight: true - } - } - } - } - } - - ColumnLayout { - - Lbl.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 - } - Lbl.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 - } - - Lbl.Body { - text: qsTr("Pay with Net Banking") - Layout.fillWidth: true - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 16 - } - - ColumnLayout { - Layout.margins: 16 - Lbl.Body { - text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.") - Layout.fillWidth: true - } - - Lbl.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" - } - } - } - } - } - } - } + PersonalInfo { + id: personalInfo } } } 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.2.3 From 283842720b2bb16ec29ec4534a083cafafd3ceee 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: Sun, 2 Apr 2023 11:56:28 +0800 Subject: Set checkout personal info background colour --- Shop/Checkout.ui.qml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'Shop') diff --git a/Shop/Checkout.ui.qml b/Shop/Checkout.ui.qml index 8b80af2..88f0ec5 100644 --- a/Shop/Checkout.ui.qml +++ b/Shop/Checkout.ui.qml @@ -60,9 +60,10 @@ Flickable { Rectangle { Layout.fillWidth: true - implicitHeight: personalInfo.height Layout.margins: 16 + implicitHeight: personalInfo.height radius: 8 + color: Eduport.bsCardBg PersonalInfo { id: personalInfo -- cgit v1.2.3 From d69434998b2c73fa82d779ec08b585239d474ed5 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: 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') 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.2.3 From b70b1a6dfef5a52df82ab79bce2d2b570951a755 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: Sun, 2 Apr 2023 12:28:23 +0800 Subject: bsAccordionBg and its use --- Shop/Checkout/PersonalInfo.ui.qml | 2 ++ 1 file changed, 2 insertions(+) (limited to 'Shop') 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 -- cgit v1.2.3 From c43051ce55cceeb6d51858e6f5edd6041573c503 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: Sun, 2 Apr 2023 12:45:22 +0800 Subject: Separate NetBanking to its own file --- Shop/Checkout/PersonalInfo.ui.qml | 69 ++------------------ .../PersonalInfo/PaymentMethod/NetBanking.ui.qml | 76 ++++++++++++++++++++++ 2 files changed, 81 insertions(+), 64 deletions(-) create mode 100644 Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml (limited to 'Shop') 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.2.3 From 680f327d67558f97505cd0c0f9c95765f143d763 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: Sun, 2 Apr 2023 13:30:36 +0800 Subject: Separate order summary --- Shop/Checkout.ui.qml | 228 +---------------------- Shop/Checkout/RightSidebar/OrderSummary.ui.qml | 241 +++++++++++++++++++++++++ Shop/Course.ui.qml | 1 - 3 files changed, 244 insertions(+), 226 deletions(-) create mode 100644 Shop/Checkout/RightSidebar/OrderSummary.ui.qml (limited to 'Shop') diff --git a/Shop/Checkout.ui.qml b/Shop/Checkout.ui.qml index 8e0c16d..aaef97c 100644 --- a/Shop/Checkout.ui.qml +++ b/Shop/Checkout.ui.qml @@ -2,20 +2,16 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import Eduport 1.4 -import "../TextField" as TxtFld import "../Label" as Lbl import "../Button" as Btn import "Checkout" +import "Checkout/RightSidebar" Flickable { property alias alert: alert property alias login: login property alias personalInfo: personalInfo - property alias courseItems: courseItems - property alias priceValue: priceValue - property alias discountValue: discountValue - property alias totalValue: totalValue - property alias placeOrder: placeOrder + property alias orderSummary: orderSummary property alias premium: premium contentHeight: body.height @@ -88,230 +84,12 @@ Flickable { Layout.margins: 16 radius: 8 - ColumnLayout { + OrderSummary { id: orderSummary anchors { left: parent.left right: parent.right } - - Lbl.H4 { - text: qsTr("Order Summary") - Layout.fillWidth: true - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 16 - } - - ColumnLayout { - Layout.margins: 16 - spacing: 16 - - Item { - Layout.fillWidth: true - implicitHeight: codeLabel.implicitHeight + codeValue.implicitHeight - - Label { - id: codeLabel - text: qsTr("Transaction code") - font.pointSize: 14 - font.family: "roboto" - anchors.verticalCenter: parent.verticalCenter - } - - Label { - id: codeValue - text: "AB12365E" - font.pointSize: 14 - font.family: "roboto" - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - - RowLayout { - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TxtFld.Input { - placeholderText: qsTr("COUPON CODE") - Layout.fillWidth: true - Layout.fillHeight: true - } - } - } - - Button { - text: qsTr("Apply") - font.pointSize: 14 - font.family: "roboto" - implicitHeight: 56 - contentItem: Text { - color: "#ffffff" - text: "Apply" - padding: 12 - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - } - - background: Rectangle { - color: "#066ac9" - radius: 8 - } - } - } - } - - ListView { - id: courseItems - interactive: false - Layout.fillWidth: true - implicitHeight: count * (width * 400 / 533 + (width < 362 ? 37.5 : 18.75) + 86.5) - model: ListModel { - ListElement { - image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" - title: "Sketch from A to Z: for app designer" - price: "$150" - } - ListElement { - image: "https://eduport.webestica.com/assets/images/courses/4by3/18.jpg" - title: "The Complete Video Production Bootcamp" - price: "$350" - } - } - delegate: Course { - width: courseItems.width - imageSource: image - titleText: title - priceText: price - } - } - - Rectangle { - Layout.fillWidth: true - Layout.topMargin: 16 - Layout.bottomMargin: 16 - height: 1 - border { - width: .5 - color: "#0a000000" - } - } - - ColumnLayout { - - Item { - Layout.fillWidth: true - implicitHeight: priceLabel.implicitHeight - + priceValue.implicitHeight - - Label { - id: priceLabel - text: qsTr("Original Price") - font { - family: Eduport.fwLightFont.family - weight: Eduport.fwLightFont.weight - pointSize: Eduport.h6FontSize - } - anchors.verticalCenter: parent.verticalCenter - } - - Lbl.H6 { - id: priceValue - text: "$500" - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - - Item { - Layout.fillWidth: true - implicitHeight: discountLabel.implicitHeight - + discountValue.implicitHeight - - Label { - id: discountLabel - text: qsTr("Coupon Discount") - font { - family: Eduport.fwLightFont.family - weight: Eduport.fwLightFont.weight - pointSize: Eduport.h6FontSize - } - anchors.verticalCenter: parent.verticalCenter - } - - Lbl.Body { - id: discountValue - text: "-$20" - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - - Item { - Layout.fillWidth: true - implicitHeight: totalLabel.implicitHeight - + totalValue.implicitHeight - - Lbl.H5 { - id: totalLabel - text: qsTr("Total") - anchors.verticalCenter: parent.verticalCenter - } - - Lbl.H5 { - id: totalValue - text: "$480" - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - } - - Btn.Success { - id: placeOrder - Layout.margins: 16 - Layout.fillWidth: true - text: qsTr("Place Order") - implicitHeight: 36 - font { - family: Eduport.bsBtnFont.family - weight: Eduport.bsBtnFont.weight - pointSize: Eduport.bsBtnLgFontSize - } - background: Rectangle { - color: placeOrder.down ? Eduport.bsBtnSuccessActiveBG - : placeOrder.enabled - ? Eduport.bsBtnSuccessBg - : Eduport.bsBtnSuccessDisabledBg - border { - width: Eduport.bsBtnBorderWidth - color: placeOrder.down - ? Eduport.bsBtnSuccessActiveBorderColor - : placeOrder.enabled - ? Eduport.bsBtnSuccessBorderColor - : Eduport.bsBtnSuccessDisabledBorderColor - } - radius: Eduport.bsBtnLgBorderRadius - } - } } } diff --git a/Shop/Checkout/RightSidebar/OrderSummary.ui.qml b/Shop/Checkout/RightSidebar/OrderSummary.ui.qml new file mode 100644 index 0000000..9d59d8b --- /dev/null +++ b/Shop/Checkout/RightSidebar/OrderSummary.ui.qml @@ -0,0 +1,241 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import Eduport 1.4 +import "../../../TextField" +import "../../../Label" +import "../../../Button" +import "../.." + +ColumnLayout { + property alias courseItems: courseItems + property alias priceValue: priceValue + property alias discountValue: discountValue + property alias totalValue: totalValue + property alias placeOrder: placeOrder + + H4 { + text: qsTr("Order Summary") + Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 + } + + ColumnLayout { + Layout.margins: 16 + spacing: 16 + + Item { + Layout.fillWidth: true + implicitHeight: codeLabel.implicitHeight + + codeValue.implicitHeight + + Label { + id: codeLabel + text: qsTr("Transaction code") + font.pointSize: 14 + font.family: "roboto" + anchors.verticalCenter: parent.verticalCenter + } + + Label { + id: codeValue + text: "AB12365E" + font.pointSize: 14 + font.family: "roboto" + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } + } + } + + RowLayout { + + Rectangle { + implicitHeight: 56 + color: "#f5f7f9" + radius: 8 + border.width: 0 + Layout.fillWidth: true + RowLayout { + anchors.fill: parent + Input { + placeholderText: + qsTr("COUPON CODE") + Layout.fillWidth: true + Layout.fillHeight: true + } + } + } + + Button { + text: qsTr("Apply") + font.pointSize: 14 + font.family: "roboto" + implicitHeight: 56 + contentItem: Text { + color: "#ffffff" + text: "Apply" + padding: 12 + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + + background: Rectangle { + color: "#066ac9" + radius: 8 + } + } + } + } + + ListView { + id: courseItems + interactive: false + Layout.fillWidth: true + implicitHeight: count + * (width * 400 / 533 + + (width < 362 ? 37.5 : 18.75) + + 86.5) + model: ListModel { + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" + title: "Sketch from A to Z: for app designer" + price: "$150" + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/18.jpg" + title: "The Complete Video Production Bootcamp" + price: "$350" + } + } + delegate: Course { + width: courseItems.width + imageSource: image + titleText: title + priceText: price + } + } + + Rectangle { + Layout.fillWidth: true + Layout.topMargin: 16 + Layout.bottomMargin: 16 + height: 1 + border { + width: .5 + color: "#0a000000" + } + } + + ColumnLayout { + + Item { + Layout.fillWidth: true + implicitHeight: priceLabel.implicitHeight + + priceValue.implicitHeight + + Label { + id: priceLabel + text: qsTr("Original Price") + font { + family: Eduport.fwLightFont.family + weight: Eduport.fwLightFont.weight + pointSize: Eduport.h6FontSize + } + anchors.verticalCenter: parent.verticalCenter + } + + H6 { + id: priceValue + text: "$500" + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } + } + } + + Item { + Layout.fillWidth: true + implicitHeight: discountLabel.implicitHeight + + discountValue.implicitHeight + + Label { + id: discountLabel + text: qsTr("Coupon Discount") + font { + family: Eduport.fwLightFont.family + weight: Eduport.fwLightFont.weight + pointSize: Eduport.h6FontSize + } + anchors.verticalCenter: parent.verticalCenter + } + + Body { + id: discountValue + text: "-$20" + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } + } + } + + Item { + Layout.fillWidth: true + implicitHeight: totalLabel.implicitHeight + + totalValue.implicitHeight + + H5 { + id: totalLabel + text: qsTr("Total") + anchors.verticalCenter: parent.verticalCenter + } + + H5 { + id: totalValue + text: "$480" + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } + } + } + } + + Success { + id: placeOrder + Layout.margins: 16 + Layout.fillWidth: true + text: qsTr("Place Order") + implicitHeight: 36 + font { + family: Eduport.bsBtnFont.family + weight: Eduport.bsBtnFont.weight + pointSize: Eduport.bsBtnLgFontSize + } + background: Rectangle { + color: placeOrder.down + ? Eduport.bsBtnSuccessActiveBG + : placeOrder.enabled + ? Eduport.bsBtnSuccessBg + : Eduport.bsBtnSuccessDisabledBg + border { + width: Eduport.bsBtnBorderWidth + color: placeOrder.down + ? Eduport.bsBtnSuccessActiveBorderColor + : placeOrder.enabled + ? Eduport.bsBtnSuccessBorderColor + : Eduport + .bsBtnSuccessDisabledBorderColor + } + radius: Eduport.bsBtnLgBorderRadius + } + } +} diff --git a/Shop/Course.ui.qml b/Shop/Course.ui.qml index b743ee5..502fbab 100644 --- a/Shop/Course.ui.qml +++ b/Shop/Course.ui.qml @@ -69,7 +69,6 @@ ColumnLayout { bottom: parent.bottom } text: priceText - color: "#0cbc87" } } } -- cgit v1.2.3 From fc100ff4832d4e8e8765201176eb0d5c4fedea97 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: Sun, 2 Apr 2023 13:45:16 +0800 Subject: Fix most of remaining checkout colours --- Shop/Checkout.ui.qml | 1 + Shop/Checkout/RightSidebar/OrderSummary.ui.qml | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 9 deletions(-) (limited to 'Shop') diff --git a/Shop/Checkout.ui.qml b/Shop/Checkout.ui.qml index aaef97c..84e225c 100644 --- a/Shop/Checkout.ui.qml +++ b/Shop/Checkout.ui.qml @@ -83,6 +83,7 @@ Flickable { implicitHeight: orderSummary.height Layout.margins: 16 radius: 8 + color: Eduport.bsCardBg OrderSummary { id: orderSummary diff --git a/Shop/Checkout/RightSidebar/OrderSummary.ui.qml b/Shop/Checkout/RightSidebar/OrderSummary.ui.qml index 9d59d8b..7564106 100644 --- a/Shop/Checkout/RightSidebar/OrderSummary.ui.qml +++ b/Shop/Checkout/RightSidebar/OrderSummary.ui.qml @@ -31,19 +31,20 @@ ColumnLayout { implicitHeight: codeLabel.implicitHeight + codeValue.implicitHeight - Label { + Body { id: codeLabel text: qsTr("Transaction code") - font.pointSize: 14 - font.family: "roboto" anchors.verticalCenter: parent.verticalCenter } - Label { + H6 { id: codeValue text: "AB12365E" - font.pointSize: 14 - font.family: "roboto" + font { + family: Eduport.fwLightFont.family + weight: Eduport.fwLightFont.weight + pointSize: Eduport.h6FontSize + } anchors { right: parent.right verticalCenter: parent.verticalCenter @@ -138,9 +139,9 @@ ColumnLayout { Item { Layout.fillWidth: true implicitHeight: priceLabel.implicitHeight - + priceValue.implicitHeight + + priceValue.implicitHeight - Label { + H6 { id: priceLabel text: qsTr("Original Price") font { @@ -166,7 +167,7 @@ ColumnLayout { implicitHeight: discountLabel.implicitHeight + discountValue.implicitHeight - Label { + H6 { id: discountLabel text: qsTr("Coupon Discount") font { -- cgit v1.2.3