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