From 33f09cf2663d4721f37aa59d912d4cc6ef0ea7f6 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: Fri, 31 Mar 2023 19:58:17 +0800 Subject: Fix cart item label width setting --- Header/CartItem.ui.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Header/CartItem.ui.qml b/Header/CartItem.ui.qml index 210254a..d9373bd 100644 --- a/Header/CartItem.ui.qml +++ b/Header/CartItem.ui.qml @@ -51,7 +51,7 @@ ColumnLayout { Lbl.H6 { text: titleText - Layout.maximumWidth: 146 + Layout.fillWidth: true } Button { -- cgit v1.2.3 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.qrc | 1 + Shop/Checkout.ui.qml | 321 +------------------------------------ Shop/Checkout/PersonalInfo.ui.qml | 329 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 335 insertions(+), 316 deletions(-) create mode 100644 Shop/Checkout/PersonalInfo.ui.qml diff --git a/Shop.qrc b/Shop.qrc index 9dbea28..476b0fc 100644 --- a/Shop.qrc +++ b/Shop.qrc @@ -1,6 +1,7 @@ Shop/Course.ui.qml + Shop/Checkout/PersonalInfo.ui.qml Shop/Checkout.ui.qml 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(-) 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(-) 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 ++ imports/Eduport/Eduport.qml | 2 ++ 2 files changed, 4 insertions(+) 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 diff --git a/imports/Eduport/Eduport.qml b/imports/Eduport/Eduport.qml index 0077b7a..ab18b33 100644 --- a/imports/Eduport/Eduport.qml +++ b/imports/Eduport/Eduport.qml @@ -40,6 +40,8 @@ QtObject { weight: Font.Normal }) + property color bsAccordionBg: bsBodyBg + readonly property real bsBadgeFontSize: 13.6 property color bsBodyColor: mode ? "#a1a1a8" : "#747579" -- 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.qrc | 1 + Shop/Checkout/PersonalInfo.ui.qml | 69 ++------------------ .../PersonalInfo/PaymentMethod/NetBanking.ui.qml | 76 ++++++++++++++++++++++ 3 files changed, 82 insertions(+), 64 deletions(-) create mode 100644 Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml diff --git a/Shop.qrc b/Shop.qrc index 476b0fc..83a9f96 100644 --- a/Shop.qrc +++ b/Shop.qrc @@ -1,6 +1,7 @@ Shop/Course.ui.qml + Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml Shop/Checkout/PersonalInfo.ui.qml Shop/Checkout.ui.qml 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 --- OrderSummary.ui.qml | 89 --------- Shop.qrc | 1 + Shop/Checkout.ui.qml | 228 +---------------------- Shop/Checkout/RightSidebar/OrderSummary.ui.qml | 241 +++++++++++++++++++++++++ Shop/Course.ui.qml | 1 - 5 files changed, 245 insertions(+), 315 deletions(-) delete mode 100644 OrderSummary.ui.qml create mode 100644 Shop/Checkout/RightSidebar/OrderSummary.ui.qml diff --git a/OrderSummary.ui.qml b/OrderSummary.ui.qml deleted file mode 100644 index a877916..0000000 --- a/OrderSummary.ui.qml +++ /dev/null @@ -1,89 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -Rectangle { - color: "#ffffff" - radius: 16 - - ColumnLayout { - anchors.fill: parent - anchors.margins: 24 - Label { - id: oderSummaryTitle - text: qsTr("Order Summary") - font.family: "Roboto" - font.weight: Font.Medium - font.pointSize: 16 - Layout.fillWidth: true - Layout.alignment: Qt.AlignTop - } - - RowLayout { - Layout.fillWidth: true - Layout.alignment: Qt.AlignTop - Label { - id: transactionLabel - color: "#6c757d" - text: qsTr("Transaction code") - font.family: "Roboto" - font.weight: Font.Medium - font.pointSize: 16 - Layout.fillWidth: true - } - Label { - id: transactionCode - text: qsTr("B0D123X") - horizontalAlignment: Text.AlignRight - font.family: "Roboto" - font.weight: Font.Medium - font.pointSize: 16 - Layout.fillWidth: true - } - } - - Rectangle { - color: "transparent" - radius: 8 - border.width: 1 - border.color: "#4d000000" - Layout.fillWidth: true - implicitHeight: 40 - RowLayout { - anchors.fill: parent - TextField { - id: couponCode - Layout.fillWidth: true - Layout.fillHeight: true - placeholderText: qsTr("Coupon code") - font.pixelSize: 16 - font.family: "roboto" - placeholderTextColor: "#99000000" - background: Rectangle { - color: "transparent" - } - } - Button { - id: couponButton - contentItem: Text { - color: "#ffffff" - text: "Apply" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - rightPadding: 12 - leftPadding: 12 - } - Layout.fillHeight: true - background: Rectangle { - color: "#066ac9" - border.width: 0 - radius: 8 - } - } - } - } - } -} \ No newline at end of file diff --git a/Shop.qrc b/Shop.qrc index 83a9f96..4b785a8 100644 --- a/Shop.qrc +++ b/Shop.qrc @@ -2,6 +2,7 @@ Shop/Course.ui.qml Shop/Checkout/PersonalInfo/PaymentMethod/NetBanking.ui.qml + Shop/Checkout/RightSidebar/OrderSummary.ui.qml Shop/Checkout/PersonalInfo.ui.qml Shop/Checkout.ui.qml 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(-) 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 From b18f44a86757a8feedc977a762a6822cafa0cb19 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 16:46:35 +0800 Subject: Move to be used files to each dir --- CardItemGrid.ui.qml | 269 --------------------- .../TabContents/Curriculum/CourseLecture.ui.qml | 63 +++++ .../Main/TabContents/Reviews/LeaveReview.ui.qml | 98 ++++++++ .../Main/TabContents/Reviews/ReviewItem.ui.qml | 69 ++++++ .../Content/Sidebar/RecentlyViewedCard.ui.qml | 125 ++++++++++ .../Classic/Content/Sidebar/Video-alt.ui.qml | 169 +++++++++++++ Course/Grid/Card.ui.qml | 269 +++++++++++++++++++++ Course/Grid/FilterBar.ui.qml | 71 ++++++ CourseDetailClassicVideo.ui.qml | 169 ------------- CourseGridFilterbar.ui.qml | 71 ------ CourseLecture.ui.qml | 63 ----- CourseListItem.ui.qml | 67 ----- LeaveReview.ui.qml | 98 -------- RecentlyViewedCard.ui.qml | 125 ---------- ReviewItem.ui.qml | 69 ------ Student/Dashboard/CourseListItem.ui.qml | 67 +++++ 16 files changed, 931 insertions(+), 931 deletions(-) delete mode 100644 CardItemGrid.ui.qml create mode 100644 Course/Detail/Classic/Content/Main/TabContents/Curriculum/CourseLecture.ui.qml create mode 100644 Course/Detail/Classic/Content/Main/TabContents/Reviews/LeaveReview.ui.qml create mode 100644 Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml create mode 100644 Course/Detail/Classic/Content/Sidebar/RecentlyViewedCard.ui.qml create mode 100644 Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml create mode 100644 Course/Grid/Card.ui.qml create mode 100644 Course/Grid/FilterBar.ui.qml delete mode 100644 CourseDetailClassicVideo.ui.qml delete mode 100644 CourseGridFilterbar.ui.qml delete mode 100644 CourseLecture.ui.qml delete mode 100644 CourseListItem.ui.qml delete mode 100644 LeaveReview.ui.qml delete mode 100644 RecentlyViewedCard.ui.qml delete mode 100644 ReviewItem.ui.qml create mode 100644 Student/Dashboard/CourseListItem.ui.qml diff --git a/CardItemGrid.ui.qml b/CardItemGrid.ui.qml deleted file mode 100644 index f6b0206..0000000 --- a/CardItemGrid.ui.qml +++ /dev/null @@ -1,269 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 -import QtGraphicalEffects 1.15 - -Item { - id: item1 - DropShadow { - color: "#4d000000" - source: cardItem - verticalOffset: 4 - radius: 40 - samples: 81 - anchors.fill: cardItem - } - Rectangle { - id: cardItem - anchors.fill: parent - Layout.minimumWidth: 300 - Layout.minimumHeight: 475 - radius: 8 - ColumnLayout { - id: columnLayout - anchors.fill: parent - spacing: 0 - Rectangle { - id: cardItemImage - radius: 8 - Layout.fillHeight: true - Layout.preferredHeight: 255 - Layout.fillWidth: true - Layout.preferredWidth: 300 - Image { - id: cardItemImageSource - source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" - fillMode: Image.PreserveAspectCrop - width: parent.width - height: parent.height - visible: false - } - OpacityMask { - id: cardItemImageMask - anchors.fill: cardItemImage - source: cardItemImageSource - maskSource: cardItemImage - } - - Rectangle { - id: rectangle - width: cardItemImageMask.width - height: 5 - color: "#ffffff" - anchors.bottom: cardItemImageMask.bottom - anchors.bottomMargin: 0 - } - } - ColumnLayout { - id: cardItemBody - Layout.rightMargin: 20 - Layout.leftMargin: 20 - Layout.bottomMargin: 16 - Layout.topMargin: 16 - Layout.fillHeight: true - Layout.fillWidth: true - Item { - id: badgeAndFavorite - height: favorite.height - Layout.fillWidth: true - Label { - id: badge - color: "#0cbc87" - text: "All level" - anchors.left: parent.left - verticalAlignment: Text.AlignVCenter - Layout.fillWidth: false - rightPadding: 6 - leftPadding: 6 - bottomPadding: 4 - topPadding: 4 - font.pointSize: 12 - font.family: "Roboto" - background: Rectangle { - color: "#4d0cbc87" - radius: 8 - } - } - - Button { - id: favorite - width: 24 - height: 24 - text: qsTr("Button") - anchors.right: parent.right - checkable: true - anchors.rightMargin: 0 - padding: 0 - rightPadding: 0 - leftPadding: 0 - bottomPadding: 0 - topPadding: 0 - icon.source: "Material/svg/outlined/heart.svg" - display: AbstractButton.IconOnly - flat: true - - Connections { - target: favorite - onStateChanged: favorite.state = "favorite checked" - } - } - } - } - - Label { - id: cardTitle - color: "#000000" - text: qsTr("Course title") - wrapMode: Text.Wrap - Layout.fillWidth: true - Layout.bottomMargin: 20 - font.styleName: "Medium" - font.pointSize: 21 - font.family: "Roboto" - 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 - width: cardFooterBorder.width - - 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 checked" - when: favorite.checked - - PropertyChanges { - target: favorite - icon.color: "#d6293e" - icon.source: "Material/svg/filled/heart.svg" - } - }, - State { - name: "rating checked" - when: star.checked - - PropertyChanges { - target: star - icon.color: "#f7c32e" - icon.source: "Material/svg/filled/star.svg" - } - } - ] -} diff --git a/Course/Detail/Classic/Content/Main/TabContents/Curriculum/CourseLecture.ui.qml b/Course/Detail/Classic/Content/Main/TabContents/Curriculum/CourseLecture.ui.qml new file mode 100644 index 0000000..8dfbff3 --- /dev/null +++ b/Course/Detail/Classic/Content/Main/TabContents/Curriculum/CourseLecture.ui.qml @@ -0,0 +1,63 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +Rectangle { + width: coursecontent.width + height: coursecontent.height + color: "#fff" + RowLayout { + id: coursecontent + spacing: 8 + Layout.margins: 8 + Button { + id: play + icon.source: "Font-Awesome/svgs/solid/circle-play.svg" + icon.color: "#ffffff" + Layout.margins: 8 + display: AbstractButton.IconOnly + Layout.preferredHeight: 32 + Layout.preferredWidth: 32 + Layout.minimumHeight: 32 + Layout.minimumWidth: 32 + background: Rectangle { + color: play.down ? "#ff2c2c": "#4dff2c2c" + radius: 100 + } + } + Label { + id: coursetitle + Layout.margins: 8 + color: "#000000" + text: "Course title" + font.pointSize: 16 + font.family: "roboto" + verticalAlignment: Text.AlignVCenter + } + Label { + Layout.margins: 8 + id: premiumbadge + color: "#ffffff" + text: "Premium" + font.pointSize: 12 + font.family: "roboto" + verticalAlignment: Text.AlignVCenter + rightPadding: 8 + leftPadding: 8 + padding: 4 + background: Rectangle { + color: "#fd7e14" + radius: 8 + } + } + Label { + Layout.margins: 8 + id: courselength + color: "#4d000000" + text: "11m 12s" + font.pointSize: 16 + font.family: "roboto" + Layout.alignment: Qt.AlignRight | Qt.AlignVCenter + } + } +} diff --git a/Course/Detail/Classic/Content/Main/TabContents/Reviews/LeaveReview.ui.qml b/Course/Detail/Classic/Content/Main/TabContents/Reviews/LeaveReview.ui.qml new file mode 100644 index 0000000..22a102a --- /dev/null +++ b/Course/Detail/Classic/Content/Main/TabContents/Reviews/LeaveReview.ui.qml @@ -0,0 +1,98 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +Column { + spacing: 16 + Layout.fillWidth: true + Label { + color: "#000000" + text: "Leave a review" + font.pointSize: 21 + font.family: "roboto" + font.styleName: "Medium" + Layout.fillWidth: true + } + RowLayout { + Layout.fillWidth: true + TextField { + placeholderTextColor: "#7f000000" + placeholderText: "Full name" + background: Rectangle { + radius: 8 + color: "#f5f7f9" + } + Layout.fillWidth: true + } + TextField { + placeholderTextColor: "#7f000000" + placeholderText: "Email" + background: Rectangle { + radius: 8 + color: "#f5f7f9" + } + Layout.fillWidth: true + } + } + ComboBox { + id: reviewChoices + Layout.fillWidth: true + font.pointSize: 14 + font.family: "roboto" + model: ListModel { + ListElement { + label: "Please choose one" + } + ListElement { + label: "5/5" + } + ListElement { + label: "4/5" + } + ListElement { + label: "3/5" + } + ListElement { + label: "2/5" + } + ListElement { + label: "1/5" + } + } + background: Rectangle{ + radius: 8 + color: "#f5f7f9" + } + } + TextArea { + id: textArea + placeholderText: qsTr("Text Area") + Layout.preferredHeight: 82 + Layout.minimumHeight: 82 + background: Rectangle{ + radius: 8 + color: "#f5f7f9" + } + } + Button { + id: button + text: qsTr("Post a review") + font.pixelSize: 14 + implicitHeight: 36 + Layout.fillWidth: true + contentItem: Text { + color: "#ffffff" + text: "Login" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + + background: Rectangle { + color: button.down ? "#055aab" : "#066ac9" + radius: 8 + } + } +} diff --git a/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml b/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml new file mode 100644 index 0000000..4f7f4a3 --- /dev/null +++ b/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml @@ -0,0 +1,69 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.12 + +Item { + width: reviewItem.width + height: reviewItem.height + RowLayout { + id:reviewItem + spacing: 16 + RowLayout { + id: reviewAvatar + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Rectangle { + id: avatarMask + radius: 100 + Layout.preferredHeight: 82 + Layout.preferredWidth: 82 + Layout.minimumHeight: 82 + Layout.minimumWidth: 82 + Image{ + id: avatarImage + source: "https://eduport.webestica.com/assets/images/avatar/09.jpg" + sourceSize: Qt.size(parent.width, parent.height) + visible: false + } + } + OpacityMask { + anchors.fill: avatarMask + source: avatarImage + maskSource: avatarMask + } + } + ColumnLayout { + id: reviewDetails + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.maximumWidth: 680 + spacing: 8 + + Label { + id: reviewerName + color: "#000000" + text: "Reviewer Name" + font.pointSize: 21 + font.family: "roboto" + Layout.fillWidth: true + } + Label { + id: reviewTimestamp + color: "#4d000000" + text: "2 days ago" + font.pointSize: 14 + font.family: "roboto" + Layout.fillWidth: true + } + Label { + id: reviewText + color: "#4d000000" + text: "Perceived end knowledge certainly day sweetness why cordially. Ask a quick six seven offer see among. Handsome met debating sir dwelling age material. As style lived he worse dried. Offered related so visitors we private removed. Moderate do subjects to distance." + wrapMode: Text.WordWrap + font.pointSize: 16 + font.family: "roboto" + Layout.fillWidth: true + } + } + + } +} \ No newline at end of file diff --git a/Course/Detail/Classic/Content/Sidebar/RecentlyViewedCard.ui.qml b/Course/Detail/Classic/Content/Sidebar/RecentlyViewedCard.ui.qml new file mode 100644 index 0000000..3572dbf --- /dev/null +++ b/Course/Detail/Classic/Content/Sidebar/RecentlyViewedCard.ui.qml @@ -0,0 +1,125 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 + +Rectangle { + id: recentlyViewedCard + Layout.fillWidth: true + implicitHeight: recentlyCardContent.height + color: "#ffffff" + radius: 8 + anchors.margins: 24 + + ColumnLayout { + id: recentlyCardContent + anchors { + left: parent.left + right: parent.right + } + spacing: 16 + Label { + text: qsTr("Recently viewed") + font.pointSize: 22 + font.family: "roboto" + color: "#000000" + Layout.fillWidth: true + Layout.leftMargin: 24 + Layout.topMargin: 24 + Layout.rightMargin: 24 + } + RowLayout { + Layout.fillWidth: true + Layout.fillHeight: true + spacing: 16 + Layout.leftMargin: 24 + Layout.rightMargin: 24 + Rectangle { + color: "#eee" + height: 80 + width: 100 + radius: 8 + } + ColumnLayout { + Layout.fillWidth: true + Layout.fillHeight: true + Label { + text: qsTr("Course title") + font.pointSize: 14 + font.family: "roboto" + font.styleName: "Medium" + color: "#000000" + Layout.fillWidth: true + } + RowLayout { + Layout.fillWidth: true + Layout.fillHeight: true + Label { + text: qsTr("$") + font.pointSize: 14 + font.family: "roboto" + font.styleName: "Medium" + color: "#0cbc87" + Layout.fillWidth: true + } + Label { + text: qsTr("4.5") + horizontalAlignment: Text.AlignRight + font.pointSize: 14 + font.family: "roboto" + font.styleName: "Medium" + color: "#000000" + Layout.fillWidth: true + } + } + } + } + RowLayout { + Layout.fillWidth: true + Layout.fillHeight: true + spacing: 16 + Layout.leftMargin: 24 + Layout.rightMargin: 24 + Layout.bottomMargin: 24 + Rectangle { + color: "#eee" + height: 80 + width: 100 + radius: 8 + } + ColumnLayout { + Layout.fillWidth: true + Layout.fillHeight: true + Label { + text: qsTr("Course title") + font.pointSize: 14 + font.family: "roboto" + font.styleName: "Medium" + color: "#000000" + Layout.fillWidth: true + } + RowLayout { + Layout.fillWidth: true + Layout.fillHeight: true + Label { + text: qsTr("$") + font.pointSize: 14 + font.family: "roboto" + font.styleName: "Medium" + color: "#0cbc87" + Layout.fillWidth: true + } + Label { + text: qsTr("4.5") + horizontalAlignment: Text.AlignRight + font.pointSize: 14 + font.family: "roboto" + font.styleName: "Medium" + color: "#000000" + Layout.fillWidth: true + } + } + } + } + } +} diff --git a/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml b/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml new file mode 100644 index 0000000..f715a94 --- /dev/null +++ b/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml @@ -0,0 +1,169 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 + +Item { + width: 350 + height: 450 + DropShadow { + color: "#4d000000" + source: courseVideoCard + verticalOffset: 4 + radius: 12 + samples: 12 + anchors.fill: courseVideoCard + } + Rectangle { + id: courseVideoCard + radius: 8 + anchors.fill: parent + anchors.rightMargin: 8 + anchors.leftMargin: 8 + anchors.bottomMargin: 8 + anchors.topMargin: 8 + ColumnLayout { + id: courseDetailVideo + anchors.fill: parent + Rectangle { + id: courseVideoThumbnail + radius: 8 + Layout.rightMargin: 8 + Layout.leftMargin: 8 + Layout.bottomMargin: 0 + Layout.topMargin: 8 + Layout.fillHeight: true + Layout.fillWidth: true + Image { + id: courseVideoImage + source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg" + fillMode: Image.PreserveAspectCrop + width: parent.width + height: parent.height + visible: false + } + OpacityMask { + id: courseVideoMask + anchors.fill: courseVideoThumbnail + source: courseVideoImage + maskSource: courseVideoThumbnail + } + ColorOverlay { + anchors.fill: courseVideoMask + source: courseVideoMask + color: "#80000000" + } + Button { + id: playVideoButton + width: 44 + height: 44 + anchors.verticalCenter: parent.verticalCenter + icon.height: 44 + icon.width: 44 + icon.color: "#ffffff" + flat: true + icon.source: "Font-Awesome/svgs/solid/circle-play.svg" + display: AbstractButton.IconOnly + anchors.horizontalCenter: parent.horizontalCenter + } + } + RowLayout { + id: priceAndTime + spacing: 8 + Layout.rightMargin: 16 + Layout.leftMargin: 16 + Layout.topMargin: 8 + Layout.bottomMargin: 4 + Label { + id: publishedPrice + color: "#000000" + text: "$150" + font.weight: Font.Medium + verticalAlignment: Text.AlignVCenter + font.pointSize: 32 + font.family: "Roboto" + } + Label { + id: originalPrice + color: "#80000000" + text: "$150" + font.strikeout: true + font.weight: Font.Medium + verticalAlignment: Text.AlignVCenter + font.pointSize: 16 + font.family: "Roboto" + } + Label { + id: discount + color: "#ffffff" + text: "60% off" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.pointSize: 12 + rightPadding: 8 + leftPadding: 8 + bottomPadding: 4 + topPadding: 4 + font.family: "Roboto" + background: Rectangle { + width: discount.width + height: discount.height + color: "#fd7e14" + radius: 4 + } + } + } + RowLayout { + id: timerContent + Layout.topMargin: 4 + Layout.bottomMargin: 8 + Layout.rightMargin: 16 + Layout.leftMargin: 16 + spacing: 8 + Image { + id: timerIcon + source: "Material/svg/filled/timer.svg" + sourceSize.height: 24 + sourceSize.width: 24 + ColorOverlay { + anchors.fill: timerIcon + source: timerIcon + color: "#d6293e" + } + } + + Label { + color: "#d6293e" + text: "5 days left at this price" + font.family: "Roboto" + font.pointSize: 14 + font.styleName: "Regular" + } + } + RowLayout { + id: cardFooterButton + Layout.topMargin: 8 + Layout.margins: 16 + spacing: 8 + + Button { + id: freeTrialButton + text: qsTr("Free trial") + font.styleName: "Medium" + font.pointSize: 14 + font.family: "Roboto" + Layout.fillWidth: true + } + + Button { + id: buyButton + text: qsTr("Buy course") + font.styleName: "Medium" + font.pointSize: 14 + font.family: "Roboto" + Layout.fillWidth: true + } + } + } + } +} \ No newline at end of file diff --git a/Course/Grid/Card.ui.qml b/Course/Grid/Card.ui.qml new file mode 100644 index 0000000..f6b0206 --- /dev/null +++ b/Course/Grid/Card.ui.qml @@ -0,0 +1,269 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 + +Item { + id: item1 + DropShadow { + color: "#4d000000" + source: cardItem + verticalOffset: 4 + radius: 40 + samples: 81 + anchors.fill: cardItem + } + Rectangle { + id: cardItem + anchors.fill: parent + Layout.minimumWidth: 300 + Layout.minimumHeight: 475 + radius: 8 + ColumnLayout { + id: columnLayout + anchors.fill: parent + spacing: 0 + Rectangle { + id: cardItemImage + radius: 8 + Layout.fillHeight: true + Layout.preferredHeight: 255 + Layout.fillWidth: true + Layout.preferredWidth: 300 + Image { + id: cardItemImageSource + source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" + fillMode: Image.PreserveAspectCrop + width: parent.width + height: parent.height + visible: false + } + OpacityMask { + id: cardItemImageMask + anchors.fill: cardItemImage + source: cardItemImageSource + maskSource: cardItemImage + } + + Rectangle { + id: rectangle + width: cardItemImageMask.width + height: 5 + color: "#ffffff" + anchors.bottom: cardItemImageMask.bottom + anchors.bottomMargin: 0 + } + } + ColumnLayout { + id: cardItemBody + Layout.rightMargin: 20 + Layout.leftMargin: 20 + Layout.bottomMargin: 16 + Layout.topMargin: 16 + Layout.fillHeight: true + Layout.fillWidth: true + Item { + id: badgeAndFavorite + height: favorite.height + Layout.fillWidth: true + Label { + id: badge + color: "#0cbc87" + text: "All level" + anchors.left: parent.left + verticalAlignment: Text.AlignVCenter + Layout.fillWidth: false + rightPadding: 6 + leftPadding: 6 + bottomPadding: 4 + topPadding: 4 + font.pointSize: 12 + font.family: "Roboto" + background: Rectangle { + color: "#4d0cbc87" + radius: 8 + } + } + + Button { + id: favorite + width: 24 + height: 24 + text: qsTr("Button") + anchors.right: parent.right + checkable: true + anchors.rightMargin: 0 + padding: 0 + rightPadding: 0 + leftPadding: 0 + bottomPadding: 0 + topPadding: 0 + icon.source: "Material/svg/outlined/heart.svg" + display: AbstractButton.IconOnly + flat: true + + Connections { + target: favorite + onStateChanged: favorite.state = "favorite checked" + } + } + } + } + + Label { + id: cardTitle + color: "#000000" + text: qsTr("Course title") + wrapMode: Text.Wrap + Layout.fillWidth: true + Layout.bottomMargin: 20 + font.styleName: "Medium" + font.pointSize: 21 + font.family: "Roboto" + 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 + width: cardFooterBorder.width + + 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 checked" + when: favorite.checked + + PropertyChanges { + target: favorite + icon.color: "#d6293e" + icon.source: "Material/svg/filled/heart.svg" + } + }, + State { + name: "rating checked" + when: star.checked + + PropertyChanges { + target: star + icon.color: "#f7c32e" + icon.source: "Material/svg/filled/star.svg" + } + } + ] +} diff --git a/Course/Grid/FilterBar.ui.qml b/Course/Grid/FilterBar.ui.qml new file mode 100644 index 0000000..6531261 --- /dev/null +++ b/Course/Grid/FilterBar.ui.qml @@ -0,0 +1,71 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +Rectangle { + id: bgLightBorder + color: "#f5f7f9" + height: filterBarControl.height + width: filterBarControl.width + Layout.maximumHeight: filterBarControl.height + radius: 8 + border.color: "#33000000" + GridLayout { + id: filterBarControl + anchors.fill: parent + rows: 6 + columns: 6 + rowSpacing: 16 + columnSpacing: 16 + flow: GridLayout.LeftToRight + Layout.fillWidth: true + TextField { + id: keywordInput + Layout.fillWidth: true + font.family: "Roboto" + font.pointSize: 16 + Layout.bottomMargin: 24 + Layout.topMargin: 24 + Layout.leftMargin: 24 + placeholderText: "Enter keyword" + } + + ComboBox { + id: categories + Layout.fillWidth: true + font.pointSize: 16 + font.family: "Roboto" + displayText: "Categories" + } + ComboBox { + id: priceLevel + Layout.fillWidth: true + font.pointSize: 16 + font.family: "Roboto" + displayText: "Price level" + } + ComboBox { + id: skillLevel + Layout.fillWidth: true + font.pointSize: 16 + font.family: "Roboto" + displayText: "Skill level" + } + ComboBox { + id: language + Layout.fillWidth: true + font.pointSize: 16 + font.family: "Roboto" + displayText: "Languange" + } + + Button { + id: searchButton + Layout.fillWidth: true + icon.color: "#ffffff" + icon.source: "Material/svg/filled/search.svg" + Layout.rightMargin: 24 + display: AbstractButton.IconOnly + } + } +} diff --git a/CourseDetailClassicVideo.ui.qml b/CourseDetailClassicVideo.ui.qml deleted file mode 100644 index f715a94..0000000 --- a/CourseDetailClassicVideo.ui.qml +++ /dev/null @@ -1,169 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 -import QtGraphicalEffects 1.15 - -Item { - width: 350 - height: 450 - DropShadow { - color: "#4d000000" - source: courseVideoCard - verticalOffset: 4 - radius: 12 - samples: 12 - anchors.fill: courseVideoCard - } - Rectangle { - id: courseVideoCard - radius: 8 - anchors.fill: parent - anchors.rightMargin: 8 - anchors.leftMargin: 8 - anchors.bottomMargin: 8 - anchors.topMargin: 8 - ColumnLayout { - id: courseDetailVideo - anchors.fill: parent - Rectangle { - id: courseVideoThumbnail - radius: 8 - Layout.rightMargin: 8 - Layout.leftMargin: 8 - Layout.bottomMargin: 0 - Layout.topMargin: 8 - Layout.fillHeight: true - Layout.fillWidth: true - Image { - id: courseVideoImage - source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg" - fillMode: Image.PreserveAspectCrop - width: parent.width - height: parent.height - visible: false - } - OpacityMask { - id: courseVideoMask - anchors.fill: courseVideoThumbnail - source: courseVideoImage - maskSource: courseVideoThumbnail - } - ColorOverlay { - anchors.fill: courseVideoMask - source: courseVideoMask - color: "#80000000" - } - Button { - id: playVideoButton - width: 44 - height: 44 - anchors.verticalCenter: parent.verticalCenter - icon.height: 44 - icon.width: 44 - icon.color: "#ffffff" - flat: true - icon.source: "Font-Awesome/svgs/solid/circle-play.svg" - display: AbstractButton.IconOnly - anchors.horizontalCenter: parent.horizontalCenter - } - } - RowLayout { - id: priceAndTime - spacing: 8 - Layout.rightMargin: 16 - Layout.leftMargin: 16 - Layout.topMargin: 8 - Layout.bottomMargin: 4 - Label { - id: publishedPrice - color: "#000000" - text: "$150" - font.weight: Font.Medium - verticalAlignment: Text.AlignVCenter - font.pointSize: 32 - font.family: "Roboto" - } - Label { - id: originalPrice - color: "#80000000" - text: "$150" - font.strikeout: true - font.weight: Font.Medium - verticalAlignment: Text.AlignVCenter - font.pointSize: 16 - font.family: "Roboto" - } - Label { - id: discount - color: "#ffffff" - text: "60% off" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.pointSize: 12 - rightPadding: 8 - leftPadding: 8 - bottomPadding: 4 - topPadding: 4 - font.family: "Roboto" - background: Rectangle { - width: discount.width - height: discount.height - color: "#fd7e14" - radius: 4 - } - } - } - RowLayout { - id: timerContent - Layout.topMargin: 4 - Layout.bottomMargin: 8 - Layout.rightMargin: 16 - Layout.leftMargin: 16 - spacing: 8 - Image { - id: timerIcon - source: "Material/svg/filled/timer.svg" - sourceSize.height: 24 - sourceSize.width: 24 - ColorOverlay { - anchors.fill: timerIcon - source: timerIcon - color: "#d6293e" - } - } - - Label { - color: "#d6293e" - text: "5 days left at this price" - font.family: "Roboto" - font.pointSize: 14 - font.styleName: "Regular" - } - } - RowLayout { - id: cardFooterButton - Layout.topMargin: 8 - Layout.margins: 16 - spacing: 8 - - Button { - id: freeTrialButton - text: qsTr("Free trial") - font.styleName: "Medium" - font.pointSize: 14 - font.family: "Roboto" - Layout.fillWidth: true - } - - Button { - id: buyButton - text: qsTr("Buy course") - font.styleName: "Medium" - font.pointSize: 14 - font.family: "Roboto" - Layout.fillWidth: true - } - } - } - } -} \ No newline at end of file diff --git a/CourseGridFilterbar.ui.qml b/CourseGridFilterbar.ui.qml deleted file mode 100644 index 6531261..0000000 --- a/CourseGridFilterbar.ui.qml +++ /dev/null @@ -1,71 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -Rectangle { - id: bgLightBorder - color: "#f5f7f9" - height: filterBarControl.height - width: filterBarControl.width - Layout.maximumHeight: filterBarControl.height - radius: 8 - border.color: "#33000000" - GridLayout { - id: filterBarControl - anchors.fill: parent - rows: 6 - columns: 6 - rowSpacing: 16 - columnSpacing: 16 - flow: GridLayout.LeftToRight - Layout.fillWidth: true - TextField { - id: keywordInput - Layout.fillWidth: true - font.family: "Roboto" - font.pointSize: 16 - Layout.bottomMargin: 24 - Layout.topMargin: 24 - Layout.leftMargin: 24 - placeholderText: "Enter keyword" - } - - ComboBox { - id: categories - Layout.fillWidth: true - font.pointSize: 16 - font.family: "Roboto" - displayText: "Categories" - } - ComboBox { - id: priceLevel - Layout.fillWidth: true - font.pointSize: 16 - font.family: "Roboto" - displayText: "Price level" - } - ComboBox { - id: skillLevel - Layout.fillWidth: true - font.pointSize: 16 - font.family: "Roboto" - displayText: "Skill level" - } - ComboBox { - id: language - Layout.fillWidth: true - font.pointSize: 16 - font.family: "Roboto" - displayText: "Languange" - } - - Button { - id: searchButton - Layout.fillWidth: true - icon.color: "#ffffff" - icon.source: "Material/svg/filled/search.svg" - Layout.rightMargin: 24 - display: AbstractButton.IconOnly - } - } -} diff --git a/CourseLecture.ui.qml b/CourseLecture.ui.qml deleted file mode 100644 index 8dfbff3..0000000 --- a/CourseLecture.ui.qml +++ /dev/null @@ -1,63 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -Rectangle { - width: coursecontent.width - height: coursecontent.height - color: "#fff" - RowLayout { - id: coursecontent - spacing: 8 - Layout.margins: 8 - Button { - id: play - icon.source: "Font-Awesome/svgs/solid/circle-play.svg" - icon.color: "#ffffff" - Layout.margins: 8 - display: AbstractButton.IconOnly - Layout.preferredHeight: 32 - Layout.preferredWidth: 32 - Layout.minimumHeight: 32 - Layout.minimumWidth: 32 - background: Rectangle { - color: play.down ? "#ff2c2c": "#4dff2c2c" - radius: 100 - } - } - Label { - id: coursetitle - Layout.margins: 8 - color: "#000000" - text: "Course title" - font.pointSize: 16 - font.family: "roboto" - verticalAlignment: Text.AlignVCenter - } - Label { - Layout.margins: 8 - id: premiumbadge - color: "#ffffff" - text: "Premium" - font.pointSize: 12 - font.family: "roboto" - verticalAlignment: Text.AlignVCenter - rightPadding: 8 - leftPadding: 8 - padding: 4 - background: Rectangle { - color: "#fd7e14" - radius: 8 - } - } - Label { - Layout.margins: 8 - id: courselength - color: "#4d000000" - text: "11m 12s" - font.pointSize: 16 - font.family: "roboto" - Layout.alignment: Qt.AlignRight | Qt.AlignVCenter - } - } -} diff --git a/CourseListItem.ui.qml b/CourseListItem.ui.qml deleted file mode 100644 index d21990f..0000000 --- a/CourseListItem.ui.qml +++ /dev/null @@ -1,67 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 -import QtGraphicalEffects 1.12 - -Item { - width:courseData.width - height: courseData.height - RowLayout { - id: courseData - spacing: 16 - Rectangle { - id: courseThumbnail - radius: 8 - Layout.preferredHeight: 72 - Layout.preferredWidth: 100 - Layout.minimumHeight: 72 - Layout.minimumWidth: 100 - Image { - id: courseThumb - source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" - sourceSize: Qt.size(parent.width, parent.height) - visible: false - } - } - OpacityMask{ - anchors.fill: courseThumbnail - source: courseThumb - maskSource: courseThumbnail - } - ColumnLayout{ - id: courseProgressInfo - spacing: 0 - Label{ - id: courseTitle - color: "#000000" - text: "Course name" - font.pointSize: 16 - font.family: "roboto" - font.styleName: "Medium" - Layout.fillWidth: true - } - Label{ - id: courseProgressPercentage - color: "#000000" - text: "80%" - font.pointSize: 16 - font.family: "roboto" - font.styleName: "Medium" - horizontalAlignment: Text.AlignRight - Layout.fillWidth: true - } - ProgressBar { - id: courseProgressBar - value: 0.8 - } - } - Button { - id: courseListActionButton - icon.source: "Material/svg/filled/play_circle_outline.svg" - text: "Continue" - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - } - } -} diff --git a/LeaveReview.ui.qml b/LeaveReview.ui.qml deleted file mode 100644 index 22a102a..0000000 --- a/LeaveReview.ui.qml +++ /dev/null @@ -1,98 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -Column { - spacing: 16 - Layout.fillWidth: true - Label { - color: "#000000" - text: "Leave a review" - font.pointSize: 21 - font.family: "roboto" - font.styleName: "Medium" - Layout.fillWidth: true - } - RowLayout { - Layout.fillWidth: true - TextField { - placeholderTextColor: "#7f000000" - placeholderText: "Full name" - background: Rectangle { - radius: 8 - color: "#f5f7f9" - } - Layout.fillWidth: true - } - TextField { - placeholderTextColor: "#7f000000" - placeholderText: "Email" - background: Rectangle { - radius: 8 - color: "#f5f7f9" - } - Layout.fillWidth: true - } - } - ComboBox { - id: reviewChoices - Layout.fillWidth: true - font.pointSize: 14 - font.family: "roboto" - model: ListModel { - ListElement { - label: "Please choose one" - } - ListElement { - label: "5/5" - } - ListElement { - label: "4/5" - } - ListElement { - label: "3/5" - } - ListElement { - label: "2/5" - } - ListElement { - label: "1/5" - } - } - background: Rectangle{ - radius: 8 - color: "#f5f7f9" - } - } - TextArea { - id: textArea - placeholderText: qsTr("Text Area") - Layout.preferredHeight: 82 - Layout.minimumHeight: 82 - background: Rectangle{ - radius: 8 - color: "#f5f7f9" - } - } - Button { - id: button - text: qsTr("Post a review") - font.pixelSize: 14 - implicitHeight: 36 - Layout.fillWidth: true - contentItem: Text { - color: "#ffffff" - text: "Login" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - font.weight: Font.Medium - font.family: "Roboto" - font.pointSize: 14 - } - - background: Rectangle { - color: button.down ? "#055aab" : "#066ac9" - radius: 8 - } - } -} diff --git a/RecentlyViewedCard.ui.qml b/RecentlyViewedCard.ui.qml deleted file mode 100644 index 3572dbf..0000000 --- a/RecentlyViewedCard.ui.qml +++ /dev/null @@ -1,125 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 -import QtGraphicalEffects 1.15 - -Rectangle { - id: recentlyViewedCard - Layout.fillWidth: true - implicitHeight: recentlyCardContent.height - color: "#ffffff" - radius: 8 - anchors.margins: 24 - - ColumnLayout { - id: recentlyCardContent - anchors { - left: parent.left - right: parent.right - } - spacing: 16 - Label { - text: qsTr("Recently viewed") - font.pointSize: 22 - font.family: "roboto" - color: "#000000" - Layout.fillWidth: true - Layout.leftMargin: 24 - Layout.topMargin: 24 - Layout.rightMargin: 24 - } - RowLayout { - Layout.fillWidth: true - Layout.fillHeight: true - spacing: 16 - Layout.leftMargin: 24 - Layout.rightMargin: 24 - Rectangle { - color: "#eee" - height: 80 - width: 100 - radius: 8 - } - ColumnLayout { - Layout.fillWidth: true - Layout.fillHeight: true - Label { - text: qsTr("Course title") - font.pointSize: 14 - font.family: "roboto" - font.styleName: "Medium" - color: "#000000" - Layout.fillWidth: true - } - RowLayout { - Layout.fillWidth: true - Layout.fillHeight: true - Label { - text: qsTr("$") - font.pointSize: 14 - font.family: "roboto" - font.styleName: "Medium" - color: "#0cbc87" - Layout.fillWidth: true - } - Label { - text: qsTr("4.5") - horizontalAlignment: Text.AlignRight - font.pointSize: 14 - font.family: "roboto" - font.styleName: "Medium" - color: "#000000" - Layout.fillWidth: true - } - } - } - } - RowLayout { - Layout.fillWidth: true - Layout.fillHeight: true - spacing: 16 - Layout.leftMargin: 24 - Layout.rightMargin: 24 - Layout.bottomMargin: 24 - Rectangle { - color: "#eee" - height: 80 - width: 100 - radius: 8 - } - ColumnLayout { - Layout.fillWidth: true - Layout.fillHeight: true - Label { - text: qsTr("Course title") - font.pointSize: 14 - font.family: "roboto" - font.styleName: "Medium" - color: "#000000" - Layout.fillWidth: true - } - RowLayout { - Layout.fillWidth: true - Layout.fillHeight: true - Label { - text: qsTr("$") - font.pointSize: 14 - font.family: "roboto" - font.styleName: "Medium" - color: "#0cbc87" - Layout.fillWidth: true - } - Label { - text: qsTr("4.5") - horizontalAlignment: Text.AlignRight - font.pointSize: 14 - font.family: "roboto" - font.styleName: "Medium" - color: "#000000" - Layout.fillWidth: true - } - } - } - } - } -} diff --git a/ReviewItem.ui.qml b/ReviewItem.ui.qml deleted file mode 100644 index 4f7f4a3..0000000 --- a/ReviewItem.ui.qml +++ /dev/null @@ -1,69 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 -import QtGraphicalEffects 1.12 - -Item { - width: reviewItem.width - height: reviewItem.height - RowLayout { - id:reviewItem - spacing: 16 - RowLayout { - id: reviewAvatar - Layout.alignment: Qt.AlignLeft | Qt.AlignTop - Rectangle { - id: avatarMask - radius: 100 - Layout.preferredHeight: 82 - Layout.preferredWidth: 82 - Layout.minimumHeight: 82 - Layout.minimumWidth: 82 - Image{ - id: avatarImage - source: "https://eduport.webestica.com/assets/images/avatar/09.jpg" - sourceSize: Qt.size(parent.width, parent.height) - visible: false - } - } - OpacityMask { - anchors.fill: avatarMask - source: avatarImage - maskSource: avatarMask - } - } - ColumnLayout { - id: reviewDetails - Layout.alignment: Qt.AlignLeft | Qt.AlignTop - Layout.maximumWidth: 680 - spacing: 8 - - Label { - id: reviewerName - color: "#000000" - text: "Reviewer Name" - font.pointSize: 21 - font.family: "roboto" - Layout.fillWidth: true - } - Label { - id: reviewTimestamp - color: "#4d000000" - text: "2 days ago" - font.pointSize: 14 - font.family: "roboto" - Layout.fillWidth: true - } - Label { - id: reviewText - color: "#4d000000" - text: "Perceived end knowledge certainly day sweetness why cordially. Ask a quick six seven offer see among. Handsome met debating sir dwelling age material. As style lived he worse dried. Offered related so visitors we private removed. Moderate do subjects to distance." - wrapMode: Text.WordWrap - font.pointSize: 16 - font.family: "roboto" - Layout.fillWidth: true - } - } - - } -} \ No newline at end of file diff --git a/Student/Dashboard/CourseListItem.ui.qml b/Student/Dashboard/CourseListItem.ui.qml new file mode 100644 index 0000000..d21990f --- /dev/null +++ b/Student/Dashboard/CourseListItem.ui.qml @@ -0,0 +1,67 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.12 + +Item { + width:courseData.width + height: courseData.height + RowLayout { + id: courseData + spacing: 16 + Rectangle { + id: courseThumbnail + radius: 8 + Layout.preferredHeight: 72 + Layout.preferredWidth: 100 + Layout.minimumHeight: 72 + Layout.minimumWidth: 100 + Image { + id: courseThumb + source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" + sourceSize: Qt.size(parent.width, parent.height) + visible: false + } + } + OpacityMask{ + anchors.fill: courseThumbnail + source: courseThumb + maskSource: courseThumbnail + } + ColumnLayout{ + id: courseProgressInfo + spacing: 0 + Label{ + id: courseTitle + color: "#000000" + text: "Course name" + font.pointSize: 16 + font.family: "roboto" + font.styleName: "Medium" + Layout.fillWidth: true + } + Label{ + id: courseProgressPercentage + color: "#000000" + text: "80%" + font.pointSize: 16 + font.family: "roboto" + font.styleName: "Medium" + horizontalAlignment: Text.AlignRight + Layout.fillWidth: true + } + ProgressBar { + id: courseProgressBar + value: 0.8 + } + } + Button { + id: courseListActionButton + icon.source: "Material/svg/filled/play_circle_outline.svg" + text: "Continue" + font.weight: Font.Medium + font.family: "Roboto" + font.pointSize: 14 + } + } +} -- cgit v1.2.3 From 5b8e2046a6a83af3b709b44f290f5d16de98473a 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 18:12:31 +0800 Subject: Course Grid Minimal draft --- Course/Grid/FilterBar.ui.qml | 71 ----------- Course/Grid/Minimal.ui.qml | 169 +++++++++++++++++++++++++++ Course/Grid/Minimal/FilterBar.ui.qml | 71 +++++++++++ CourseGridMinimal.qrc | 8 ++ Font-Awesome/svgs/solid/magnifying-glass.svg | 1 + 5 files changed, 249 insertions(+), 71 deletions(-) delete mode 100644 Course/Grid/FilterBar.ui.qml create mode 100644 Course/Grid/Minimal.ui.qml create mode 100644 Course/Grid/Minimal/FilterBar.ui.qml create mode 100644 CourseGridMinimal.qrc create mode 100644 Font-Awesome/svgs/solid/magnifying-glass.svg diff --git a/Course/Grid/FilterBar.ui.qml b/Course/Grid/FilterBar.ui.qml deleted file mode 100644 index 6531261..0000000 --- a/Course/Grid/FilterBar.ui.qml +++ /dev/null @@ -1,71 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import QtQuick.Layouts 1.15 - -Rectangle { - id: bgLightBorder - color: "#f5f7f9" - height: filterBarControl.height - width: filterBarControl.width - Layout.maximumHeight: filterBarControl.height - radius: 8 - border.color: "#33000000" - GridLayout { - id: filterBarControl - anchors.fill: parent - rows: 6 - columns: 6 - rowSpacing: 16 - columnSpacing: 16 - flow: GridLayout.LeftToRight - Layout.fillWidth: true - TextField { - id: keywordInput - Layout.fillWidth: true - font.family: "Roboto" - font.pointSize: 16 - Layout.bottomMargin: 24 - Layout.topMargin: 24 - Layout.leftMargin: 24 - placeholderText: "Enter keyword" - } - - ComboBox { - id: categories - Layout.fillWidth: true - font.pointSize: 16 - font.family: "Roboto" - displayText: "Categories" - } - ComboBox { - id: priceLevel - Layout.fillWidth: true - font.pointSize: 16 - font.family: "Roboto" - displayText: "Price level" - } - ComboBox { - id: skillLevel - Layout.fillWidth: true - font.pointSize: 16 - font.family: "Roboto" - displayText: "Skill level" - } - ComboBox { - id: language - Layout.fillWidth: true - font.pointSize: 16 - font.family: "Roboto" - displayText: "Languange" - } - - Button { - id: searchButton - Layout.fillWidth: true - icon.color: "#ffffff" - icon.source: "Material/svg/filled/search.svg" - Layout.rightMargin: 24 - display: AbstractButton.IconOnly - } - } -} diff --git a/Course/Grid/Minimal.ui.qml b/Course/Grid/Minimal.ui.qml new file mode 100644 index 0000000..a0a007f --- /dev/null +++ b/Course/Grid/Minimal.ui.qml @@ -0,0 +1,169 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import Eduport 1.4 +import "Minimal" +import "../../Home/Default" + +Flickable { + contentHeight: main.height + + Rectangle { + anchors.fill: parent + color: Eduport.bsBodyBg + } + + ColumnLayout { + id: main + anchors { + top: parent.top + left: parent.left + right: parent.right + } + + FilterBar {} + + GridView { + id: courseGrid + interactive: false + Layout.fillWidth: true + implicitHeight: main.width < 576 + ? cellHeight * count + : main.width < 768 + ? cellHeight * count / 2 + : main.width < 992 + ? cellHeight * count / 3 + : cellHeight * count / 4 + cellWidth: main.width < 576 + ? width + : main.width < 768 + ? width / 2 + : main.width < 992 + ? width / 3 + : width / 4 + cellHeight: cellWidth * 400 / 533 + 273.35 + model: ListModel { + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" + level: "All level" + levelColor: "#ff6f42c1" + levelBackgroundColor: "#1a6f42c1" + liked: false + title: "Sketch from A to Z: for app designer" + rate: 4.0 + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/02.jpg" + level: "Beginner" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + liked: true + title: "Graphic Design Masterclass" + rate: 4.5 + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/03.jpg" + level: "Beginner" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + liked: false + title: "Create a Design System in Figma" + rate: 4.5 + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/07.jpg" + level: "Beginner" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + liked: true + title: "Deep Learning with React-Native" + rate: 4.0 + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/11.jpg" + level: "All level" + levelColor: "#ff6f42c1" + levelBackgroundColor: "#1a6f42c1" + liked: true + title: "Build Responsive Websites with HTML" + rate: 4.0 + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/12.jpg" + level: "Beginner" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + liked: false + title: "Build Websites with CSS" + rate: 4.5 + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/05.jpg" + level: "Intermediate" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + liked: false + title: "The Complete Web Development in python" + rate: 4.5 + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/06.jpg" + level: "Intermediate" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + liked: false + title: "Angular – The Complete Guider" + rate: 4.5 + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/10.jpg" + level: "Beginner" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + liked: true + title: "Bootstrap 5 From Scratch" + rate: 4.5 + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/13.jpg" + level: "Beginner" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + liked: false + title: "PHP with - CMS Project" + rate: 4.0 + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg" + level: "Beginner" + levelColor: "#ff0cbc87" + levelBackgroundColor: "#1a0cbc87" + liked: true + title: "Digital Marketing Masterclass" + rate: 4.5 + } + ListElement { + image: "https://eduport.webestica.com/assets/images/courses/4by3/04.jpg" + level: "All level" + levelColor: "#ff6f42c1" + levelBackgroundColor: "#1a6f42c1" + liked: true + title: "Learn Invision" + rate: 3.5 + } + } + delegate: Card { + width: courseGrid.cellWidth + height: courseGrid.cellHeight + imageSource: image + badgeText: level + badgeColor: levelColor + badgeBackgroundColor: levelBackgroundColor + favorite.checked: liked + titleText: title + truncatedText: "" + rating: rate + } + } + } +} diff --git a/Course/Grid/Minimal/FilterBar.ui.qml b/Course/Grid/Minimal/FilterBar.ui.qml new file mode 100644 index 0000000..d9bf81a --- /dev/null +++ b/Course/Grid/Minimal/FilterBar.ui.qml @@ -0,0 +1,71 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +Rectangle { + id: bgLightBorder + color: "#f5f7f9" + height: filterBarControl.height + width: filterBarControl.width + Layout.maximumHeight: filterBarControl.height + radius: 8 + border.color: "#33000000" + GridLayout { + id: filterBarControl + anchors.fill: parent + rows: 6 + columns: 6 + rowSpacing: 16 + columnSpacing: 16 + flow: GridLayout.LeftToRight + Layout.fillWidth: true + TextField { + id: keywordInput + Layout.fillWidth: true + font.family: "Roboto" + font.pointSize: 16 + Layout.bottomMargin: 24 + Layout.topMargin: 24 + Layout.leftMargin: 24 + placeholderText: "Enter keyword" + } + + ComboBox { + id: categories + Layout.fillWidth: true + font.pointSize: 16 + font.family: "Roboto" + displayText: "Categories" + } + ComboBox { + id: priceLevel + Layout.fillWidth: true + font.pointSize: 16 + font.family: "Roboto" + displayText: "Price level" + } + ComboBox { + id: skillLevel + Layout.fillWidth: true + font.pointSize: 16 + font.family: "Roboto" + displayText: "Skill level" + } + ComboBox { + id: language + Layout.fillWidth: true + font.pointSize: 16 + font.family: "Roboto" + displayText: "Languange" + } + + Button { + id: searchButton + Layout.fillWidth: true + icon.color: "#ffffff" + icon.source: "../../../Font-Awesome/svgs/solid/magnifying-glass.svg" + Layout.rightMargin: 24 + display: AbstractButton.IconOnly + } + } +} diff --git a/CourseGridMinimal.qrc b/CourseGridMinimal.qrc new file mode 100644 index 0000000..0cbbe0b --- /dev/null +++ b/CourseGridMinimal.qrc @@ -0,0 +1,8 @@ + + + Font-Awesome/svgs/solid/magnifying-glass.svg + Course/Grid/Minimal/FilterBar.ui.qml + Course/Grid/Card.ui.qml + Course/Grid/Minimal.ui.qml + + diff --git a/Font-Awesome/svgs/solid/magnifying-glass.svg b/Font-Awesome/svgs/solid/magnifying-glass.svg new file mode 100644 index 0000000..ee25f3c --- /dev/null +++ b/Font-Awesome/svgs/solid/magnifying-glass.svg @@ -0,0 +1 @@ + \ No newline at end of file -- cgit v1.2.3 From eccb66c5328418904fcdcfbe6221c82a2454a3b7 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 18:59:16 +0800 Subject: Alias to courseGrid --- Course/Grid/Minimal.ui.qml | 1 + 1 file changed, 1 insertion(+) diff --git a/Course/Grid/Minimal.ui.qml b/Course/Grid/Minimal.ui.qml index a0a007f..fe7439f 100644 --- a/Course/Grid/Minimal.ui.qml +++ b/Course/Grid/Minimal.ui.qml @@ -6,6 +6,7 @@ import "Minimal" import "../../Home/Default" Flickable { + property alias courseGrid: courseGrid contentHeight: main.height Rectangle { -- cgit v1.2.3 From 0f2807e6a518c09f4926bc5cda65c1ce3321732d 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: Mon, 3 Apr 2023 09:56:25 +0800 Subject: Fix grid card height --- Course/Grid/Minimal.ui.qml | 4 ++-- Home/Default/Card.ui.qml | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/Course/Grid/Minimal.ui.qml b/Course/Grid/Minimal.ui.qml index fe7439f..a4ad119 100644 --- a/Course/Grid/Minimal.ui.qml +++ b/Course/Grid/Minimal.ui.qml @@ -42,7 +42,7 @@ Flickable { : main.width < 992 ? width / 3 : width / 4 - cellHeight: cellWidth * 400 / 533 + 273.35 + cellHeight: cellWidth * 400 / 533 + 220.35 model: ListModel { ListElement { image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg" @@ -162,7 +162,7 @@ Flickable { badgeBackgroundColor: levelBackgroundColor favorite.checked: liked titleText: title - truncatedText: "" + truncatedVisible: false rating: rate } } diff --git a/Home/Default/Card.ui.qml b/Home/Default/Card.ui.qml index 4f2e309..a87d6cd 100644 --- a/Home/Default/Card.ui.qml +++ b/Home/Default/Card.ui.qml @@ -21,6 +21,7 @@ Item { property string titleText: "Build Responsive Websites with HTML" property alias titleArea: titleArea property string truncatedText: "Far advanced settling say finished raillery. Offered chiefly farther" + property bool truncatedVisible: true property real rating: 4.0 DrpShdw.Box { @@ -142,6 +143,7 @@ Item { text: truncatedText elide: Text.ElideRight maximumLineCount: 2 + visible: truncatedVisible Layout.fillWidth: true Layout.bottomMargin: 8 } -- cgit v1.2.3