diff options
| -rw-r--r-- | CardItemGrid.ui.qml | 251 |
1 files changed, 138 insertions, 113 deletions
diff --git a/CardItemGrid.ui.qml b/CardItemGrid.ui.qml index b24b6c1..56dae24 100644 --- a/CardItemGrid.ui.qml +++ b/CardItemGrid.ui.qml @@ -4,120 +4,145 @@ 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 - anchors.rightMargin: 16 - anchors.leftMargin: 16 - anchors.bottomMargin: 16 - anchors.topMargin: 16 - Layout.minimumWidth: 300 - Layout.minimumHeight: 475 - radius: 8 - 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 - } + id: item1 + DropShadow { + color: "#4d000000" + source: cardItem + verticalOffset: 4 + radius: 40 + samples: 81 + anchors.fill: cardItem + } + 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 + 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 - } - } + 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 - 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 - } - } - } - } - } - states: [ - State { - name: "State1" - when: favorite.pressed + Button { + id: favorite + width: 24 + height: 24 + text: qsTr("Button") + anchors.right: parent.right + 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 - PropertyChanges { - target: favorite - icon.color: "#d6293e" - icon.source: "Font-Awesome/svgs/solid/heart.svg" - } - } - ] + Connections { + target: favorite + onClicked: item1.state = "favorite pressed" + } + } + } + } + + Label { + id: cardTitle + color: "#24292d" + 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 + } + } + } + states: [ + State { + name: "favorite pressed" + when: favorite.pressed + + PropertyChanges { + target: favorite + icon.color: "#d6293e" + icon.source: "Font-Awesome/svgs/solid/heart.svg" + } + + PropertyChanges { + target: favorite + layer.enabled: true + } + } + ] } |