add material heart.svg (filled and outlined) and CardItemGrid.ui.qml

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