diff --git a/styles.qml b/styles.qml index 1d140e2e4c..b90a8711dd 100644 --- a/styles.qml +++ b/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; } } + } + } + } } diff --git a/theme.json b/theme.json index 3880984871..403e44adc9 100644 --- a/theme.json +++ b/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],