Update style of TextFIeld and ComboxBox to match new designs. Remove borders and radius on corners.

Update Prefereces title to be bold and centered with button

Make prefereces pages selection buttons correct height.

CURA-8688
This commit is contained in:
j.delarago 2022-02-28 11:20:31 +01:00
parent b4edb89eb8
commit 440d6fa525
2 changed files with 5 additions and 32 deletions

View File

@ -26,7 +26,6 @@ ComboBox
{ {
name: "disabled" name: "disabled"
when: !control.enabled when: !control.enabled
PropertyChanges { target: backgroundRectangle.border; color: UM.Theme.getColor("setting_control_disabled_border")}
PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_control_disabled")} PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_control_disabled")}
PropertyChanges { target: contentLabel; color: UM.Theme.getColor("setting_control_disabled_text")} PropertyChanges { target: contentLabel; color: UM.Theme.getColor("setting_control_disabled_text")}
}, },
@ -34,20 +33,13 @@ ComboBox
{ {
name: "highlighted" name: "highlighted"
when: control.hovered || control.activeFocus when: control.hovered || control.activeFocus
PropertyChanges { target: backgroundRectangle.border; color: UM.Theme.getColor("setting_control_border_highlight") }
PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_control_highlight")} PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_control_highlight")}
} }
] ]
background: Rectangle background: UM.UnderlineBackground
{ {
id: backgroundRectangle id: backgroundRectangle
color: UM.Theme.getColor("setting_control")
radius: UM.Theme.getSize("setting_control_radius").width
border.width: UM.Theme.getSize("default_lining").width
border.color: UM.Theme.getColor("setting_control_border")
} }
indicator: UM.RecolorImage indicator: UM.RecolorImage

View File

@ -4,7 +4,7 @@
import QtQuick 2.10 import QtQuick 2.10
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import UM 1.3 as UM import UM 1.5 as UM
import Cura 1.1 as Cura import Cura 1.1 as Cura
@ -17,6 +17,8 @@ TextField
property alias leftIcon: iconLeft.source property alias leftIcon: iconLeft.source
height: UM.Theme.getSize("setting_control").height
hoverEnabled: true hoverEnabled: true
selectByMouse: true selectByMouse: true
font: UM.Theme.getFont("default") font: UM.Theme.getFont("default")
@ -29,45 +31,24 @@ TextField
{ {
name: "disabled" name: "disabled"
when: !textField.enabled when: !textField.enabled
PropertyChanges { target: backgroundRectangle.border; color: UM.Theme.getColor("setting_control_disabled_border")}
PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_control_disabled")} PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_control_disabled")}
}, },
State State
{ {
name: "invalid" name: "invalid"
when: !textField.acceptableInput when: !textField.acceptableInput
PropertyChanges { target: backgroundRectangle.border; color: UM.Theme.getColor("setting_validation_error")}
PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_validation_error_background")} PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_validation_error_background")}
}, },
State State
{ {
name: "hovered" name: "hovered"
when: textField.hovered || textField.activeFocus when: textField.hovered || textField.activeFocus
PropertyChanges { target: backgroundRectangle.border; color: UM.Theme.getColor("setting_control_border_highlight") }
} }
] ]
background: Rectangle background: UM.UnderlineBackground
{ {
id: backgroundRectangle id: backgroundRectangle
color: UM.Theme.getColor("main_background")
radius: UM.Theme.getSize("setting_control_radius").width
border.color:
{
if (!textField.enabled)
{
return UM.Theme.getColor("setting_control_disabled_border")
}
if (textField.hovered || textField.activeFocus)
{
return UM.Theme.getColor("setting_control_border_highlight")
}
return UM.Theme.getColor("setting_control_border")
}
//Optional icon added on the left hand side. //Optional icon added on the left hand side.
UM.RecolorImage UM.RecolorImage
{ {