From 55dfd05eab43247603e7f5b32b35f94ec8916fbf 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, 22 Mar 2023 15:03:34 +0800 Subject: Checkout is moved to Shop --- Checkout.ui.qml | 737 --------------------------------------------------- CourseItem.ui.qml | 99 ------- Shop.qrc | 6 + Shop/Checkout.ui.qml | 729 ++++++++++++++++++++++++++++++++++++++++++++++++++ Shop/Course.ui.qml | 77 ++++++ 5 files changed, 812 insertions(+), 836 deletions(-) delete mode 100644 Checkout.ui.qml delete mode 100644 CourseItem.ui.qml create mode 100644 Shop.qrc create mode 100644 Shop/Checkout.ui.qml create mode 100644 Shop/Course.ui.qml diff --git a/Checkout.ui.qml b/Checkout.ui.qml deleted file mode 100644 index 16c0eee..0000000 --- a/Checkout.ui.qml +++ /dev/null @@ -1,737 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -Flickable { - property alias checkoutAlert: alert - property alias checkoutLogin: login - property alias checkoutName: name - property alias checkoutEmail: email - property alias checkoutMobile: mobile - property alias checkoutCountry: country - property alias checkoutState: province - property alias checkoutPostal: postal - property alias checkoutAddress: address - property alias checkoutBanks: banks - property alias courseItems: courseItems - property alias priceValue: priceValue - property alias discountValue: discountValue - property alias checkoutTotalValue: totalValue - property alias checkoutPlaceOrder: placeOrder - property alias checkoutPremium: premium - contentHeight: body.height - - ColumnLayout { - id: body - anchors { - top: parent.top - left: parent.left - right: parent.right - } - - GridLayout { - columns: width < 1200 ? 1 : 2 - rows: width < 1200 ? 2 : 1 - columnSpacing: 0 - rowSpacing: 0 - Layout.fillWidth: true - - ColumnLayout { - Layout.maximumWidth: body.width < 1200 - ? body.width : body.width * 2 / 3 - - RowLayout { - id: alert - Layout.alignment: Qt.AlignHCenter - - Label { - text: qsTr("Already have an account?") - font.pointSize: 15 - } - - Text { - id: login - text: "" + qsTr( - "Log in") + "" - font.pointSize: 15 - font.underline: false - } - } - - Rectangle { - Layout.fillWidth: true - implicitHeight: personal.height - Layout.margins: 16 - radius: 8 - ColumnLayout { - id: personal - anchors { - left: parent.left - right: parent.right - } - - Label { - text: qsTr("Personal Details") - font.pointSize: 22 - font.family: "roboto" - Layout.fillWidth: true - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 16 - } - - GridLayout { - Layout.margins: 16 - columns: width < 768 ? 1 : 2 - rows: width < 768 ? 4 : 7 - columnSpacing: 0 - rowSpacing: 16 - - ColumnLayout { - - Label { - text: qsTr("Your name *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: name - placeholderText: qsTr("Name") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Email address *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: email - placeholderText: qsTr("Email") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Mobile number *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: mobile - placeholderText: qsTr("Mobile number") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Select country *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: country - placeholderText: qsTr("Select country") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Select state *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: province - placeholderText: qsTr( - "Select state") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Postal code *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: postal - placeholderText: qsTr("PIN code") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Address *") - font.pointSize: 12 - font.family: "roboto" - Layout.fillWidth: true - } - - Rectangle { - implicitHeight: 56 - color: "#f5f7f9" - radius: 8 - border.width: 0 - Layout.fillWidth: true - RowLayout { - anchors.fill: parent - TextField { - id: address - placeholderText: qsTr("Address") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - } - } - - ColumnLayout { - - Label { - text: qsTr("Payment method") - font.pointSize: 22 - font.family: "roboto" - 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 - } - Label { - text: qsTr("Credit or Debit Card") - font.pointSize: 16 - font.family: "roboto" - 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 - } - - Label { - text: qsTr("Pay with Net Banking") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 16 - } - - ColumnLayout { - Layout.margins: 16 - Label { - text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.") - font.pointSize: 14 - font.family: "roboto" - wrapMode: Text.Wrap - Layout.fillWidth: true - } - - Label { - text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.") - font.pointSize: 14 - font.family: "roboto" - wrapMode: Text.Wrap - 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.pointSize: 16 - font.family: "roboto" - } - } - background: Rectangle { - radius: 8 - implicitHeight: 36 - implicitWidth: 200 - color: "#f5f7f9" - } - } - } - } - } - } - } - } - } - } - - GridLayout { - columns: width < 786 ? 1 : 2 - rows: width < 786 ? 2 : 1 - columnSpacing: 0 - rowSpacing: 0 - Layout.alignment: Qt.AlignTop - - Rectangle { - Layout.fillWidth: true - implicitHeight: orderSummary.height - Layout.margins: 16 - radius: 8 - - ColumnLayout { - id: orderSummary - anchors { - left: parent.left - right: parent.right - } - Label { - text: qsTr("Order Summary") - font.pointSize: 22 - font.family: "roboto" - 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 - TextField { - placeholderText: qsTr("COUPON CODE") - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - Layout.fillHeight: true - background: Rectangle { - color: "transparent" - } - } - } - } - - 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: CourseItem { - 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.pointSize: 15 - anchors.verticalCenter: parent.verticalCenter - } - - Label { - id: priceValue - text: "$500" - font.pointSize: 15 - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - - Item { - Layout.fillWidth: true - implicitHeight: discountLabel.implicitHeight - + discountValue.implicitHeight - - Label { - id: discountLabel - text: qsTr("Coupon Discount") - font.pointSize: 15 - anchors.verticalCenter: parent.verticalCenter - } - - Label { - id: discountValue - text: "-" + "$20" - font.pointSize: 15 - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - - Item { - Layout.fillWidth: true - implicitHeight: totalLabel.implicitHeight - + totalValue.implicitHeight - - Label { - id: totalLabel - text: qsTr("Total") - font.pointSize: 21 - anchors.verticalCenter: parent.verticalCenter - } - - Label { - id: totalValue - text: "$480" - font.pointSize: 21 - anchors { - right: parent.right - verticalCenter: parent.verticalCenter - } - } - } - } - - Button { - id: placeOrder - Layout.margins: 16 - Layout.fillWidth: true - text: qsTr("Place Order") - font.pointSize: 14 - font.family: "roboto" - implicitHeight: 36 - contentItem: Text { - color: "#ffffff" - text: "Place order" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - } - background: Rectangle { - color: "#0cbc87" - radius: 8 - } - } - } - } - - Rectangle { - id: premium - Layout.fillWidth: true - implicitHeight: premiumAdCard.height - radius: 8 - color: "#1d3b53" - Layout.margins: 16 - - ColumnLayout { - id: premiumAdCard - anchors { - left: parent.left - right: parent.right - } - Layout.margins: 16 - - Label { - text: qsTr("Access 25K Online courses from 120 institutions, Start today!") - wrapMode: Text.Wrap - font.pointSize: 22 - font.family: "roboto" - color: "#ffffff" - Layout.fillWidth: true - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 16 - } - - Label { - text: qsTr("Here is the description of premium features which will allow users to get benefits and save a lot of money") - font.pointSize: 16 - font.family: "roboto" - color: "#ffffff" - wrapMode: Text.Wrap - Layout.fillWidth: true - Layout.margins: 16 - } - - Button { - text: qsTr("Purchase Premium") - font.pointSize: 14 - Layout.margins: 16 - font.family: "roboto" - implicitHeight: 36 - contentItem: Text { - color: "#000000" - text: "Purchase premium" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - } - background: Rectangle { - color: "#f7c32e" - radius: 8 - } - } - } - } - } - } - } -} diff --git a/CourseItem.ui.qml b/CourseItem.ui.qml deleted file mode 100644 index 18bc5d7..0000000 --- a/CourseItem.ui.qml +++ /dev/null @@ -1,99 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 -import QtGraphicalEffects 1.15 - -ColumnLayout { - property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" - property string titleText: "Sketch from A to Z: for app designer" - property string priceText: "$150" - readonly property bool doesntEmbed: Qt.platform.os === "android" - || Qt.platform.os === "linux" - || Qt.platform.os === "osx" - || Qt.platform.os === "unix" - || Qt.platform.os === "windows" - - FontLoader { - id: heebo - source: "Heebo/Heebo-Bold.ttf" - } - - FontLoader { - id: regular - source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf" - } - - Rectangle { - Layout.fillWidth: true - Layout.topMargin: 16 - Layout.bottomMargin: 16 - height: 1 - border { - width: .5 - color: "#0a000000" - } - } - - GridLayout { - Layout.topMargin: -16 - rows: width < 576 ? 2 : 1 - columns: width < 576 ? 1 : 2 - - Rectangle { - id: rectangle - Layout.topMargin: 16 - Layout.fillWidth: true - implicitHeight: courseItemImage.height - radius: 5.2 - - Image { - id: courseItemImage - anchors { - left: parent.left - right: parent.right - } - source: imageSource - fillMode: Image.PreserveAspectFit - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: courseItemImage.width - height: courseItemImage.height - radius: 5.2 - } - } - } - } - - ColumnLayout { - Layout.topMargin: 16 - - Label { - Layout.fillWidth: true - text: titleText - font { - family: heebo.name - pointSize: 15 - } - } - - Item { - Layout.fillWidth: true - Layout.topMargin: 16 - Label { - anchors { - top: parent.top - left: parent.left - bottom: parent.bottom - } - text: priceText - color: "#0cbc87" - font { - family: doesntEmbed ? "Roboto" : regular.name - pointSize: 15 - } - } - } - } - } -} diff --git a/Shop.qrc b/Shop.qrc new file mode 100644 index 0000000..9dbea28 --- /dev/null +++ b/Shop.qrc @@ -0,0 +1,6 @@ + + + Shop/Course.ui.qml + Shop/Checkout.ui.qml + + diff --git a/Shop/Checkout.ui.qml b/Shop/Checkout.ui.qml new file mode 100644 index 0000000..ee58076 --- /dev/null +++ b/Shop/Checkout.ui.qml @@ -0,0 +1,729 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import Bootstrap 5.3 +import Eduport 1.4 +import "../Label" as Lbl + +Flickable { + property alias checkoutAlert: alert + property alias checkoutLogin: login + property alias checkoutName: name + property alias checkoutEmail: email + property alias checkoutMobile: mobile + property alias checkoutCountry: country + property alias checkoutState: province + property alias checkoutPostal: postal + property alias checkoutAddress: address + property alias checkoutBanks: banks + property alias courseItems: courseItems + property alias priceValue: priceValue + property alias discountValue: discountValue + property alias checkoutTotalValue: totalValue + property alias checkoutPlaceOrder: placeOrder + property alias checkoutPremium: premium + contentHeight: body.height + + ColumnLayout { + id: body + anchors { + top: parent.top + left: parent.left + right: parent.right + } + + GridLayout { + columns: width < 1200 ? 1 : 2 + rows: width < 1200 ? 2 : 1 + columnSpacing: 0 + rowSpacing: 0 + Layout.fillWidth: true + + ColumnLayout { + Layout.maximumWidth: body.width < 1200 + ? body.width : body.width * 2 / 3 + + RowLayout { + id: alert + Layout.alignment: Qt.AlignHCenter + + Lbl.Body { + text: qsTr("Already have an account?") + } + + Text { + id: login + text: "" + qsTr("Log in") + "" + font { + family: Bootstrap.bodyFont.family + weight: Bootstrap.bodyFont.weight + pointSize: Bootstrap.bodyFont.pointSize + underline: false + } + } + } + + Rectangle { + Layout.fillWidth: true + implicitHeight: personal.height + Layout.margins: 16 + radius: 8 + ColumnLayout { + id: personal + anchors { + left: parent.left + right: parent.right + } + + Lbl.Hx { + text: qsTr("Personal Details") + font.pointSize: 20.1 + + .00075 + * parent.width + 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 + TextField { + id: name + placeholderText: qsTr("Name") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + 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 + TextField { + id: email + placeholderText: qsTr("Email") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + 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 + TextField { + id: mobile + placeholderText: qsTr("Mobile number") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + 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 + TextField { + id: country + placeholderText: qsTr("Select country") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + 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 + TextField { + id: province + placeholderText: qsTr( + "Select state") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + 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 + TextField { + id: postal + placeholderText: qsTr("PIN code") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + + 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 + TextField { + id: address + placeholderText: qsTr("Address") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + } + } + + ColumnLayout { + + Lbl.Hx { + text: qsTr("Payment method") + font.pointSize: 20.1 + .00075 * parent.width + 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.") + wrapMode: Text.Wrap + Layout.fillWidth: true + } + + Lbl.Body { + text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.") + wrapMode: Text.Wrap + 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: Bootstrap.bodyFont.family + weight: Bootstrap.bodyFont.weight + pointSize: Bootstrap.bodyFont.pointSize + } + } + } + background: Rectangle { + radius: 8 + implicitHeight: 36 + implicitWidth: 200 + color: "#f5f7f9" + } + } + } + } + } + } + } + } + } + } + + GridLayout { + columns: width < 786 ? 1 : 2 + rows: width < 786 ? 2 : 1 + columnSpacing: 0 + rowSpacing: 0 + Layout.alignment: Qt.AlignTop + + Rectangle { + Layout.fillWidth: true + implicitHeight: orderSummary.height + Layout.margins: 16 + radius: 8 + + ColumnLayout { + id: orderSummary + anchors { + left: parent.left + right: parent.right + } + Lbl.Hx { + text: qsTr("Order Summary") + font.pointSize: 20.625 + + .0046875 + * parent.width + 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 + TextField { + placeholderText: qsTr("COUPON CODE") + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + Layout.fillHeight: true + background: Rectangle { + color: "transparent" + } + } + } + } + + 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.Hx { + 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.Hx { + id: totalLabel + text: qsTr("Total") + font.pointSize: 20.1 + .00075 * parent.width + anchors.verticalCenter: parent.verticalCenter + } + + Lbl.Hx { + id: totalValue + text: "$480" + font.pointSize: 20.1 + .00075 * parent.width + anchors { + right: parent.right + verticalCenter: parent.verticalCenter + } + } + } + } + + Button { + id: placeOrder + Layout.margins: 16 + Layout.fillWidth: true + text: qsTr("Place Order") + font: Bootstrap.btnFont + implicitHeight: 36 + contentItem: Text { + text: placeOrder.text + font: placeOrder.font + color: "#ffffff" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + background: Rectangle { + color: "#0cbc87" + radius: 8 + } + } + } + } + + Rectangle { + id: premium + Layout.fillWidth: true + implicitHeight: premiumAdCard.height + radius: 8 + color: "#1d3b53" + Layout.margins: 16 + + ColumnLayout { + id: premiumAdCard + anchors { + left: parent.left + right: parent.right + } + Layout.margins: 16 + + Label { + text: qsTr("Access 25K Online courses from 120 institutions, Start today!") + wrapMode: Text.Wrap + font.pointSize: 22 + font.family: "roboto" + color: "#ffffff" + Layout.fillWidth: true + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 16 + } + + Label { + text: qsTr("Here is the description of premium features which will allow users to get benefits and save a lot of money") + font.pointSize: 16 + font.family: "roboto" + color: "#ffffff" + wrapMode: Text.Wrap + Layout.fillWidth: true + Layout.margins: 16 + } + + Button { + text: qsTr("Purchase Premium") + font.pointSize: 14 + Layout.margins: 16 + font.family: "roboto" + implicitHeight: 36 + contentItem: Text { + color: "#000000" + text: "Purchase premium" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + background: Rectangle { + color: "#f7c32e" + radius: 8 + } + } + } + } + } + } + } +} diff --git a/Shop/Course.ui.qml b/Shop/Course.ui.qml new file mode 100644 index 0000000..5409de9 --- /dev/null +++ b/Shop/Course.ui.qml @@ -0,0 +1,77 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 +import "../Label" as Lbl + +ColumnLayout { + property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" + property string titleText: "Sketch from A to Z: for app designer" + property string priceText: "$150" + + Rectangle { + Layout.fillWidth: true + Layout.topMargin: 16 + Layout.bottomMargin: 16 + height: 1 + border { + width: .5 + color: "#0a000000" + } + } + + GridLayout { + Layout.topMargin: -16 + rows: width < 576 ? 2 : 1 + columns: width < 576 ? 1 : 2 + + Rectangle { + id: rectangle + Layout.topMargin: 16 + Layout.fillWidth: true + implicitHeight: courseItemImage.height + radius: 5.2 + + Image { + id: courseItemImage + anchors { + left: parent.left + right: parent.right + } + source: imageSource + fillMode: Image.PreserveAspectFit + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: courseItemImage.width + height: courseItemImage.height + radius: 5.2 + } + } + } + } + + ColumnLayout { + Layout.topMargin: 16 + + Lbl.Hx { + Layout.fillWidth: true + text: titleText + } + + Item { + Layout.fillWidth: true + Layout.topMargin: 16 + Lbl.Body { + anchors { + top: parent.top + left: parent.left + bottom: parent.bottom + } + text: priceText + color: "#0cbc87" + } + } + } + } +} -- cgit v1.2.3