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