qml: add EMPTY state to ValueInput

The EMPTY state indicates that this setting hasn't been touched.
Clicking on the Setting that contains the ValueInput is enough to put
it in the FILLED state.

Author: jarolrod

src/qml/components/DeveloperOptions.qml

@@ -34,7 +34,10 @@ ColumnLayout {
                 dbcacheSetting.forceActiveFocus()
             }
         }
-        onClicked: loadedItem.forceActiveFocus()
+        onClicked: {
+            loadedItem.filled = true
+            loadedItem.forceActiveFocus()
+        }
     }
     Setting {
         id: parSetting
@@ -48,7 +51,10 @@ ColumnLayout {
                 parSetting.forceActiveFocus()
             }
         }
-        onClicked: loadedItem.forceActiveFocus()
+        onClicked: {
+            loadedItem.filled = true
+            loadedItem.forceActiveFocus()
+        }
     }
     Setting {
         Layout.fillWidth: true

src/qml/components/StorageSettings.qml

@@ -40,6 +40,9 @@ ColumnLayout {
                 pruneTargetSetting.forceActiveFocus()
             }
         }
-        onClicked: loadedItem.forceActiveFocus()
+        onClicked: {
+            loadedItem.filled = true
+            loadedItem.forceActiveFocus()
+        }
     }
 }

src/qml/controls/ValueInput.qml

@@ -9,29 +9,33 @@ TextInput {
     id: root
     required property string parentState
     property string description: ""
+    property bool filled: false
     property int descriptionSize: 18
     property color textColor
-    state: root.parentState
 
     states: [
         State {
-            name: "FILLED"
+            name: "EMPTY"; when: !filled
+            PropertyChanges { target: root; textColor: Theme.color.neutral5 }
+        },
+        State {
+            name: "FILLED"; when: filled && !(parentState == "HOVER") && !(parentState == "ACTIVE") && !(parentState == "DISABLED")
             PropertyChanges {
                 target: root
                 enabled: true
                 textColor: Theme.color.neutral9
             }
         },
         State {
-            name: "HOVER"
+            name: "HOVER"; when: (parentState == "HOVER") && filled
             PropertyChanges { target: root; textColor: Theme.color.orangeLight1 }
         },
         State {
-            name: "ACTIVE"
+            name: "ACTIVE"; when: (parentState == "ACTIVE")
             PropertyChanges { target: root; textColor: Theme.color.orange }
         },
         State {
-            name: "DISABLED"
+            name: "DISABLED"; when: (parentState == "DISABLED")
             PropertyChanges {
                 target: root
                 enabled: false