summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ <erik@darapsa.co.id>2023-03-09 16:26:44 +0800
committerꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ <erik@darapsa.co.id>2023-03-09 16:26:44 +0800
commita0260d2dc62b5d9a523b97070a9507ee697e3624 (patch)
treed47b76086cad343f65acb888d4ee1eb4d2830f87
parentbfd9c768da2a91518b0406111aa4845740d76354 (diff)
Checkout course items
-rw-r--r--Checkout.ui.qml35
-rw-r--r--CourseItem.ui.qml96
2 files changed, 130 insertions, 1 deletions
diff --git a/Checkout.ui.qml b/Checkout.ui.qml
index 05a32ba..4e99c3e 100644
--- a/Checkout.ui.qml
+++ b/Checkout.ui.qml
@@ -535,8 +535,41 @@ Flickable {
}
}
+ 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
+ }
+ }
+
+ Rectangle {
+ Layout.fillWidth: true
+ Layout.topMargin: 16
+ Layout.bottomMargin: 16
+ height: 1
+ border {
+ width: .5
+ color: "#0a000000"
+ }
+ }
+
ColumnLayout {
- Layout.margins: 16
+
Item {
Layout.fillWidth: true
implicitHeight: priceLabel.implicitHeight
diff --git a/CourseItem.ui.qml b/CourseItem.ui.qml
new file mode 100644
index 0000000..502803e
--- /dev/null
+++ b/CourseItem.ui.qml
@@ -0,0 +1,96 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+
+ColumnLayout {
+ 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: image
+ 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: title
+ 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: price
+ color: "#0cbc87"
+ font {
+ family: doesntEmbed ? "Roboto" : regular.name
+ pointSize: 15
+ }
+ }
+ }
+ }
+ }
+}