Use border only on active state

Contributes to issue CURA-9217.

7 files changed, 62 insertions, 27 deletions

diff --git a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
index 2950714d6a..79114b15c6 100644
--- a/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
+++ b/resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
@@ -91,12 +91,12 @@ UM.TooltipArea
         {
             anchors.fill: parent
 
-            borderColor: (textFieldWithUnit.hovered || textFieldWithUnit.activeFocus) ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
+            borderColor: textFieldWithUnit.activeFocus ? UM.Theme.getColor("text_field_border_active") : "transparent"
             liningColor:
             {
                 if (!textFieldWithUnit.enabled)
                 {
-                    return UM.Theme.getColor("setting_control_disabled_border")
+                    return UM.Theme.getColor("setting_control_disabled_border");
                 }
                 switch (propertyProvider.properties.validationState)
                 {
@@ -109,11 +109,15 @@ UM.TooltipArea
                         return UM.Theme.getColor("setting_validation_warning")
                 }
                 // Validation is OK.
-                if (textFieldWithUnit.hovered || textFieldWithUnit.activeFocus)
+                if(textFieldWithUnit.activeFocus)
                 {
-                    return UM.Theme.getColor("text_field_border_hovered")
+                    return UM.Theme.getColor("text_field_border_active");
                 }
-                return UM.Theme.getColor("border_field_light")
+                if(textFieldWithUnit.hovered)
+                {
+                    return UM.Theme.getColor("text_field_border_hovered");
+                }
+                return UM.Theme.getColor("border_field_light");
             }
 
             color:
diff --git a/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml b/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml
index fa2659c672..05ee28714b 100644
--- a/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml
+++ b/resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml
@@ -129,7 +129,6 @@ Item
             background: UM.UnderlineBackground
             {
                 id: backgroundItem
-                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")
             }
 
diff --git a/resources/qml/Settings/SettingExtruder.qml b/resources/qml/Settings/SettingExtruder.qml
index d0bffe0f37..567161b8f6 100644
--- a/resources/qml/Settings/SettingExtruder.qml
+++ b/resources/qml/Settings/SettingExtruder.qml
@@ -125,18 +125,22 @@ SettingItem
                 }
                 return UM.Theme.getColor("setting_control")
             }
-            borderColor: (base.hovered || control.activeFocus) ? UM.Theme.getSize("text_field_border_hovered") : "transparent"
+            borderColor: control.activeFocus ? UM.Theme.getSize("text_field_border_active") : "transparent"
             liningColor:
             {
-                if (!enabled)
+                if(!enabled)
+                {
+                    return UM.Theme.getColor("setting_control_disabled_border");
+                }
+                if(control.activeFocus)
                 {
-                    return UM.Theme.getColor("setting_control_disabled_border")
+                    return UM.Theme.getColor("text_field_border_active");
                 }
-                if (base.hovered || control.activeFocus)
+                if(base.hovered)
                 {
-                    return UM.Theme.getColor("text_field_border_hovered")
+                    return UM.Theme.getColor("text_field_border_hovered");
                 }
-                return UM.Theme.getColor("border_field_light")
+                return UM.Theme.getColor("border_field_light");
             }
         }
 
diff --git a/resources/qml/Settings/SettingOptionalExtruder.qml b/resources/qml/Settings/SettingOptionalExtruder.qml
index 8c57bc8651..22f03d44a2 100644
--- a/resources/qml/Settings/SettingOptionalExtruder.qml
+++ b/resources/qml/Settings/SettingOptionalExtruder.qml
@@ -126,18 +126,22 @@ SettingItem
                 }
                 return UM.Theme.getColor("setting_control")
             }
-            borderColor: (base.hovered || control.activeFocus) ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
+            borderColor: control.activeFocus ? UM.Theme.getColor("text_field_border_active") : "transparent"
             liningColor:
             {
-                if (!enabled)
+                if(!enabled)
+                {
+                    return UM.Theme.getColor("setting_control_disabled_border");
+                }
+                if(control.activeFocus)
                 {
-                    return UM.Theme.getColor("setting_control_disabled_border")
+                    return UM.Theme.getColor("text_field_border_active");
                 }
-                if (base.hovered || control.activeFocus)
+                if(base.hovered)
                 {
-                    return UM.Theme.getColor("text_field_border_hovered")
+                    return UM.Theme.getColor("text_field_border_hovered");
                 }
-                return UM.Theme.getColor("border_field_light")
+                return UM.Theme.getColor("border_field_light");
             }
         }
 
diff --git a/resources/qml/Settings/SettingTextField.qml b/resources/qml/Settings/SettingTextField.qml
index 8ec37f98d2..f0e3b2cacb 100644
--- a/resources/qml/Settings/SettingTextField.qml
+++ b/resources/qml/Settings/SettingTextField.qml
@@ -32,12 +32,12 @@ SettingItem
 
         anchors.fill: parent
 
-        borderColor: (hovered || input.activeFocus) ? UM.Theme.getColor("text_field_border_hovered") : "transparent"
+        borderColor: input.activeFocus ? UM.Theme.getColor("text_field_border_active") : "transparent"
         liningColor:
         {
             if(!enabled)
             {
-                return UM.Theme.getColor("text_field_border_disabled")
+                return UM.Theme.getColor("text_field_border_disabled");
             }
             switch(propertyProvider.properties.validationState)
             {
@@ -51,11 +51,15 @@ SettingItem
                     return UM.Theme.getColor("setting_validation_warning");
             }
             //Validation is OK.
-            if(hovered || input.activeFocus)
+            if(input.activeFocus)
             {
-                return UM.Theme.getColor("text_field_border_hovered")
+                return UM.Theme.getColor("text_field_border_active");
             }
-            return UM.Theme.getColor("text_field_border")
+            if(hovered)
+            {
+                return UM.Theme.getColor("text_field_border_hovered");
+            }
+            return UM.Theme.getColor("text_field_border");
         }
 
         color: {
diff --git a/resources/qml/Widgets/ComboBox.qml b/resources/qml/Widgets/ComboBox.qml
index 54d59817db..988b7c3782 100644
--- a/resources/qml/Widgets/ComboBox.qml
+++ b/resources/qml/Widgets/ComboBox.qml
@@ -31,12 +31,22 @@ ComboBox
         },
         State
         {
+            name: "active"
+            when: control.activeFocus
+            PropertyChanges
+            {
+                target: background
+                borderColor: UM.Theme.getColor("text_field_border_active")
+                liningColor: UM.Theme.getColor("text_field_border_active")
+            }
+        },
+        State
+        {
             name: "highlighted"
-            when: base.hovered || control.hovered || control.activeFocus
+            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 a86f2548cc..085c7b7742 100644
--- a/resources/qml/Widgets/TextField.qml
+++ b/resources/qml/Widgets/TextField.qml
@@ -45,13 +45,23 @@ TextField
         },
         State
         {
+            name: "active"
+            when: control.activeFocus
+            PropertyChanges
+            {
+                target: backgroundRectangle
+                liningColor: UM.Theme.getColor("text_field_border_active")
+                borderColor: UM.Theme.getColor("text_field_border_active")
+            }
+        },
+        State
+        {
             name: "hovered"
-            when: control.hovered || control.activeFocus
+            when: control.hovered && !control.activeFocus
             PropertyChanges
             {
                 target: backgroundRectangle
                 liningColor: UM.Theme.getColor("text_field_border_hovered")
-                borderColor: UM.Theme.getColor("text_field_border_hovered")
             }
         }
     ]