diff --git a/resources/qml/Sidebar.qml b/resources/qml/Sidebar.qml index ba5106c767..132d1d2f41 100755 --- a/resources/qml/Sidebar.qml +++ b/resources/qml/Sidebar.qml @@ -408,18 +408,34 @@ Rectangle } ExclusiveGroup { id: modeMenuGroup; } - Text + Label { id: toggleLeftText anchors.right: modeToggleSwitch.left - anchors.rightMargin: UM.Theme.getSize("toggle_button_text_anchoring_margin").width + anchors.rightMargin: UM.Theme.getSize("default_margin").width anchors.verticalCenter: parent.verticalCenter text: "" - color: UM.Theme.getColor("toggle_active_text") + color: + { + if(toggleLeftTextMouseArea.containsMouse) + { + return UM.Theme.getColor("mode_switch_text_hover"); + } + else if(!modeToggleSwitch.checked) + { + return UM.Theme.getColor("mode_switch_text_checked"); + } + else + { + return UM.Theme.getColor("mode_switch_text"); + } + } font: UM.Theme.getFont("default") MouseArea { + id: toggleLeftTextMouseArea + hoverEnabled: true anchors.fill: parent onClicked: { @@ -438,9 +454,19 @@ Rectangle id: modeToggleSwitch checked: false anchors.right: toggleRightText.left - anchors.rightMargin: UM.Theme.getSize("toggle_button_text_anchoring_margin").width + anchors.rightMargin: UM.Theme.getSize("default_margin").width anchors.verticalCenter: parent.verticalCenter + property bool _hovered: modeToggleSwitchMouseArea.containsMouse || toggleLeftTextMouseArea.containsMouse || toggleRightTextMouseArea.containsMouse + + MouseArea + { + id: modeToggleSwitchMouseArea + anchors.fill: parent + hoverEnabled: true + acceptedButtons: Qt.NoButton + } + onClicked: { var index = 0; @@ -457,20 +483,36 @@ Rectangle UM.Preferences.setValue("cura/active_mode", index); } - style: UM.Theme.styles.toggle_button + style: UM.Theme.styles.mode_switch } - Text + Label { id: toggleRightText anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter text: "" - color: UM.Theme.getColor("toggle_active_text") + color: + { + if(toggleRightTextMouseArea.containsMouse) + { + return UM.Theme.getColor("mode_switch_text_hover"); + } + else if(modeToggleSwitch.checked) + { + return UM.Theme.getColor("mode_switch_text_checked"); + } + else + { + return UM.Theme.getColor("mode_switch_text"); + } + } font: UM.Theme.getFont("default") MouseArea { + id: toggleRightTextMouseArea + hoverEnabled: true anchors.fill: parent onClicked: { diff --git a/resources/qml/SidebarSimple.qml b/resources/qml/SidebarSimple.qml index 8f43e411ff..915530bbaf 100644 --- a/resources/qml/SidebarSimple.qml +++ b/resources/qml/SidebarSimple.qml @@ -240,6 +240,8 @@ Item CheckBox { id: enableSupportCheckBox + property alias _hovered: enableSupportMouseArea.containsMouse + anchors.top: parent.top anchors.left: enableSupportLabel.right anchors.leftMargin: UM.Theme.getSize("default_margin").width diff --git a/resources/themes/cura/styles.qml b/resources/themes/cura/styles.qml index 899ea3cf79..ffe866f2c6 100755 --- a/resources/themes/cura/styles.qml +++ b/resources/themes/cura/styles.qml @@ -8,19 +8,25 @@ import QtQuick.Controls.Styles 1.1 import UM 1.1 as UM QtObject { - property Component toggle_button: Component { + property Component mode_switch: Component { SwitchStyle { groove: Rectangle { - implicitWidth: UM.Theme.getSize("toggle_button_background_implicit_size").width - implicitHeight: UM.Theme.getSize("toggle_button_background_implicit_size").height - radius: UM.Theme.getSize("toggle_button_radius").width - border.color: { - if (control.pressed || (control.checkable && control.checked)) { - return UM.Theme.getColor("sidebar_header_active"); - } else if(control.hovered) { - return UM.Theme.getColor("sidebar_header_hover"); + implicitWidth: UM.Theme.getSize("mode_switch").width + implicitHeight: UM.Theme.getSize("mode_switch").height + radius: implicitHeight / 2 + color: { + if(control.hovered || control._hovered) { + return UM.Theme.getColor("mode_switch_hover"); } else { - return UM.Theme.getColor("sidebar_header_bar"); + return UM.Theme.getColor("mode_switch"); + } + } + Behavior on color { ColorAnimation { duration: 50; } } + border.color: { + if(control.hovered || control._hovered) { + return UM.Theme.getColor("mode_switch_border_hover"); + } else { + return UM.Theme.getColor("mode_switch_border"); } } Behavior on border.color { ColorAnimation { duration: 50; } } @@ -28,9 +34,9 @@ QtObject { } handle: Rectangle { - implicitWidth: UM.Theme.getSize("toggle_button_knob_implicit_size").width - implicitHeight: UM.Theme.getSize("toggle_button_knob_implicit_size").height - radius: UM.Theme.getSize("toggle_button_radius").width + implicitWidth: implicitHeight + implicitHeight: UM.Theme.getSize("mode_switch").height + radius: implicitHeight / 2 color: { if (control.pressed || (control.checkable && control.checked)) { diff --git a/resources/themes/cura/theme.json b/resources/themes/cura/theme.json index 084ee27bb2..da58af4c14 100644 --- a/resources/themes/cura/theme.json +++ b/resources/themes/cura/theme.json @@ -175,6 +175,15 @@ "checkbox_mark": [24, 41, 77, 255], "checkbox_text": [24, 41, 77, 255], + "mode_switch": [255, 255, 255, 255], + "mode_switch_hover": [255, 255, 255, 255], + "mode_switch_border": [127, 127, 127, 255], + "mode_switch_border_hover": [12, 169, 227, 255], + "mode_switch_handle": [24, 41, 77, 255], + "mode_switch_text": [24, 41, 77, 255], + "mode_switch_text_hover": [24, 41, 77, 255], + "mode_switch_text_checked": [12, 169, 227, 255], + "tooltip": [12, 169, 227, 255], "tooltip_text": [255, 255, 255, 255], @@ -301,6 +310,7 @@ "layerview_row_spacing": [0.0, 0.5], "checkbox": [2.0, 2.0], + "mode_switch": [2.0, 1.0], "tooltip": [20.0, 10.0], "tooltip_margins": [1.0, 1.0], @@ -319,11 +329,6 @@ "infill_button_margin": [0.5, 0.5], - "jobspecs_line": [2.0, 2.0], - - "toggle_button_text_anchoring_margin": [1.0, 1.0], - "toggle_button_radius": [1.0, 1.0], - "toggle_button_background_implicit_size": [2.0, 1.0], - "toggle_button_knob_implicit_size": [1.0, 1.0] + "jobspecs_line": [2.0, 2.0] } }