From ded9f25b05430b112e58747fd095f9248605ee83 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: Sat, 18 Mar 2023 17:11:54 +0800 Subject: Move course detail classic related to own folders --- Course/Detail/Classic.ui.qml | 423 +++++++++++++++++++++ Course/Detail/Classic/Content/Instructor.ui.qml | 91 +++++ .../Content/Instructor/ListInlineItem.ui.qml | 49 +++ 3 files changed, 563 insertions(+) create mode 100644 Course/Detail/Classic.ui.qml create mode 100644 Course/Detail/Classic/Content/Instructor.ui.qml create mode 100644 Course/Detail/Classic/Content/Instructor/ListInlineItem.ui.qml (limited to 'Course/Detail') diff --git a/Course/Detail/Classic.ui.qml b/Course/Detail/Classic.ui.qml new file mode 100644 index 0000000..d755076 --- /dev/null +++ b/Course/Detail/Classic.ui.qml @@ -0,0 +1,423 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 +import "Classic/Content" as Content +import "../.." + +Flickable { + property alias introBadge: introBadge + property alias introTitleHeader: introTitleHeader + property alias introTitleParagraph: introTitleParagraph + property alias tabs: tabs + property alias courseDescription: courseDescription + property alias detailImage: image + property alias detailPrice: price + property alias detailOriginalPrice: originalPrice + property alias detailDiscount: discount + property alias detailTime: time + property alias detailTrial: trial + property alias detailBuy: buy + property bool doesntEmbed: Qt.platform.os === "android" + || Qt.platform.os === "linux" + || Qt.platform.os === "osx" + || Qt.platform.os === "unix" + || Qt.platform.os === "windows" + contentHeight: body.height + + ColumnLayout { + id: body + anchors { + top: parent.top + left: parent.left + right: parent.right + } + + FontLoader { + id: heebo + source: "../../Heebo/Heebo-Bold.ttf" + } + + FontLoader { + id: bold + source: doesntEmbed ? "" : "../../Roboto/Roboto-Bold.ttf" + } + + FontLoader { + id: medium + source: doesntEmbed ? "" : "../../Roboto/Roboto-Medium.ttf" + } + + FontLoader { + id: regular + source: doesntEmbed ? "" : "../../Roboto/Roboto-Regular.ttf" + } + + Rectangle { + color: "#f5f7f9" + Layout.fillWidth: true + implicitHeight: pageIntro.height + 96 + + ColumnLayout { + id: pageIntro + anchors { + left: parent.left + leftMargin: 15 + right: parent.right + rightMargin: 15 + verticalCenter: parent.verticalCenter + } + + Rectangle { + Layout.bottomMargin: 16 + implicitWidth: introBadge.width + implicitHeight: introBadge.height + radius: 5.2 + color: Qt.rgba( .0235, .416, .788, 1.0) + Label { + id: introBadge + text: qsTr("Digital Marketing") + color: "white" + font { + family: doesntEmbed ? "Roboto" : bold.name + weight: Font.Bold + pointSize: 15 + } + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + topPadding: 8 + leftPadding: 25.6 + rightPadding: 25.6 + bottomPadding: 8 + } + } + + Label { + id: introTitleHeader + text: qsTr("The Complete Digital Marketing Course - 12 Courses in 1") + color: "#24292d" + wrapMode: Text.Wrap + Layout.fillWidth: true + font { + family: heebo.name + pointSize: 30 + } + } + + Label { + id: introTitleParagraph + text: qsTr("Satisfied conveying a dependent contented he gentleman agreeable do be. Warrant private blushes removed an in equally totally if. Delivered dejection necessary objection do Mr prevailed. Mr feeling does chiefly cordial in do.") + color: "#747579" + wrapMode: Text.Wrap + Layout.fillWidth: true + font { + family: doesntEmbed ? "Roboto" : regular.name + pointSize: 15 + } + } + } + } + + GridLayout { + Layout.topMargin: 64 + columns: width < 992 ? 1 : 2 + rows: width < 992 ? 2 : 1 + + ColumnLayout { + Layout.alignment: Qt.AlignTop + Layout.maximumWidth: body.width < 992 + ? body.width : body.width / 2 + + Item { + Layout.fillWidth: true + Layout.leftMargin: 15 + Layout.rightMargin: 15 + implicitHeight: mainContent.height + + DropShadow { + source: mainContent + color: "#4d000000" + verticalOffset: 4 + radius: 12 + samples: 12 + anchors.fill: mainContent + } + + Rectangle { + id: mainContent + radius: 5.2 + anchors { + left: parent.left + right: parent.right + } + implicitHeight: tabs.height + tabsContent.height + 83.2 + + ColumnLayout { + anchors { + left: parent.left + leftMargin: 25.6 + right: parent.right + rightMargin: 25.6 + } + + GridView { + id: tabs + interactive: false + Layout.fillWidth: true + Layout.topMargin: 16 + Layout.bottomMargin: 16 + cellWidth: 105.016 + cellHeight: 46 + implicitHeight: Math.ceil(count / Math.floor(count / (cellWidth * count / width))) * cellHeight + model: ["Overview", "Curriculum", "Instructor", "Reviews", "FAQs", "Comment"] + delegate: TabItem { + contentItem: Text { + text: modelData + color: "#066ac9" + font { + family: doesntEmbed ? "Roboto" : regular.name + pointSize: 15 + } + } + background: Rectangle { + color: index == currentIndex ? "#1a0fffff" : "transparent" + radius: 5.2 + } + } + } + + StackLayout { + id: tabsContent + currentIndex: tabs.currentIndex + Layout.topMargin: 33.6 + Layout.leftMargin: 25.6 + Layout.rightMargin: 25.6 + Layout.bottomMargin: 25.6 + + ColumnLayout { + + Label { + text: qsTr("Course Description") + color: "#24292d" + wrapMode: Text.Wrap + Layout.fillWidth: true + Layout.bottomMargin: 16 + font { + family: heebo.name + pointSize: 20.1 + } + } + + Label { + id: courseDescription + text: qsTr("Welcome to the Digital Marketing Ultimate Course Bundle - 12 Courses in 1 (Over 36 hours of content)") + color: "#747579" + wrapMode: Text.Wrap + Layout.fillWidth: true + font { + family: doesntEmbed ? "Roboto" : regular.name + pointSize: 15 + } + } + } + + Item {} + + Content.Instructor {} + + Item {} + + Item {} + + Item {} + } + } + } + } + } + + ColumnLayout { + + Item { + Layout.fillWidth: true + implicitHeight: width * 1.2 + + DropShadow { + source: rightSidebar + color: Qt.rgba(.113, .227, .325, .15) + anchors.fill: rightSidebar + } + + Rectangle { + id: rightSidebar + radius: 10 + anchors { + top: parent.top + topMargin: 25.6 + left: parent.left + leftMargin: 12.8 + right: parent.right + rightMargin: 12.8 + bottom: parent.bottom + } + + Image { + id: image + source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg" + width: parent.width - 16 + height: parent.width * 3 / 4 + anchors { + top: parent.top + topMargin: 8 + horizontalCenter: parent.horizontalCenter + } + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: image.width + height: image.height + radius: 10 + } + } + } + + ColumnLayout { + width: parent.width - 16 + anchors { + top: image.bottom + horizontalCenter: parent.horizontalCenter + bottom: parent.bottom + bottomMargin: 8 + } + + RowLayout { + Layout.topMargin: 16 + Layout.bottomMargin: 16 + + ColumnLayout { + spacing: 8 + + RowLayout { + + Label { + id: price + text: "$150" + font { + family: heebo.name + pointSize: 23 + } + } + + Label { + id: originalPrice + text: "$350" + color: "#4d000000" + font { + family: doesntEmbed ? "Roboto" : regular.name + pointSize: 15 + strikeout: true + } + } + + Rectangle { + id: discountLabel + implicitWidth: discount.width + implicitHeight: discount.height + radius: 6 + color: "#fd7e14" + + Label { + id: discount + text: qsTr("60% off") + color: "white" + font { + family: doesntEmbed ? "Roboto" : regular.name + pointSize: 13.6 + } + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + topPadding: 4.46 + leftPadding: 8.29 + rightPadding: 8.29 + bottomPadding: 4.46 + } + } + } + + RowLayout { + id: time + + Label { + text: qsTr("5 days left at this price") + color: "#d6293e" + font { + family: doesntEmbed ? "Roboto" : regular.name + pointSize: 15 + } + } + } + } + } + + RowLayout { + Layout.topMargin: 16 + Layout.fillWidth: true + spacing: 16 + + Button { + id: trial + text: qsTr("Free trial") + horizontalPadding: 16 + verticalPadding: 8 + contentItem: Text { + horizontalAlignment: Text.AlignHCenter + text: trial.text + color: trial.down ? "#ffffff" : "#066ac9" + font { + family: doesntEmbed ? "Roboto" : medium.name + weight: Font.Medium + pointSize: 15 + } + } + background: Rectangle { + color: trial.down ? "#066ac9" : "#ffffff" + radius: 5.2 + border { + color: "#066ac9" + width: 1 + } + } + } + + Button { + id: buy + text: qsTr("Buy course") + horizontalPadding: 16 + verticalPadding: 8 + contentItem: Text { + horizontalAlignment: Text.AlignHCenter + text: buy.text + color: "#ffffff" + font { + family: doesntEmbed ? "Roboto" : medium.name + weight: Font.Medium + pointSize: 15 + } + } + background: Rectangle { + color: buy.down ? "#0aa073" : "#0cbc87" + radius: 5.2 + border { + color: buy.down ? "#0a966c" : "#0cbc87" + width: 1 + } + } + } + } + } + } + } + } + } + } +} diff --git a/Course/Detail/Classic/Content/Instructor.ui.qml b/Course/Detail/Classic/Content/Instructor.ui.qml new file mode 100644 index 0000000..6f231aa --- /dev/null +++ b/Course/Detail/Classic/Content/Instructor.ui.qml @@ -0,0 +1,91 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import "Instructor" + +GridLayout { + id: instructorContent + width: instructorContent.width + height: instructorContent.height + rowSpacing: 16 + columnSpacing: 16 + flow: GridLayout.TopToBottom + + RowLayout { + id: instructorStatistics + Image { + id: instructorImage + Layout.preferredWidth: 300 + Layout.preferredHeight: 300 + source: "https://eduport.webestica.com/assets/images/instructor/01.jpg" + fillMode: Image.PreserveAspectFit + Layout.margins: 8 + } + ColumnLayout { + id: instructorBody + spacing: 8 + Layout.margins: 8 + + Label { + id: instructorFullname + color: "#000000" + text: qsTr("Instructor Fullname") + font.styleName: "Bold" + font.pointSize: 32 + font.family: "roboto" + + } + Label { + id: instructorTitle + color: "#66000000" + text: qsTr("Instructor of Marketing") + font.styleName: "Regular" + font.pointSize: 16 + font.family: "roboto" + } + RowLayout{ + spacing: 16 + ListInlineItem { + id: listInlineItem1 + } + + ListInlineItem { + id: listInlineItem2 + } + + ListInlineItem { + id: listInlineItem3 + } + + ListInlineItem { + id: listInlineItem4 + } + + } + } + } + ColumnLayout { + id: insturctorInfo + width: instructorStatistics.width + spacing: 0 + Label { + color: "#000000" + text: qsTr("About Instructor") + leftPadding: 8 + font.styleName: "Medium" + font.pointSize: 21 + font.family: "roboto" + } + Label { + color: "#66000000" + width: 720 + text: qsTr("Fulfilled direction use continual set him propriety continued. Saw met applauded favorite deficient engrossed concealed and her. Concluded boy perpetual old supposing. Farther related bed and passage comfort civilly. Dashboard see frankness objection abilities. As hastened oh produced prospect formerly up am. Placing forming nay looking old married few has. Margaret disposed of add screened rendered six say his striking confined. As it so contrasted oh estimating instrument. Size like body someone had. Are conduct viewing boy minutes warrant the expense? Tolerably behavior may admit daughters offending her ask own. Praise effect wishes change way and any wanted.") + wrapMode: Text.WordWrap + leftPadding: 8 + font.styleName: "Regular" + font.pointSize: 14 + font.family: "roboto" + Layout.fillWidth: true + } + } +} diff --git a/Course/Detail/Classic/Content/Instructor/ListInlineItem.ui.qml b/Course/Detail/Classic/Content/Instructor/ListInlineItem.ui.qml new file mode 100644 index 0000000..6e30ffc --- /dev/null +++ b/Course/Detail/Classic/Content/Instructor/ListInlineItem.ui.qml @@ -0,0 +1,49 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.12 + + +RowLayout { + id:listInline + width: listInlineItem.width + height: listInlineItem.height + RowLayout { + id:listInlineItem + Rectangle { + id: inlineItemIconBg + radius: 100 + color: "#4dfd7e14" + Layout.preferredHeight: 42 + Layout.preferredWidth: 42 + Layout.minimumHeight: 42 + Layout.minimumWidth: 42 + + Image { + id: inlineItemIcon + anchors.verticalCenter: parent.verticalCenter + source: "../../../../../Material/svg/filled/school.svg" + anchors.horizontalCenter: parent.horizontalCenter + fillMode: Image.PreserveAspectFit + Layout.preferredHeight: 12 + Layout.preferredWidth: 12 + Layout.minimumHeight: 12 + Layout.minimumWidth: 12 + + ColorOverlay{ + anchors.fill: inlineItemIcon + source: inlineItemIcon + color: "#fd7e14" + } + } + } + Label { + id: instructorTitle + color: "#000000" + text: qsTr("List inline item metrics") + font.styleName: "Regular" + font.pointSize: 14 + font.family: "roboto" + } + } +} -- cgit v1.2.3