Add hover effect to mode switch text labels

This commit is contained in:
fieldOfView 2017-04-30 23:21:49 +02:00
parent 0c6a5328c8
commit 93197cd173
2 changed files with 39 additions and 7 deletions

View File

@ -408,18 +408,34 @@ Rectangle
}
ExclusiveGroup { id: modeMenuGroup; }
Text
Label
{
id: toggleLeftText
anchors.right: modeToggleSwitch.left
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("toggle_button_text_hover");
}
else if(!modeToggleSwitch.checked)
{
return UM.Theme.getColor("toggle_button_text_checked");
}
else
{
return UM.Theme.getColor("toggle_button_text");
}
}
font: UM.Theme.getFont("default")
MouseArea
{
id: toggleLeftTextMouseArea
hoverEnabled: true
anchors.fill: parent
onClicked:
{
@ -441,11 +457,11 @@ Rectangle
anchors.rightMargin: UM.Theme.getSize("default_margin").width
anchors.verticalCenter: parent.verticalCenter
property alias _hovered: enableSupportMouseArea.containsMouse
property bool _hovered: modeToggleSwitchMouseArea.containsMouse || toggleLeftTextMouseArea.containsMouse || toggleRightTextMouseArea.containsMouse
MouseArea
{
id: enableSupportMouseArea
id: modeToggleSwitchMouseArea
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton
@ -470,17 +486,33 @@ Rectangle
style: UM.Theme.styles.toggle_button
}
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("toggle_button_text_hover");
}
else if(modeToggleSwitch.checked)
{
return UM.Theme.getColor("toggle_button_text_checked");
}
else
{
return UM.Theme.getColor("toggle_button_text");
}
}
font: UM.Theme.getFont("default")
MouseArea
{
id: toggleRightTextMouseArea
hoverEnabled: true
anchors.fill: parent
onClicked:
{

View File

@ -182,7 +182,7 @@
"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],
"toggle_button_text_checked": [12, 169, 227, 255],
"tooltip": [12, 169, 227, 255],
"tooltip_text": [255, 255, 255, 255],