Favorite implementation

2 files changed, 26 insertions, 7 deletions

diff --git a/Home/Default.ui.qml b/Home/Default.ui.qml
index 19f3166..d14c849 100644
--- a/Home/Default.ui.qml
+++ b/Home/Default.ui.qml
@@ -269,6 +269,7 @@ Flickable {
 									level: "All level"
 									levelColor: "#ff6f42c1"
 									levelBackgroundColor: "#1a6f42c1"
+									liked: false
 									title: "Sketch from A to Z: for app designer"
 									truncated: "Proposal indulged no do sociable he throwing settling."
 									rate: 4.0
@@ -278,6 +279,7 @@ Flickable {
 									level: "Beginner"
 									levelColor: "#ff0cbc87"
 									levelBackgroundColor: "#1a0cbc87"
+									liked: true
 									title: "Graphic Design Masterclass"
 									truncated: "Rooms oh fully taken by worse do Points afraid but may end Rooms"
 									rate: 4.5
@@ -287,6 +289,7 @@ Flickable {
 									level: "Beginner"
 									levelColor: "#ff0cbc87"
 									levelBackgroundColor: "#1a0cbc87"
+									liked: false
 									title: "Create a Design System in Figma"
 									truncated: "Rooms oh fully taken by worse do. Points afraid but may end afraid but may end."
 									rate: 4.5
@@ -296,6 +299,7 @@ Flickable {
 									level: "Beginner"
 									levelColor: "#ff0cbc87"
 									levelBackgroundColor: "#1a0cbc87"
+									liked: true
 									title: "Deep Learning with React-Native"
 									truncated: "Far advanced settling say finished raillery. Offered chiefly farther"
 									rate: 4.0
@@ -305,6 +309,7 @@ Flickable {
 									level: "All level"
 									levelColor: "#ff6f42c1"
 									levelBackgroundColor: "#1a6f42c1"
+									liked: true
 									title: "Build Responsive Websites with HTML"
 									truncated: "Far advanced settling say finished raillery. Offered chiefly farther"
 									rate: 4.0
@@ -314,6 +319,7 @@ Flickable {
 									level: "Beginner"
 									levelColor: "#ff0cbc87"
 									levelBackgroundColor: "#1a0cbc87"
+									liked: false
 									title: "Build Websites with CSS"
 									truncated: "Far advanced settling say finished raillery. Offered chiefly farther"
 									rate: 4.5
@@ -323,6 +329,7 @@ Flickable {
 									level: "All level"
 									levelColor: "#ff6f42c1"
 									levelBackgroundColor: "#1a6f42c1"
+									liked: true
 									title: "Learn Invision"
 									truncated: "Arrived off she elderly beloved him Course regard to up he hardly."
 									rate: 3.5
@@ -332,6 +339,7 @@ Flickable {
 									level: "All level"
 									levelColor: "#ff6f42c1"
 									levelBackgroundColor: "#1a6f42c1"
+									liked: false
 									title: "JavaScript: Full Understanding"
 									truncated: "Far advanced settling say finished raillery. Offered chiefly farther"
 									rate: 5.0
@@ -361,8 +369,9 @@ Flickable {
 							imageSource: image
 							badgeText: level
 							badgeColor: levelColor
-							badgeBackgroundColor
-							: levelBackgroundColor
+							badgeBackgroundColor:
+							levelBackgroundColor
+							favorite.checked: liked
 							titleText: title
 							truncatedText: truncated
 							rating: rate
diff --git a/Home/Default/Card.ui.qml b/Home/Default/Card.ui.qml
index c1193e1..36e9239 100644
--- a/Home/Default/Card.ui.qml
+++ b/Home/Default/Card.ui.qml
@@ -16,6 +16,7 @@ Item {
 	property string badgeText: "All level"
 	property color badgeColor: "#ff6f42c1"
 	property color badgeBackgroundColor: "#1a6f42c1"
+	property alias favorite: favorite
 	property string titleText: "Build Responsive Websites with HTML"
 	property alias titleArea: titleArea
 	property string truncatedText: "Far advanced settling say finished raillery. Offered chiefly farther"
@@ -100,12 +101,21 @@ Item {
 					}
 				}
 
-				Image {
+				Button {
 					id: favorite
-					source: "../../Font-Awesome/svgs/solid/heart.svg"
-					sourceSize {
-						width: 15
-						height: 15
+					display: AbstractButton.IconOnly
+					padding: 0
+					width: 15
+					height: 15
+					flat: true
+					checkable: true
+					icon {
+						source: checked
+							? "../../Font-Awesome/svgs/solid/heart.svg"
+							: "../../Font-Awesome/svgs/regular/heart.svg"
+						color: checked
+							? "#d6293e"
+							: "transparent"
 					}
 					anchors {
 						right: parent.right