diff options
| -rw-r--r-- | CardItemGrid.ui.qml | 123 | ||||
| -rw-r--r-- | Material/svg/filled/heart.svg | 1 | ||||
| -rw-r--r-- | Material/svg/outlined/heart.svg | 1 |
3 files changed, 125 insertions, 0 deletions
diff --git a/CardItemGrid.ui.qml b/CardItemGrid.ui.qml new file mode 100644 index 0000000..b24b6c1 --- /dev/null +++ b/CardItemGrid.ui.qml @@ -0,0 +1,123 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +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 + } + + 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 + + PropertyChanges { + target: favorite + icon.color: "#d6293e" + icon.source: "Font-Awesome/svgs/solid/heart.svg" + } + } + ] +} diff --git a/Material/svg/filled/heart.svg b/Material/svg/filled/heart.svg new file mode 100644 index 0000000..b7d58f5 --- /dev/null +++ b/Material/svg/filled/heart.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="m480 935-41-37q-106-97-175-167.5t-110-126Q113 549 96.5 504T80 413q0-90 60.5-150.5T290 202q57 0 105.5 27t84.5 78q42-54 89-79.5T670 202q89 0 149.5 60.5T880 413q0 46-16.5 91T806 604.5q-41 55.5-110 126T521 898l-41 37Z"/></svg>
\ No newline at end of file diff --git a/Material/svg/outlined/heart.svg b/Material/svg/outlined/heart.svg new file mode 100644 index 0000000..ccd13f3 --- /dev/null +++ b/Material/svg/outlined/heart.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="m480 935-41-37q-105.768-97.121-174.884-167.561Q195 660 154 604.5T96.5 504Q80 459 80 413q0-90.155 60.5-150.577Q201 202 290 202q57 0 105.5 27t84.5 78q42-54 89-79.5T670 202q89 0 149.5 60.423Q880 322.845 880 413q0 46-16.5 91T806 604.5Q765 660 695.884 730.439 626.768 800.879 521 898l-41 37Zm0-79q101.236-92.995 166.618-159.498Q712 630 750.5 580t54-89.135q15.5-39.136 15.5-77.72Q820 347 778 304.5T670.225 262q-51.524 0-95.375 31.5Q531 325 504 382h-49q-26-56-69.85-88-43.851-32-95.375-32Q224 262 182 304.5t-42 108.816Q140 452 155.5 491.5t54 90Q248 632 314 698t166 158Zm0-297Z"/></svg>
\ No newline at end of file |
