mirror of
https://git.mirrors.martin98.com/https://github.com/Ultimaker/Cura
synced 2025-08-14 20:45:54 +08:00
Add active hover color, validation warning/error colors and checkbox/slider styles to theme
This commit is contained in:
Arjen Hiemstra
parent
0cbf105749
commit
92733808ba
111
styles.qml
111
styles.qml
@ -37,7 +37,19 @@ QtObject {
|
|||||||
|
|
||||||
implicitWidth: UM.Theme.sizes.button.width;
|
implicitWidth: UM.Theme.sizes.button.width;
|
||||||
implicitHeight: UM.Theme.sizes.button.height;
|
implicitHeight: UM.Theme.sizes.button.height;
|
||||||
color: down ? UM.Theme.colors.button_down : control.hovered ? UM.Theme.colors.button_hover : UM.Theme.colors.button;
|
color: {
|
||||||
|
if(!control.enabled) {
|
||||||
|
return UM.Theme.colors.button_disabled;
|
||||||
|
} else if(control.checkable && control.checked && control.hovered) {
|
||||||
|
return UM.Theme.colors.button_active_hover;
|
||||||
|
} else if(control.pressed || (control.checkable && control.checked)) {
|
||||||
|
return UM.Theme.colors.button_active;
|
||||||
|
} else if(control.hovered) {
|
||||||
|
return UM.Theme.colors.button_hover;
|
||||||
|
} else {
|
||||||
|
return UM.Theme.colors.button;
|
||||||
|
}
|
||||||
|
}
|
||||||
Behavior on color { ColorAnimation { duration: 50; } }
|
Behavior on color { ColorAnimation { duration: 50; } }
|
||||||
cornerSize: UM.Theme.sizes.default_margin.width;
|
cornerSize: UM.Theme.sizes.default_margin.width;
|
||||||
}
|
}
|
||||||
@ -59,17 +71,20 @@ QtObject {
|
|||||||
property Component sidebar_category: Component {
|
property Component sidebar_category: Component {
|
||||||
ButtonStyle {
|
ButtonStyle {
|
||||||
background: UM.AngledCornerRectangle {
|
background: UM.AngledCornerRectangle {
|
||||||
property bool down: control.pressed || (control.checkable && control.checked);
|
|
||||||
implicitHeight: UM.Theme.sizes.section.height;
|
implicitHeight: UM.Theme.sizes.section.height;
|
||||||
color: {
|
color: {
|
||||||
if(!control.enabled) {
|
if(control.color) {
|
||||||
return UM.Theme.colors.button_disabled;
|
return control.color;
|
||||||
} else if(down) {
|
} else if(!control.enabled) {
|
||||||
return UM.Theme.colors.button_down;
|
return UM.Theme.colors.setting_category_disabled;
|
||||||
|
} else if(control.hovered && control.checkable && control.checked) {
|
||||||
|
return UM.Theme.colors.setting_category_active_hover;
|
||||||
|
} else if(control.pressed || (control.checkable && control.checked)) {
|
||||||
|
return UM.Theme.colors.setting_category_active;
|
||||||
} else if(control.hovered) {
|
} else if(control.hovered) {
|
||||||
return UM.Theme.colors.button_hover;
|
return UM.Theme.colors.setting_category_hover;
|
||||||
} else {
|
} else {
|
||||||
return UM.Theme.colors.button;
|
return UM.Theme.colors.setting_category;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Behavior on color { ColorAnimation { duration: 50; } }
|
Behavior on color { ColorAnimation { duration: 50; } }
|
||||||
@ -79,8 +94,18 @@ QtObject {
|
|||||||
anchors.fill: parent;
|
anchors.fill: parent;
|
||||||
anchors.margins: UM.Theme.sizes.default_margin.width;
|
anchors.margins: UM.Theme.sizes.default_margin.width;
|
||||||
spacing: UM.Theme.sizes.default_margin.width;
|
spacing: UM.Theme.sizes.default_margin.width;
|
||||||
Image { anchors.verticalCenter: parent.verticalCenter; source: control.iconSource; }
|
|
||||||
Label { anchors.verticalCenter: parent.verticalCenter; text: control.text; font: UM.Theme.fonts.large; color: UM.Theme.colors.button_text }
|
Image {
|
||||||
|
anchors.verticalCenter: parent.verticalCenter;
|
||||||
|
source: control.iconSource;
|
||||||
|
}
|
||||||
|
|
||||||
|
Label {
|
||||||
|
anchors.verticalCenter: parent.verticalCenter;
|
||||||
|
text: control.text;
|
||||||
|
font: UM.Theme.fonts.setting_category;
|
||||||
|
color: UM.Theme.colors.setting_category_text;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -127,12 +152,72 @@ QtObject {
|
|||||||
controlTextColor: UM.Theme.colors.setting_control_text;
|
controlTextColor: UM.Theme.colors.setting_control_text;
|
||||||
controlFont: UM.Theme.fonts.default;
|
controlFont: UM.Theme.fonts.default;
|
||||||
|
|
||||||
validationErrorColor: Qt.rgba(1.0, 0.0, 0.0, 1.0);
|
validationErrorColor: UM.Theme.colors.setting_validation_error;
|
||||||
validationWarningColor: Qt.rgba(1.0, 1.0, 0.0, 1.0);
|
validationWarningColor: UM.Theme.colors.setting_validation_warning;
|
||||||
validationOkColor: Qt.rgba(1.0, 1.0, 1.0, 1.0);
|
validationOkColor: UM.Theme.colors.setting_validation_ok;
|
||||||
|
|
||||||
unitRightMargin: UM.Theme.sizes.setting_unit_margin.width;
|
unitRightMargin: UM.Theme.sizes.setting_unit_margin.width;
|
||||||
unitColor: UM.Theme.colors.setting_unit;
|
unitColor: UM.Theme.colors.setting_unit;
|
||||||
unitFont: UM.Theme.fonts.default;
|
unitFont: UM.Theme.fonts.default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
property Component checkbox: Component {
|
||||||
|
CheckBoxStyle {
|
||||||
|
background: Item { }
|
||||||
|
indicator: Rectangle {
|
||||||
|
implicitWidth: UM.Theme.sizes.checkbox.width;
|
||||||
|
implicitHeight: UM.Theme.sizes.checkbox.height;
|
||||||
|
|
||||||
|
color: control.hovered ? UM.Theme.colors.checkbox_hover : UM.Theme.colors.checkbox;
|
||||||
|
Behavior on color { ColorAnimation { duration: 50; } }
|
||||||
|
|
||||||
|
border.width: 1
|
||||||
|
border.color: UM.Theme.colors.checkbox_border;
|
||||||
|
|
||||||
|
Label {
|
||||||
|
anchors.centerIn: parent;
|
||||||
|
color: UM.Theme.colors.checkbox_mark;
|
||||||
|
|
||||||
|
text: "✓";
|
||||||
|
|
||||||
|
opacity: control.checked ? 1 : 0;
|
||||||
|
Behavior on opacity { NumberAnimation { duration: 100; } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
label: Label {
|
||||||
|
text: control.text;
|
||||||
|
color: UM.Theme.colors.checkbox_text;
|
||||||
|
font: UM.Theme.fonts.default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
property Component slider: Component {
|
||||||
|
SliderStyle {
|
||||||
|
groove: Rectangle {
|
||||||
|
implicitWidth: control.width;
|
||||||
|
implicitHeight: UM.Theme.sizes.slider_groove.height;
|
||||||
|
|
||||||
|
color: UM.Theme.colors.slider_groove;
|
||||||
|
border.width: 1;
|
||||||
|
border.color: UM.Theme.colors.slider_groove_border;
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
anchors {
|
||||||
|
left: parent.left;
|
||||||
|
top: parent.top;
|
||||||
|
bottom: parent.bottom;
|
||||||
|
}
|
||||||
|
color: UM.Theme.colors.slider_groove_fill;
|
||||||
|
width: (control.value / (control.maximumValue - control.minimumValue)) * parent.width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
handle: Rectangle {
|
||||||
|
width: UM.Theme.sizes.slider_handle.width;
|
||||||
|
height: UM.Theme.sizes.slider_handle.height;
|
||||||
|
color: control.hovered ? UM.Theme.colors.slider_handle_hover : UM.Theme.colors.slider_handle;
|
||||||
|
Behavior on color { ColorAnimation { duration: 50; } }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
16
theme.json
16
theme.json
@ -44,15 +44,23 @@
|
|||||||
|
|
||||||
"button": [205, 202, 201, 255],
|
"button": [205, 202, 201, 255],
|
||||||
"button_hover": [174, 174, 174, 255],
|
"button_hover": [174, 174, 174, 255],
|
||||||
"button_down": [12, 169, 227, 255],
|
"button_active": [12, 169, 227, 255],
|
||||||
|
"button_active_hover": [34, 150, 190, 255],
|
||||||
"button_text": [255, 255, 255, 255],
|
"button_text": [255, 255, 255, 255],
|
||||||
"button_disabled": [12, 169, 227, 255],
|
"button_disabled": [245, 245, 245, 255],
|
||||||
|
|
||||||
"scrollbar_background": [245, 245, 245, 255],
|
"scrollbar_background": [245, 245, 245, 255],
|
||||||
"scrollbar_handle": [205, 202, 201, 255],
|
"scrollbar_handle": [205, 202, 201, 255],
|
||||||
"scrollbar_handle_hover": [174, 174, 174, 255],
|
"scrollbar_handle_hover": [174, 174, 174, 255],
|
||||||
"scrollbar_handle_down": [12, 159, 227, 255],
|
"scrollbar_handle_down": [12, 159, 227, 255],
|
||||||
|
|
||||||
|
"setting_category": [205, 202, 201, 255],
|
||||||
|
"setting_category_disabled": [245, 245, 245, 255],
|
||||||
|
"setting_category_hover": [174, 174, 174, 255],
|
||||||
|
"setting_category_active": [12, 169, 227, 255],
|
||||||
|
"setting_category_active_hover": [34, 150, 190, 255],
|
||||||
|
"setting_category_text": [255, 255, 255, 255],
|
||||||
|
|
||||||
"setting_label": [174, 174, 174, 255],
|
"setting_label": [174, 174, 174, 255],
|
||||||
"setting_control": [255, 255, 255, 255],
|
"setting_control": [255, 255, 255, 255],
|
||||||
"setting_control_highlight": [245, 245, 245, 255],
|
"setting_control_highlight": [245, 245, 245, 255],
|
||||||
@ -60,11 +68,15 @@
|
|||||||
"setting_control_text": [35, 35, 35, 255],
|
"setting_control_text": [35, 35, 35, 255],
|
||||||
"setting_control_hover": [35, 35, 35, 255],
|
"setting_control_hover": [35, 35, 35, 255],
|
||||||
"setting_unit": [174, 174, 174, 255],
|
"setting_unit": [174, 174, 174, 255],
|
||||||
|
"setting_validation_error": [255, 57, 14, 255],
|
||||||
|
"setting_validation_warning": [255, 186, 15, 255],
|
||||||
|
"setting_validation_ok": [255, 255, 255, 255],
|
||||||
|
|
||||||
"slider_groove": [245, 245, 245, 255],
|
"slider_groove": [245, 245, 245, 255],
|
||||||
"slider_groove_border": [205, 202, 201, 255],
|
"slider_groove_border": [205, 202, 201, 255],
|
||||||
"slider_groove_fill": [205, 202, 201, 255],
|
"slider_groove_fill": [205, 202, 201, 255],
|
||||||
"slider_handle": [12, 169, 227, 255],
|
"slider_handle": [12, 169, 227, 255],
|
||||||
|
"slider_handle_hover": [34, 150, 190, 255],
|
||||||
|
|
||||||
"checkbox": [255, 255, 255, 255],
|
"checkbox": [255, 255, 255, 255],
|
||||||
"checkbox_hover": [245, 245, 245, 255],
|
"checkbox_hover": [245, 245, 245, 255],
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user