From 9e11952bf0c0af5aa66ecb621669222c7f133546 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Fri, 9 Feb 2024 10:46:57 -0800
Subject: [PATCH] finally getting the hover down with color changing

---
 Main.qml | 44 +++++++++++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/Main.qml b/Main.qml
index c928c61..ba4e271 100644
--- a/Main.qml
+++ b/Main.qml
@@ -40,30 +40,44 @@ Window {
             delegate: Item {
                 id: listItem
                 height: 20
-                width: 100
+                width: 400
 
                 property bool hovered: false
                 required property string name
+                property bool isConnected: false
 
-                Rectangle {
+                MouseArea {
                     anchors.fill: parent
-                    color: hovered ? "blue" : "transparent"
-
-                    Text {
-                        text: listItem.name
-                        color: listItem.hovered ? "white" : "black"
+                    hoverEnabled: true
+                    onEntered: {
+                        console.log("on hover")
+                        listItem.hovered = true
                     }
+                    onExited: listItem.hovered = false
+                    onClicked: console.log("Clicked!")
 
-                    MouseArea {
+                    Rectangle {
                         anchors.fill: parent
-                        hoverEnabled: true
-                        onEntered: listItem.hovered = true
-                        onExited: listItem.hovered = false
-                        onClicked: console.log("Clicked!")
-                    }
+                        color: listItem.hovered ? "blue" : "transparent"
 
-                    transitions: Transition {
-                        ColorAnimation { target: parent; property: "color"; duration: 200 }
+                        transitions: Transition {
+                            ColorAnimation { target: parent; property: "color"; duration: 200 }
+                        }
+
+                        RowLayout {
+                            anchors.fill: parent
+
+                            Text {
+                                Layout.fillWidth: true
+                                text: listItem.name
+                                color: listItem.hovered ? "white" : "black"
+                            }
+                            Button {
+                                visible: !listItem.isConnected
+                                text: "Connect"
+                                onClicked: console.log("connecting to " + listItem.name)
+                            }
+                        }
                     }
                 }
             }