Use a toggle button for mode switching

CURA-3574
This commit is contained in:
Lipu Fei 2017-04-18 16:27:37 +02:00
parent f1ac1bd876
commit c75887be80
2 changed files with 92 additions and 0 deletions

View file

@ -407,6 +407,8 @@ Rectangle
}
}
ExclusiveGroup { id: modeMenuGroup; }
/*
ListView{
id: modesList
property var index: 0
@ -415,6 +417,54 @@ Rectangle
anchors.top: parent.top
anchors.left: parent.left
width: parent.width
}*/
Text
{
id: toggleLeftText
anchors.right: modeToggleSwitch.left
anchors.rightMargin: 10
anchors.verticalCenter: parent.verticalCenter
text: ""
color: UM.Theme.getColor("toggle_active_text")
font: UM.Theme.getFont("default")
}
Switch
{
id: modeToggleSwitch
checked: false
anchors.right: toggleRightText.left
anchors.rightMargin: 10
anchors.verticalCenter: parent.verticalCenter
onClicked:
{
var index = 0;
if (checked)
{
index = 1;
}
updateActiveMode(index);
}
function updateActiveMode(index)
{
base.currentModeIndex = index;
UM.Preferences.setValue("cura/active_mode", index);
}
style: UM.Theme.styles.toggle_button
}
Text
{
id: toggleRightText
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
text: ""
color: UM.Theme.getColor("toggle_active_text")
font: UM.Theme.getFont("default")
}
}
@ -541,10 +591,14 @@ Rectangle
})
sidebarContents.push({ "item": modesListModel.get(base.currentModeIndex).item, "immediate": true });
toggleLeftText.text = modesListModel.get(0).text
toggleRightText.text = modesListModel.get(1).text
var index = parseInt(UM.Preferences.getValue("cura/active_mode"))
if(index)
{
currentModeIndex = index;
modeToggleSwitch.checked = index > 0;
}
}

View file

@ -8,6 +8,44 @@ import QtQuick.Controls.Styles 1.1
import UM 1.1 as UM
QtObject {
property Component toggle_button: Component {
SwitchStyle {
groove: Rectangle {
implicitWidth: 40
implicitHeight: 15
radius: 9
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");
} else {
return UM.Theme.getColor("sidebar_header_bar");
}
}
Behavior on border.color { ColorAnimation { duration: 50; } }
border.width: 2
}
handle: Rectangle {
implicitWidth: Math.round((parent.parent.width - padding.left - padding.right)/2)
implicitHeight: implicitWidth
radius: 9
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");
} else {
return UM.Theme.getColor("sidebar_header_bar");
}
}
Behavior on color { ColorAnimation { duration: 50; } }
}
}
}
property Component sidebar_header_button: Component {
ButtonStyle {
background: Rectangle {