From 7fda81b6788a7c2a4fe8f96866b777edd16dd4ef Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Mon, 9 May 2022 17:42:17 +0200 Subject: [PATCH] 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. --- .../qml/MachineSettings/NumericTextFieldWithUnit.qml | 3 ++- .../qml/PrintSetupSelector/Custom/CustomPrintSetup.qml | 3 ++- resources/qml/Settings/SettingExtruder.qml | 5 +++-- resources/qml/Settings/SettingOptionalExtruder.qml | 5 +++-- resources/qml/Settings/SettingTextField.qml | 1 + resources/qml/Widgets/ComboBox.qml | 9 +++++++-- resources/qml/Widgets/TextField.qml | 7 ++++++- resources/themes/cura-dark/theme.json | 2 +- resources/themes/cura-light/theme.json | 2 +- 9 files changed, 26 insertions(+), 11 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") + } } ] diff --git a/resources/themes/cura-dark/theme.json b/resources/themes/cura-dark/theme.json index b7c1718c0d..34696fb35e 100644 --- a/resources/themes/cura-dark/theme.json +++ b/resources/themes/cura-dark/theme.json @@ -15,7 +15,7 @@ "accent_2": [16, 70, 156, 255], "border_main": [118, 118, 119, 255], "border_accent_1": [255, 255, 255, 255], - "border_accent_2": [16, 70, 156, 255], + "border_accent_2": [243, 243, 243, 255], "border_field": [57, 57, 58, 255], "text_default": [255, 255, 255, 255], diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index cd889acbf3..616354659f 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -363,7 +363,7 @@ "text_field": "background_1", "text_field_border": [180, 180, 180, 255], - "text_field_border_hovered": "border_main", + "text_field_border_hovered": "border_accent_2", "text_field_border_disabled": "background_2", "text_field_text": "text_default", "text_field_text_disabled": "text_disabled",