diff options
author | anatasof wirapraja <anatasof.wirapraja@gmail.com> | 2023-04-04 12:11:29 +0700 |
---|---|---|
committer | anatasof wirapraja <anatasof.wirapraja@gmail.com> | 2023-04-04 12:11:29 +0700 |
commit | 99f76ba0ef58a252c1d82acbd56df8b6ef5a735c (patch) | |
tree | ead1dae3997aa544f01e98f2fb2a937d9daf0389 /Course/Grid | |
parent | d4144d1a21af598b56f9be51e7b8714d428ad355 (diff) | |
parent | 0f2807e6a518c09f4926bc5cda65c1ce3321732d (diff) |
Merge commit '0f2807e6a518c09f4926bc5cda65c1ce3321732d'
Diffstat (limited to 'Course/Grid')
-rw-r--r-- | Course/Grid/Card.ui.qml | 269 | ||||
-rw-r--r-- | Course/Grid/Minimal.ui.qml | 170 | ||||
-rw-r--r-- | Course/Grid/Minimal/FilterBar.ui.qml | 71 |
3 files changed, 510 insertions, 0 deletions
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/Minimal.ui.qml b/Course/Grid/Minimal.ui.qml new file mode 100644 index 0000000..a4ad119 --- /dev/null +++ b/Course/Grid/Minimal.ui.qml @@ -0,0 +1,170 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import Eduport 1.4 +import "Minimal" +import "../../Home/Default" + +Flickable { + property alias courseGrid: courseGrid + 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 + 220.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 + truncatedVisible: false + 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 + } + } +} |