qml: Add Hover, Filled, and Active color interaction states to Setting

Author: jarolrod

src/qml/controls/Setting.qml

@@ -13,6 +13,42 @@ AbstractButton {
     property alias actionItem: action_loader.sourceComponent
     property alias loadedItem: action_loader.item
     property string description
+    property color stateColor
+    state: "FILLED"
+
+    states: [
+        State {
+            name: "FILLED"
+            PropertyChanges { target: root; stateColor: Theme.color.neutral9 }
+        },
+        State {
+            name: "HOVER"
+            PropertyChanges { target: root; stateColor: Theme.color.orangeLight1 }
+        },
+        State {
+            name: "ACTIVE"
+            PropertyChanges { target: root; stateColor: Theme.color.orange }
+        }
+    ]
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: root
+        hoverEnabled: true
+        onEntered: {
+            root.state = "HOVER"
+        }
+        onExited: {
+            root.state = "FILLED"
+        }
+        onPressed: {
+            root.state = "ACTIVE"
+        }
+        onReleased: {
+            root.state = "HOVER"
+            root.clicked()
+        }
+    }
 
     contentItem: ColumnLayout {
         spacing: 20
@@ -23,6 +59,7 @@ AbstractButton {
                 center: false
                 header: root.header
                 headerSize: 18
+                headerColor: root.stateColor
                 description: root.description
                 descriptionSize: 15
                 descriptionMargin: 0