diff options
| -rw-r--r-- | Student/Dashboard/CourseListItem.ui.qml | 124 |
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 + } } |