1 files changed, 36 insertions, 43 deletions
diff --git a/resources/qml/ToggleButton.qml b/resources/qml/ToggleButton.qml
index 66902bfd..f3bd5cce 100644
--- a/resources/qml/ToggleButton.qml
+++ b/resources/qml/ToggleButton.qml
@@ -11,17 +11,44 @@ Switch {
id: toggleButton
implicitWidth: indicatorItem.width
-
state: checked ? "on" : "off"
+
+ indicator: Item {
+ id: indicatorItem
+
+ implicitHeight: 24
+ implicitWidth: 48
+ y: parent.height / 2 - height / 2
+
+ Rectangle {
+ id: track
+
+ color: Qt.rgba(border.color.r, border.color.g, border.color.b, 0.6)
+ height: parent.height * 0.6
+ radius: height / 2
+ width: parent.width - height
+ x: radius
+ y: parent.height / 2 - height / 2
+ }
+ Rectangle {
+ id: handle
+
+ border.color: "#767676"
+ color: palette.button
+ height: width
+ radius: width / 2
+ width: parent.height * 0.9
+ y: parent.height / 2 - height / 2
+ }
+ }
states: [
State {
name: "off"
PropertyChanges {
- target: track
border.color: "#767676"
+ target: track
}
-
PropertyChanges {
target: handle
x: 0
@@ -31,10 +58,9 @@ Switch {
name: "on"
PropertyChanges {
- target: track
border.color: palette.highlight
+ target: track
}
-
PropertyChanges {
target: handle
x: indicatorItem.width - handle.width
@@ -43,55 +69,22 @@ Switch {
]
transitions: [
Transition {
- to: "off"
reversible: true
+ to: "off"
ParallelAnimation {
NumberAnimation {
- target: handle
- property: "x"
duration: 200
easing.type: Easing.InOutQuad
+ property: "x"
+ target: handle
}
-
ColorAnimation {
- target: track
- properties: "color,border.color"
duration: 200
+ properties: "color,border.color"
+ target: track
}
}
}
]
-
- indicator: Item {
- id: indicatorItem
-
- implicitWidth: 48
- implicitHeight: 24
- y: parent.height / 2 - height / 2
-
- Rectangle {
- id: track
-
- height: parent.height * 0.6
- radius: height / 2
- width: parent.width - height
- x: radius
- y: parent.height / 2 - height / 2
- color: Qt.rgba(border.color.r, border.color.g, border.color.b, 0.6)
- }
-
- Rectangle {
- id: handle
-
- y: parent.height / 2 - height / 2
- width: parent.height * 0.9
- height: width
- radius: width / 2
- color: palette.button
- border.color: "#767676"
- }
-
- }
-
}
|
