From fced24346e7f90fd72d9e204ea2ca83c966bd1d7 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Thu, 16 Mar 2023 17:41:31 +0700 Subject: add icon table, star, schedule --- Material/svg/filled/schedule.svg | 1 + Material/svg/filled/star.svg | 1 + Material/svg/filled/table.svg | 1 + Material/svg/outlined/schedule.svg | 1 + Material/svg/outlined/star.svg | 1 + Material/svg/outlined/table.svg | 1 + 6 files changed, 6 insertions(+) create mode 100644 Material/svg/filled/schedule.svg create mode 100644 Material/svg/filled/star.svg create mode 100644 Material/svg/filled/table.svg create mode 100644 Material/svg/outlined/schedule.svg create mode 100644 Material/svg/outlined/star.svg create mode 100644 Material/svg/outlined/table.svg diff --git a/Material/svg/filled/schedule.svg b/Material/svg/filled/schedule.svg new file mode 100644 index 0000000..e4f2d50 --- /dev/null +++ b/Material/svg/filled/schedule.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Material/svg/filled/star.svg b/Material/svg/filled/star.svg new file mode 100644 index 0000000..baf7068 --- /dev/null +++ b/Material/svg/filled/star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Material/svg/filled/table.svg b/Material/svg/filled/table.svg new file mode 100644 index 0000000..ac2ca77 --- /dev/null +++ b/Material/svg/filled/table.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Material/svg/outlined/schedule.svg b/Material/svg/outlined/schedule.svg new file mode 100644 index 0000000..c38ec66 --- /dev/null +++ b/Material/svg/outlined/schedule.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Material/svg/outlined/star.svg b/Material/svg/outlined/star.svg new file mode 100644 index 0000000..5f18cb8 --- /dev/null +++ b/Material/svg/outlined/star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Material/svg/outlined/table.svg b/Material/svg/outlined/table.svg new file mode 100644 index 0000000..cb51f49 --- /dev/null +++ b/Material/svg/outlined/table.svg @@ -0,0 +1 @@ + \ No newline at end of file -- cgit v1.2.3 From 5184d3c56a3e17f029e884aca99c9c56f0cede88 Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Thu, 16 Mar 2023 17:43:25 +0700 Subject: add checkable to rating, favorite and add cardFooter --- CardItemGrid.ui.qml | 142 ++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 131 insertions(+), 11 deletions(-) diff --git a/CardItemGrid.ui.qml b/CardItemGrid.ui.qml index 56dae24..1b82fbe 100644 --- a/CardItemGrid.ui.qml +++ b/CardItemGrid.ui.qml @@ -16,10 +16,6 @@ Item { Rectangle { id: cardItem anchors.fill: parent - anchors.rightMargin: 16 - anchors.leftMargin: 16 - anchors.bottomMargin: 16 - anchors.topMargin: 16 Layout.minimumWidth: 300 Layout.minimumHeight: 475 radius: 8 @@ -95,6 +91,7 @@ Item { height: 24 text: qsTr("Button") anchors.right: parent.right + checkable: true anchors.rightMargin: 0 padding: 0 rightPadding: 0 @@ -107,7 +104,7 @@ Item { Connections { target: favorite - onClicked: item1.state = "favorite pressed" + onStateChanged: favorite.state = "favorite checked" } } } @@ -115,7 +112,7 @@ Item { Label { id: cardTitle - color: "#24292d" + color: "#000000" text: qsTr("Course title") wrapMode: Text.Wrap Layout.fillWidth: true @@ -126,22 +123,145 @@ Item { Layout.rightMargin: 20 Layout.leftMargin: 20 } + + RowLayout { + id: ratingStar + Layout.topMargin: 0 + spacing: 8 + Layout.fillWidth: false + Layout.margins: 20 + Layout.rightMargin: 20 + Layout.leftMargin: 20 + + Button { + id: star + padding: 0 + rightPadding: 0 + leftPadding: 0 + bottomPadding: 0 + topPadding: 0 + icon.color: "#80000000" + flat: true + icon.source: "Material/svg/outlined/star.svg" + autoRepeat: false + checkable: true + display: AbstractButton.IconOnly + Layout.maximumHeight: 20 + Layout.maximumWidth: 20 + Layout.minimumHeight: 20 + Layout.minimumWidth: 20 + Layout.preferredHeight: 20 + Layout.preferredWidth: 20 + + Connections { + target: star + onStateChanged: star.state = "star checked" + } + } + Label { + id: listInlineItemRating + color: "#000000" + text: "4.0/5/0" + font.pointSize: 14 + font.family: "Roboto" + Layout.fillWidth: false + } + } + + ColumnLayout { + id: cardFooter + spacing: 8 + Rectangle { + id: cardFooterBorder + color: "#dde0e3" + border.color: "#dde0e3" + border.width: 0 + Layout.rightMargin: 20 + Layout.leftMargin: 20 + Layout.preferredHeight: 1 + Layout.minimumHeight: 1 + Layout.fillWidth: true + } + + RowLayout { + id: cardFooterContent + spacing: 8 + Layout.margins: 20 + Layout.rightMargin: 20 + Layout.leftMargin: 20 + + RowLayout { + id: cardFooterTimer + Layout.fillWidth: true + spacing: 8 + Image { + id: timerIcon + source: "Material/svg/outlined/schedule.svg" + sourceSize.height: 16 + sourceSize.width: 16 + ColorOverlay { + anchors.fill: timerIcon + source: timerIcon + color: "#d6293e" + } + } + + Label { + color: "#000000" + text: "12h 56m" + font.family: "Roboto" + font.pointSize: 14 + font.styleName: "Regular" + } + } + + RowLayout { + id: cardFooterLecturers + Layout.fillWidth: true + spacing: 8 + Image { + id: lecturersIcon + source: "Material/svg/outlined/table.svg" + sourceSize.height: 16 + sourceSize.width: 16 + ColorOverlay { + anchors.fill: lecturersIcon + source: lecturersIcon + color: "#fd7e14" + } + } + + Label { + color: "#000000" + text: "12h 56m" + font.family: "Roboto" + font.pointSize: 14 + font.styleName: "Regular" + } + } + } + } } } states: [ State { - name: "favorite pressed" - when: favorite.pressed + name: "favorite checked" + when: favorite.checked PropertyChanges { target: favorite icon.color: "#d6293e" - icon.source: "Font-Awesome/svgs/solid/heart.svg" + icon.source: "Material/svg/filled/heart.svg" } + }, + State { + name: "rating checked" + when: star.checked PropertyChanges { - target: favorite - layer.enabled: true + target: star + icon.color: "#f7c32e" + icon.source: "Material/svg/filled/star.svg" } } ] -- cgit v1.2.3 From 2c7dd7659c9d3a9106d37bcf3124103ca8261d1b Mon Sep 17 00:00:00 2001 From: Anatasof Wirapraja Date: Thu, 16 Mar 2023 19:03:27 +0700 Subject: add `shop/cart/cartTotal.ui.qml` --- shop/cart/CartTotal.ui.qml | 148 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 shop/cart/CartTotal.ui.qml diff --git a/shop/cart/CartTotal.ui.qml b/shop/cart/CartTotal.ui.qml new file mode 100644 index 0000000..65d6873 --- /dev/null +++ b/shop/cart/CartTotal.ui.qml @@ -0,0 +1,148 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 + +Item { + id: cartTotal + DropShadow { + color: "#4d000000" + source: cartTotalCard + verticalOffset: 4 + radius: 40 + samples: 81 + anchors.fill: cartTotalCard + } + Rectangle { + id: cartTotalCard + radius: 8 + anchors.fill: parent + ColumnLayout { + id: cardBody + anchors.fill: parent + spacing: 16 + + Label { + id: title + color: "#000000" + text: qsTr("Cart total") + Layout.rightMargin: 20 + Layout.leftMargin: 20 + Layout.topMargin: 20 + Layout.margins: 8 + Layout.fillHeight: false + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.fillWidth: true + font.pointSize: 22 + font.styleName: "Medium" + font.family: "Roboto" + } + + RowLayout { + id: price + Layout.rightMargin: 20 + Layout.leftMargin: 20 + Layout.bottomMargin: 0 + Layout.fillHeight: true + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.fillWidth: true + Label { + color: "#000000" + text: qsTr("Original price") + Layout.fillHeight: false + font.family: "Roboto" + font.pointSize: 14 + Layout.fillWidth: true + } + Label { + color: "#000000" + text: qsTr("$500") + horizontalAlignment: Text.AlignRight + Layout.fillHeight: false + font.weight: Font.Medium + font.pointSize: 14 + Layout.fillWidth: true + } + } + + RowLayout { + id: discount + Layout.rightMargin: 20 + Layout.leftMargin: 20 + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.fillWidth: true + Label { + color: "#000000" + text: qsTr("Coupon discount") + Layout.fillHeight: false + Layout.fillWidth: true + font.family: "Roboto" + font.pointSize: 14 + } + Label { + color: "#000000" + text: qsTr("-$500") + horizontalAlignment: Text.AlignRight + Layout.fillHeight: false + Layout.fillWidth: true + font.weight: Font.Medium + } + } + + RowLayout { + id: total + Layout.rightMargin: 20 + Layout.leftMargin: 20 + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.fillWidth: true + Label { + color: "#000000" + text: qsTr("Total") + Layout.fillHeight: false + font.family: "Roboto" + font.styleName: "Medium" + font.pointSize: 22 + Layout.fillWidth: true + } + Label { + color: "#000000" + text: qsTr("$480") + horizontalAlignment: Text.AlignRight + Layout.fillHeight: false + font.styleName: "Medium" + font.pointSize: 22 + font.family: "Roboto" + Layout.fillWidth: true + } + } + + Button { + id: proceedButton + text: qsTr("Proceed to checkout") + Layout.rightMargin: 20 + Layout.leftMargin: 20 + Layout.fillHeight: false + font.weight: Font.Medium + font.pointSize: 14 + font.family: "Roboto" + Layout.fillWidth: true + flat: false + display: AbstractButton.TextOnly + } + + Label { + id: consent + color: "#80000000" + text: "By completing your purchase, you agree to these Terms of Service" + wrapMode: Text.Wrap + Layout.bottomMargin: 20 + Layout.rightMargin: 20 + Layout.leftMargin: 20 + Layout.fillHeight: false + Layout.fillWidth: true + font.pointSize: 12 + font.family: "Roboto" + } + } + } +} -- cgit v1.2.3