diff options
| -rw-r--r-- | CardItemGrid.ui.qml | 142 |
1 files changed, 131 insertions, 11 deletions
diff --git a/CardItemGrid.ui.qml b/CardItemGrid.ui.qml index 56dae24..1b82fbe 100644 --- a/CardItemGrid.ui.qml +++ b/CardItemGrid.ui.qml @@ -16,10 +16,6 @@ Item { Rectangle { id: cardItem anchors.fill: parent - anchors.rightMargin: 16 - anchors.leftMargin: 16 - anchors.bottomMargin: 16 - anchors.topMargin: 16 Layout.minimumWidth: 300 Layout.minimumHeight: 475 radius: 8 @@ -95,6 +91,7 @@ Item { height: 24 text: qsTr("Button") anchors.right: parent.right + checkable: true anchors.rightMargin: 0 padding: 0 rightPadding: 0 @@ -107,7 +104,7 @@ Item { Connections { target: favorite - onClicked: item1.state = "favorite pressed" + onStateChanged: favorite.state = "favorite checked" } } } @@ -115,7 +112,7 @@ Item { Label { id: cardTitle - color: "#24292d" + color: "#000000" text: qsTr("Course title") wrapMode: Text.Wrap Layout.fillWidth: true @@ -126,22 +123,145 @@ Item { 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 + + 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 pressed" - when: favorite.pressed + name: "favorite checked" + when: favorite.checked PropertyChanges { target: favorite icon.color: "#d6293e" - icon.source: "Font-Awesome/svgs/solid/heart.svg" + icon.source: "Material/svg/filled/heart.svg" } + }, + State { + name: "rating checked" + when: star.checked PropertyChanges { - target: favorite - layer.enabled: true + target: star + icon.color: "#f7c32e" + icon.source: "Material/svg/filled/star.svg" } } ] |