mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-08-08 22:35:03 -06: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
2 changed files with 112 additions and 15 deletions
111
styles.qml
111
styles.qml
|
|
@ -37,7 +37,19 @@ QtObject {
|
|||
|
||||
implicitWidth: UM.Theme.sizes.button.width;
|
||||
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; } }
|
||||
cornerSize: UM.Theme.sizes.default_margin.width;
|
||||
}
|
||||
|
|
@ -59,17 +71,20 @@ QtObject {
|
|||
property Component sidebar_category: Component {
|
||||
ButtonStyle {
|
||||
background: UM.AngledCornerRectangle {
|
||||
property bool down: control.pressed || (control.checkable && control.checked);
|
||||
implicitHeight: UM.Theme.sizes.section.height;
|
||||
color: {
|
||||
if(!control.enabled) {
|
||||
return UM.Theme.colors.button_disabled;
|
||||
} else if(down) {
|
||||
return UM.Theme.colors.button_down;
|
||||
if(control.color) {
|
||||
return control.color;
|
||||
} else if(!control.enabled) {
|
||||
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) {
|
||||
return UM.Theme.colors.button_hover;
|
||||
return UM.Theme.colors.setting_category_hover;
|
||||
} else {
|
||||
return UM.Theme.colors.button;
|
||||
return UM.Theme.colors.setting_category;
|
||||
}
|
||||
}
|
||||
Behavior on color { ColorAnimation { duration: 50; } }
|
||||
|
|
@ -79,8 +94,18 @@ QtObject {
|
|||
anchors.fill: parent;
|
||||
anchors.margins: 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;
|
||||
controlFont: UM.Theme.fonts.default;
|
||||
|
||||
validationErrorColor: Qt.rgba(1.0, 0.0, 0.0, 1.0);
|
||||
validationWarningColor: Qt.rgba(1.0, 1.0, 0.0, 1.0);
|
||||
validationOkColor: Qt.rgba(1.0, 1.0, 1.0, 1.0);
|
||||
validationErrorColor: UM.Theme.colors.setting_validation_error;
|
||||
validationWarningColor: UM.Theme.colors.setting_validation_warning;
|
||||
validationOkColor: UM.Theme.colors.setting_validation_ok;
|
||||
|
||||
unitRightMargin: UM.Theme.sizes.setting_unit_margin.width;
|
||||
unitColor: UM.Theme.colors.setting_unit;
|
||||
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_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_disabled": [12, 169, 227, 255],
|
||||
"button_disabled": [245, 245, 245, 255],
|
||||
|
||||
"scrollbar_background": [245, 245, 245, 255],
|
||||
"scrollbar_handle": [205, 202, 201, 255],
|
||||
"scrollbar_handle_hover": [174, 174, 174, 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_control": [255, 255, 255, 255],
|
||||
"setting_control_highlight": [245, 245, 245, 255],
|
||||
|
|
@ -60,11 +68,15 @@
|
|||
"setting_control_text": [35, 35, 35, 255],
|
||||
"setting_control_hover": [35, 35, 35, 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_border": [205, 202, 201, 255],
|
||||
"slider_groove_fill": [205, 202, 201, 255],
|
||||
"slider_handle": [12, 169, 227, 255],
|
||||
"slider_handle_hover": [34, 150, 190, 255],
|
||||
|
||||
"checkbox": [255, 255, 255, 255],
|
||||
"checkbox_hover": [245, 245, 245, 255],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue