summaryrefslogtreecommitdiff
path: root/Shop
diff options
context:
space:
mode:
authorꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ <erik@darapsa.co.id>2023-04-02 13:30:36 +0800
committerꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ <erik@darapsa.co.id>2023-04-02 13:30:36 +0800
commit680f327d67558f97505cd0c0f9c95765f143d763 (patch)
tree6ead5a5b831d83223f55611b688382591f64d9a7 /Shop
parentc43051ce55cceeb6d51858e6f5edd6041573c503 (diff)
Separate order summary
Diffstat (limited to 'Shop')
-rw-r--r--Shop/Checkout.ui.qml228
-rw-r--r--Shop/Checkout/RightSidebar/OrderSummary.ui.qml241
-rw-r--r--Shop/Course.ui.qml1
3 files changed, 244 insertions, 226 deletions
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"
}
}
}