indentation and add state change

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
+			}
+		}
+	]
 }