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 --- .../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 ++++++ 7 files changed, 864 insertions(+) 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 (limited to 'Course') 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 + } + } +} -- 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 +++++++++++++++ 3 files changed, 240 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 (limited to 'Course') 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 + } + } +} -- 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(+) (limited to 'Course') 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 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'Course') 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 } } -- cgit v1.2.3