summaryrefslogtreecommitdiff
path: root/Course/Grid
diff options
context:
space:
mode:
Diffstat (limited to 'Course/Grid')
-rw-r--r--Course/Grid/Card.ui.qml269
-rw-r--r--Course/Grid/Minimal.ui.qml170
-rw-r--r--Course/Grid/Minimal/FilterBar.ui.qml71
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
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 16:24:32 +0000