Add hover effect to mode switch control

While simplifying theme additions
This commit is contained in:
fieldOfView 2017-04-30 22:52:54 +02:00
parent 98aca20197
commit 0c6a5328c8
3 changed files with 41 additions and 20 deletions

View File

@ -412,7 +412,7 @@ Rectangle
{
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")
@ -438,9 +438,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 alias _hovered: enableSupportMouseArea.containsMouse
MouseArea
{
id: enableSupportMouseArea
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton
}
onClicked:
{
var index = 0;

View File

@ -11,16 +11,22 @@ QtObject {
property Component toggle_button: 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("toggle_button").width
implicitHeight: UM.Theme.getSize("toggle_button").height
radius: implicitHeight / 2
color: {
if(control.hovered || control._hovered) {
return UM.Theme.getColor("toggle_button_hover");
} else {
return UM.Theme.getColor("sidebar_header_bar");
return UM.Theme.getColor("toggle_button");
}
}
Behavior on color { ColorAnimation { duration: 50; } }
border.color: {
if(control.hovered || control._hovered) {
return UM.Theme.getColor("toggle_button_border_hover");
} else {
return UM.Theme.getColor("toggle_button_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("toggle_button").height
radius: implicitHeight / 2
color: {
if (control.pressed || (control.checkable && control.checked)) {

View File

@ -175,6 +175,15 @@
"checkbox_mark": [24, 41, 77, 255],
"checkbox_text": [24, 41, 77, 255],
"toggle_button": [255, 255, 255, 255],
"toggle_button_hover": [255, 255, 255, 255],
"toggle_button_border": [127, 127, 127, 255],
"toggle_button_border_hover": [12, 169, 227, 255],
"toggle_button_handle": [24, 41, 77, 255],
"toggle_button_text": [24, 41, 77, 255],
"toggle_button_text_hover": [24, 41, 77, 255],
"toggle_button_text_selected": [24, 41, 77, 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],
"toggle_button": [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]
}
}