summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ <erik@darapsa.co.id>2024-01-11 11:27:57 +0800
committerꦌꦫꦶꦏ꧀ꦦꦿꦧꦮꦑꦩꦭ꧀ <erik@darapsa.co.id>2024-01-11 11:29:30 +0800
commit34ee6007e004eb6300d800023382f66590944e5e (patch)
tree933af651822247bd7f6966696602d78c40314b31
parent1a77bc90a1e426b20cbc0b409a02063399eaa4e4 (diff)
Simplify student dashboard course list item
by taking out the not really necessary outermost layer, an Item. Also adjust an import version.
-rw-r--r--Student/Dashboard/CourseListItem.ui.qml124
1 files changed, 52 insertions, 72 deletions
diff --git a/Student/Dashboard/CourseListItem.ui.qml b/Student/Dashboard/CourseListItem.ui.qml
index 227d785..2102ab3 100644
--- a/Student/Dashboard/CourseListItem.ui.qml
+++ b/Student/Dashboard/CourseListItem.ui.qml
@@ -1,91 +1,71 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
-import QtGraphicalEffects 1.12
+import QtGraphicalEffects 1.15
-Item {
+RowLayout {
property alias courseTitle: courseTitle
property alias courseThumb: courseThumb
property alias courseProgressPercentage: courseProgressPercentage
property alias courseProgressBar: courseProgressBar
property alias courseListActionButton: courseListActionButton
+ spacing: 16
- height: courseData.height
-
- RowLayout {
- id: courseData
- spacing: 16
- width: parent.width
-
- 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
- }
+ 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
}
- ColumnLayout{
- id: courseProgressInfo
- spacing: 0
- width: parent.width - image.width - spacing
+ OpacityMask{
+ anchors.fill: courseThumbnail
+ source: courseThumb
+ maskSource: courseThumbnail
+ }
+ }
+ ColumnLayout{
+ id: courseProgressInfo
+ spacing: 0
+ width: parent.width - image.width - spacing
- Label{
- id: courseTitle
- color: "#000000"
- text: "Course name"
- font.pointSize: 16
- font.family: "roboto"
- font.styleName: "Medium"
- Layout.fillWidth: true
- }
+ Label{
+ id: courseTitle
+ text: "Building Scalable APIs with GraphQL"
+ Layout.fillWidth: true
+ }
- RowLayout { // So the Bar and % of value side by side
- ProgressBar {
- id: courseProgressBar
- value: completedLectures / totalLectures * 100
- to: 100
- width: parent.width * 0.7
- height: 10
- background: Rectangle {
- color: "#666666" // Background color of the ProgressBar
- }
- }
- Label{
- id: courseProgressPercentage
- // color: "#000000"
- text: Math.round(completedLectures / totalLectures * 100) + "%"
- color: "#666666"
- // font.pixelSize: 14
- font.pointSize: 14
- font.family: "roboto"
- font.styleName: "Medium"
- // horizontalAlignment: Text.AlignRight
- // Layout.fillWidth: true
+ RowLayout { // So the Bar and % of value side by side
+ ProgressBar {
+ id: courseProgressBar
+ value: completedLectures / totalLectures * 100
+ to: 100
+ width: parent.width * 0.7
+ height: 10
+ background: Rectangle {
+ color: "#666666" // Background color of the ProgressBar
}
}
- }
- Button {
- id: courseListActionButton
- icon.source: "Material/svg/filled/play_circle_outline.svg"
- text: "Continue"
- font.weight: Font.Medium
- font.family: "Roboto"
- font.pointSize: 14
- onClicked: {
- // Implement resuming logic
+ Label{
+ id: courseProgressPercentage
+ text: Math.round(completedLectures / totalLectures * 100) + "%"
+// horizontalAlignment: Text.AlignRight
+// Layout.fillWidth: true
}
}
}
+ Button {
+ id: courseListActionButton
+ icon.source: "Material/svg/filled/play_circle_outline.svg"
+ text: "Continue"
+ font.weight: Font.Medium
+ font.family: "Roboto"
+ font.pointSize: 14
+ }
}