Show a border around text fields and drop-downs when hovering

And when they are focused.
This applies to the setting text fields, extruder selectors and drop-downs as well as to the machine settings.

Contributes to issue CURA-9217.

7 files changed, 24 insertions, 9 deletions

diff --git a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
index b5147d63db..3755f0ead1 100644
--- a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
+++ b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
@@ -90,6 +90,7 @@ UM.TooltipArea
         {
             anchors.fill: parent
 
+            borderColor: (textFieldWithUnit.hovered || textFieldWithUnit.activeFocus) ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
             liningColor:
             {
                 if (!textFieldWithUnit.enabled)
@@ -109,7 +110,7 @@ UM.TooltipArea
                 // Validation is OK.
                 if (textFieldWithUnit.hovered || textFieldWithUnit.activeFocus)
                 {
-                    return UM.Theme.getColor("border_main")
+                    return UM.Theme.getColor("text_field_border_hovered")
                 }
                 return UM.Theme.getColor("border_field_light")
             }
diff --git a/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml b/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml
index 5e4303c15c..fa2659c672 100644
--- a/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml
+++ b/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml
@@ -129,7 +129,8 @@ Item
             background: UM.UnderlineBackground
             {
                 id: backgroundItem
-                liningColor: intentSelection.hovered ? UM.Theme.getColor("border_main") : UM.Theme.getColor("border_field_light")
+                borderColor: intentSelection.hovered ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
+                liningColor: intentSelection.hovered ? UM.Theme.getColor("text_field_border_hovered") : UM.Theme.getColor("border_field_light")
             }
 
             UM.SimpleButton
diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml
index 697acdec0b..d0bffe0f37 100644
--- a/resources/qml/Settings/SettingExtruder.qml
+++ b/resources/qml/Settings/SettingExtruder.qml
@@ -125,15 +125,16 @@ SettingItem
                 }
                 return UM.Theme.getColor("setting_control")
             }
+            borderColor: (base.hovered || control.activeFocus) ? UM.Theme.getSize("text_field_border_hovered") : "transparent"
             liningColor:
             {
                 if (!enabled)
                 {
                     return UM.Theme.getColor("setting_control_disabled_border")
                 }
-                if (control.hovered || control.activeFocus)
+                if (base.hovered || control.activeFocus)
                 {
-                    return UM.Theme.getColor("border_main")
+                    return UM.Theme.getColor("text_field_border_hovered")
                 }
                 return UM.Theme.getColor("border_field_light")
             }
diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml
index e02fe88e34..8c57bc8651 100644
--- a/resources/qml/Settings/SettingOptionalExtruder.qml
+++ b/resources/qml/Settings/SettingOptionalExtruder.qml
@@ -126,15 +126,16 @@ SettingItem
                 }
                 return UM.Theme.getColor("setting_control")
             }
+            borderColor: (base.hovered || control.activeFocus) ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
             liningColor:
             {
                 if (!enabled)
                 {
                     return UM.Theme.getColor("setting_control_disabled_border")
                 }
-                if (control.hovered || control.activeFocus)
+                if (base.hovered || control.activeFocus)
                 {
-                    return UM.Theme.getColor("border_main")
+                    return UM.Theme.getColor("text_field_border_hovered")
                 }
                 return UM.Theme.getColor("border_field_light")
             }
diff --git a/resources/qml/Settings/SettingTextField.qml b/resources/qml/Settings/SettingTextField.qml
index feca1d51a1..8ec37f98d2 100644
--- a/resources/qml/Settings/SettingTextField.qml
+++ b/resources/qml/Settings/SettingTextField.qml
@@ -32,6 +32,7 @@ SettingItem
 
         anchors.fill: parent
 
+        borderColor: (hovered || input.activeFocus) ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
         liningColor:
         {
             if(!enabled)
diff --git a/resources/qml/Widgets/ComboBox.qml b/resources/qml/Widgets/ComboBox.qml
index 2a3716c3af..54d59817db 100644
--- a/resources/qml/Widgets/ComboBox.qml
+++ b/resources/qml/Widgets/ComboBox.qml
@@ -32,8 +32,13 @@ ComboBox
         State
         {
             name: "highlighted"
-            when: control.hovered || control.activeFocus
-            PropertyChanges { target: background; liningColor: UM.Theme.getColor("border_main")}
+            when: base.hovered || control.hovered || control.activeFocus
+            PropertyChanges
+            {
+                target: background
+                borderColor: UM.Theme.getColor("text_field_border_hovered")
+                liningColor: UM.Theme.getColor("text_field_border_hovered")
+            }
         }
     ]
 
diff --git a/resources/qml/Widgets/TextField.qml b/resources/qml/Widgets/TextField.qml
index d035883154..a86f2548cc 100644
--- a/resources/qml/Widgets/TextField.qml
+++ b/resources/qml/Widgets/TextField.qml
@@ -47,7 +47,12 @@ TextField
         {
             name: "hovered"
             when: control.hovered || control.activeFocus
-            PropertyChanges { target: backgroundRectangle; liningColor: UM.Theme.getColor("text_field_border_hovered")}
+            PropertyChanges
+            {
+                target: backgroundRectangle
+                liningColor: UM.Theme.getColor("text_field_border_hovered")
+                borderColor: UM.Theme.getColor("text_field_border_hovered")
+            }
         }
     ]