3D-printing/Cura
1
0
Fork 0
mirror of https://github.com/Ultimaker/Cura.git synced 2025-08-09 14:55:03 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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
}
}
}

30
resources/themes/cura-dark/theme.json
View file

@ -23,7 +23,20 @@
"text_primary_button": [255, 255, 255, 255],
"text_secondary_button": [255, 255, 255, 255],
"text_link_hover": [156, 195, 255, 255],
"text_lighter": [243, 243, 243, 255]
"text_lighter": [243, 243, 243, 255],
"um_green_1": [233, 245, 237, 255],
"um_green_5": [36, 162, 73, 255],
"um_green_9": [31, 44, 36, 255],
"um_red_1": [251, 232, 233, 255],
"um_red_5": [218, 30, 40, 255],
"um_red_9": [59, 31, 33, 255],
"um_orange_1": [255, 235, 221, 255],
"um_orange_5": [252, 123, 30, 255],
"um_orange_9": [64, 45, 32, 255],
"um_yellow_1": [255, 248, 225, 255],
"um_yellow_5": [253, 209, 58, 255],
"um_yellow_9": [64, 58, 36, 255]
},
"colors": {
@ -140,10 +153,8 @@
"setting_control_disabled_text": [255, 255, 255, 101],
"setting_control_disabled_border": [255, 255, 255, 101],
"setting_unit": [255, 255, 255, 127],
"setting_validation_error_background": [59, 31, 53, 255],
"setting_validation_error": [212, 31, 53, 255],
"setting_validation_warning_background": [62, 54, 46, 255],
"setting_validation_warning": [245, 166, 35, 255],
"setting_validation_error_background": "um_red_9",
"setting_validation_warning_background": "um_yellow_9",
"setting_validation_ok": "background_2",
"progressbar_background": [255, 255, 255, 48],
@ -155,15 +166,6 @@
"slider_handle": [255, 255, 255, 255],
"slider_handle_active": [68, 192, 255, 255],
"checkbox": "background_1",
"checkbox_hover": [43, 48, 52, 255],
"checkbox_border": "text_disabled",
"checkbox_border_hover": "border_main",
"checkbox_mark": "text_default",
"checkbox_square": "text_disabled",
"checkbox_text": "text_default",
"checkbox_disabled": "background_2",
"category_background": "background_3",
"tooltip": "background_2",

58
resources/themes/cura-light/theme.json
View file

@ -188,7 +188,20 @@
"text_primary_button": [255, 255, 255, 255],
"text_secondary_button": [25, 110, 240, 255],
"text_link_hover": [16, 70, 156, 255],
"text_lighter": [108, 108, 108, 255]
"text_lighter": [108, 108, 108, 255],
"um_green_1": [233, 245, 237, 255],
"um_green_5": [36, 162, 73, 255],
"um_green_9": [31, 44, 36, 255],
"um_red_1": [251, 232, 233, 255],
"um_red_5": [218, 30, 40, 255],
"um_red_9": [59, 31, 33, 255],
"um_orange_1": [255, 235, 221, 255],
"um_orange_5": [252, 123, 30, 255],
"um_orange_9": [64, 45, 32, 255],
"um_yellow_1": [255, 248, 225, 255],
"um_yellow_5": [253, 209, 58, 255],
"um_yellow_9": [64, 58, 36, 255]
},
"colors": {
@ -304,10 +317,10 @@
"setting_control_disabled_text": [127, 127, 127, 255],
"setting_control_disabled_border": [127, 127, 127, 255],
"setting_unit": [127, 127, 127, 255],
"setting_validation_error_background": [255, 66, 60, 255],
"setting_validation_error": [127, 127, 127, 255],
"setting_validation_warning_background": [255, 145, 62, 255],
"setting_validation_warning": [127, 127, 127, 255],
"setting_validation_error_background": "um_red_1",
"setting_validation_error": "um_red_5",
"setting_validation_warning_background": "um_yellow_1",
"setting_validation_warning": "um_yellow_5",
"setting_validation_ok": "background_2",
"material_compatibility_warning": [243, 166, 59, 255],
@ -324,13 +337,36 @@
"quality_slider_unavailable": [179, 179, 179, 255],
"quality_slider_available": [0, 0, 0, 255],
"checkbox": [255, 255, 255, 255],
"checkbox_hover": "border_main",
"checkbox_border": [180, 180, 180, 255],
"checkbox_border_hover": [25, 110, 240, 255],
"checkbox_mark": [35, 35, 35, 255],
"checkbox": "background_1",
"checkbox_hover": "background_1",
"checkbox_disabled": "background_2",
"checkbox_text": [0, 12, 26, 255],
"checkbox_border": [180, 180, 180, 255],
"checkbox_border_hover": "border_main",
"checkbox_border_disabled": "text_disabled",
"checkbox_mark": "text_default",
"checkbox_mark_disabled": "text_disabled",
"checkbox_square": [180, 180, 180, 255],
"checkbox_text": "text_default",
"checkbox_text_disabled": "text_disabled",
"radio": "background_1",
"radio_disabled": "background_2",
"radio_selected": "accent_1",
"radio_selected_disabled": "text_disabled",
"radio_border": [180, 180, 180, 255],
"radio_border_hover": "border_main",
"radio_border_disabled": "text_disabled",
"radio_dot": "background_1",
"radio_dot_disabled": "background_2",
"radio_text": "text_default",
"radio_text_disabled": "text_disabled",
"text_field": "background_1",
"text_field_border": [180, 180, 180, 255],
"text_field_border_hovered": "border_main",
"text_field_border_disabled": "border_main",
"text_field_text": "text_default",
"text_field_text_disabled": "text_disabled",
"category_background": "background_2",