3D-printing/Cura
1
0
Fork 0
mirror of https://github.com/Ultimaker/Cura.git synced 2025-08-08 06:23:59 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Merge pull request #11606 from Ultimaker/CURA-8991_align_input_compontent_styling

Browse source 
[CURA-8991] Align input component styling
This commit is contained in:
Jaime van Kessel 2022-03-07 10:40:39 +01:00 • committed by GitHub
commit 0d2ebcb802
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 146 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/qml/MachineSettings/GcodeTextArea.qml
View file

@ -91,7 +91,7 @@ UM.TooltipArea
}
if (gcodeTextArea.hovered || gcodeTextArea.activeFocus)
{
return UM.Theme.getColor("border_main_light")
return UM.Theme.getColor("border_main")
}
return UM.Theme.getColor("border_field_light")
}

4
resources/qml/MachineSettings/NumericTextFieldWithUnit.qml
View file

@ -77,6 +77,8 @@ UM.TooltipArea
anchors.left: fieldLabel.right
anchors.leftMargin: UM.Theme.getSize("default_margin").width
verticalAlignment: Text.AlignVCenter
selectionColor: UM.Theme.getColor("text_selection")
selectedTextColor: UM.Theme.getColor("setting_control_text")
padding: 0
leftPadding: UM.Theme.getSize("narrow_margin").width
width: numericTextFieldWithUnit.controlWidth
@ -107,7 +109,7 @@ UM.TooltipArea
// Validation is OK.
if (textFieldWithUnit.hovered || textFieldWithUnit.activeFocus)
{
return UM.Theme.getColor("border_main_light")
return UM.Theme.getColor("border_main")
}
return UM.Theme.getColor("border_field_light")
}

2
resources/qml/PrintSetupHeaderButton.qml
View file

@ -69,7 +69,7 @@ ToolButton
{
target: background
color: UM.Theme.getColor("setting_control")
liningColor: UM.Theme.getColor("border_main_light")
liningColor: UM.Theme.getColor("border_main")
}
},
State

2
resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml
View file

@ -129,7 +129,7 @@ Item
background: UM.UnderlineBackground
{
id: backgroundItem
liningColor: intentSelection.hovered ? UM.Theme.getColor("border_main_light") : UM.Theme.getColor("border_field_light")
liningColor: intentSelection.hovered ? UM.Theme.getColor("border_main") : UM.Theme.getColor("border_field_light")
}
UM.SimpleButton

8
resources/qml/Settings/SettingCheckBox.qml
View file

@ -98,7 +98,7 @@ SettingItem
{
if(!enabled)
{
return UM.Theme.getColor("checkbox_border")
return UM.Theme.getColor("checkbox_border_disabled")
}
switch (propertyProvider.properties.validationState)
{
@ -116,7 +116,7 @@ SettingItem
{
return UM.Theme.getColor("checkbox_border_hover")
}
return UM.Theme.getColor("setting_control_border")
return UM.Theme.getColor("checkbox_border")
}
color: {
@ -138,7 +138,7 @@ SettingItem
// Validation is OK.
if (control.containsMouse || control.activeFocus)
{
return UM.Theme.getColor("setting_control_highlight")
return UM.Theme.getColor("checkbox_hover")
}
return UM.Theme.getColor("checkbox")
}
@ -150,7 +150,7 @@ SettingItem
height: UM.Theme.getSize("checkbox_mark").height
width: UM.Theme.getSize("checkbox_mark").width
sourceSize.height: width
color: !enabled ? UM.Theme.getColor("setting_control_disabled_text") : UM.Theme.getColor("setting_control_text");
color: !enabled ? UM.Theme.getColor("checkbox_mark_disabled") : UM.Theme.getColor("checkbox_mark");
source: UM.Theme.getIcon("Check", "low")
opacity: control.checked ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 100; } }

2
resources/qml/Settings/SettingExtruder.qml
View file

@ -135,7 +135,7 @@ SettingItem
}
if (control.hovered || control.activeFocus)
{
return UM.Theme.getColor("border_main_light")
return UM.Theme.getColor("border_main")
}
return UM.Theme.getColor("border_field_light")
}

2
resources/qml/Settings/SettingOptionalExtruder.qml
View file

@ -136,7 +136,7 @@ SettingItem
}
if (control.hovered || control.activeFocus)
{
return UM.Theme.getColor("border_main_light")
return UM.Theme.getColor("border_main")
}
return UM.Theme.getColor("border_field_light")
}

18
resources/qml/Settings/SettingTextField.qml
View file

@ -36,7 +36,7 @@ SettingItem
{
if(!enabled)
{
return UM.Theme.getColor("setting_control_disabled_border")
return UM.Theme.getColor("text_field_border_disabled")
}
switch(propertyProvider.properties.validationState)
{
@ -52,15 +52,15 @@ SettingItem
//Validation is OK.
if(hovered || input.activeFocus)
{
return UM.Theme.getColor("border_main_light")
return UM.Theme.getColor("text_field_border_hovered")
}
return UM.Theme.getColor("border_field_light")
return UM.Theme.getColor("text_field_border")
}
color: {
if(!enabled)
{
return UM.Theme.getColor("setting_control_disabled")
return UM.Theme.getColor("text_field")
}
switch(propertyProvider.properties.validationState)
{
@ -76,18 +76,10 @@ SettingItem
return UM.Theme.getColor("setting_validation_ok")
default:
return UM.Theme.getColor("setting_control")
return UM.Theme.getColor("text_field")
}
}
Rectangle
{
anchors.fill: parent
anchors.margins: Math.round(UM.Theme.getSize("default_lining").width)
color: UM.Theme.getColor("setting_control_highlight")
opacity: !control.hovered ? 0 : propertyProvider.properties.validationState == "ValidatorState.Valid" ? 1.0 : 0.35
}
UM.Label
{
anchors

2
resources/qml/Widgets/ComboBox.qml
View file

@ -33,7 +33,7 @@ ComboBox
{
name: "highlighted"
when: control.hovered || control.activeFocus
PropertyChanges { target: background; liningColor: UM.Theme.getColor("border_main_light")}
PropertyChanges { target: background; liningColor: UM.Theme.getColor("border_main")}
}
]

79
resources/qml/Widgets/RadioButton.qml
View file

@ -1,4 +1,4 @@
// Copyright (c) 2019 Ultimaker B.V.
// Copyright (c) 2022 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.10
@ -13,32 +13,58 @@ import Cura 1.0 as Cura
//
RadioButton
{
id: radioButton
id: control
font: UM.Theme.getFont("default")
states: [
State {
name: "checked"
when: radioButton.checked
name: "selected-hover"
when: control.enabled && control.checked && control.hovered
PropertyChanges
{
target: indicator
color: UM.Theme.getColor("accent_1")
border.width: 0
target: indicator_background
color: UM.Theme.getColor("radio_selected")
border.color: UM.Theme.getColor("radio_border_hover")
}
},
State
{
name: "disabled"
when: !radioButton.enabled
PropertyChanges { target: indicator; color: UM.Theme.getColor("background_1")}
State {
name: "selected"
when: control.enabled && control.checked
PropertyChanges
{
target: indicator_background
color: UM.Theme.getColor("radio_selected")
}
},
State
{
name: "highlighted"
when: radioButton.hovered || radioButton.activeFocus
PropertyChanges { target: indicator; border.color: UM.Theme.getColor("border_main_light")}
State {
name: "hovered"
when: control.enabled && control.hovered
PropertyChanges
{
target: indicator_background
border.color: UM.Theme.getColor("radio_border_hover")
}
},
State {
name: "selected_disabled"
when: !control.enabled && control.checked
PropertyChanges
{
target: indicator_background
color: UM.Theme.getColor("radio_selected_disabled")
border.color: UM.Theme.getColor("radio_border_disabled")
}
},
State {
name: "disabled"
when: !control.enabled
PropertyChanges
{
target: indicator_background
color: UM.Theme.getColor("radio_disabled")
border.color: UM.Theme.getColor("radio_border_disabled")
}
}
]
@ -49,30 +75,35 @@ RadioButton
indicator: Rectangle
{
id: indicator_background
implicitWidth: UM.Theme.getSize("radio_button").width
implicitHeight: UM.Theme.getSize("radio_button").height
anchors.verticalCenter: parent.verticalCenter
anchors.alignWhenCentered: false
radius: width / 2
color: UM.Theme.getColor("background_2")
color: UM.Theme.getColor("radio")
border.width: UM.Theme.getSize("default_lining").width
border.color: UM.Theme.getColor("text_disabled")
border.color: UM.Theme.getColor("radio_border")
Rectangle
{
id: indicator_dot
width: (parent.width / 2) | 0
height: width
anchors.centerIn: parent
radius: width / 2
color: radioButton.enabled ? UM.Theme.getColor("background_2") : UM.Theme.getColor("background_1")
visible: radioButton.checked
color: control.enabled ? UM.Theme.getColor("radio_dot") : UM.Theme.getColor("radio_dot_disabled")
visible: control.checked
}
}
contentItem: UM.Label
{
leftPadding: radioButton.indicator.width + radioButton.spacing
text: radioButton.text
font: radioButton.font
leftPadding: control.indicator.width + control.spacing
text: control.text
font: control.font
color: control.enabled ? UM.Theme.getColor("radio_text"): UM.Theme.getColor("radio_text_disabled")
}
}

19
resources/qml/Widgets/TextField.qml
View file

@ -1,4 +1,4 @@
// Copyright (c) 2021 Ultimaker B.V.
// Copyright (c) 2022 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.10
@ -13,7 +13,7 @@ import Cura 1.1 as Cura
//
TextField
{
id: textField
id: control
property alias leftIcon: iconLeft.source
@ -22,7 +22,7 @@ TextField
hoverEnabled: true
selectByMouse: true
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
color: UM.Theme.getColor("text_field_text")
renderType: Text.NativeRendering
selectionColor: UM.Theme.getColor("text_selection")
leftPadding: iconLeft.visible ? iconLeft.width + UM.Theme.getSize("default_margin").width * 2 : UM.Theme.getSize("thin_margin").width
@ -31,20 +31,21 @@ TextField
State
{
name: "disabled"
when: !textField.enabled
PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_control_disabled")}
when: !control.enabled
PropertyChanges { target: control; color: UM.Theme.getColor("text_field_text_disabled")}
PropertyChanges { target: backgroundRectangle; liningColor: UM.Theme.getColor("text_field_border_disabled")}
},
State
{
name: "invalid"
when: !textField.acceptableInput
when: !control.acceptableInput
PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_validation_error_background")}
},
State
{
name: "hovered"
when: textField.hovered || textField.activeFocus
PropertyChanges { target: backgroundRectangle; liningColor: UM.Theme.getColor("border_main_light")}
when: control.hovered || control.activeFocus
PropertyChanges { target: backgroundRectangle; liningColor: UM.Theme.getColor("text_field_border_hovered")}
}
]
@ -66,7 +67,7 @@ TextField
visible: source != ""
height: UM.Theme.getSize("small_button_icon").height
width: visible ? height : 0
color: textField.color
color: control.color
}
}
}