75 lines
1.4 KiB
QML
75 lines
1.4 KiB
QML
import QtQuick 2.7
|
|
|
|
import "Utils.js" as Utils
|
|
import "." as Gov
|
|
|
|
MouseArea {
|
|
property alias isOn: toggleswitch.isOn
|
|
width: Utils.dp(60)
|
|
height: Utils.dp(48)
|
|
|
|
onClicked: toggleswitch.toggle()
|
|
|
|
Item {
|
|
id: toggleswitch
|
|
anchors.fill: parent
|
|
anchors.topMargin: Utils.dp(12)
|
|
anchors.bottomMargin: Utils.dp(12)
|
|
|
|
property bool isOn: false
|
|
onIsOnChanged: state = (isOn ? "on" : "off")
|
|
|
|
readonly property int dragMax: width - height
|
|
|
|
function toggle() {
|
|
isOn = !isOn
|
|
}
|
|
|
|
function releaseSwitch() {
|
|
isOn = (button.x > dragMax / 2)
|
|
button.x = (isOn ? dragMax : 0)
|
|
}
|
|
|
|
Rectangle {
|
|
id: background
|
|
anchors.fill: parent
|
|
anchors.margins: parent.height / 4
|
|
radius: height / 2
|
|
color: isOn ? Qt.lighter(Gov.Constants.blue, 1.55) : "lightgray"
|
|
}
|
|
|
|
Rectangle {
|
|
id: button
|
|
height: parent.height
|
|
width: height
|
|
radius: width
|
|
color: isOn ? Gov.Constants.blue : "darkgray"
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
drag.target: button
|
|
drag.axis: Drag.XAxis
|
|
drag.minimumX: 0
|
|
drag.maximumX: toggleswitch.dragMax
|
|
onClicked: toggleswitch.toggle()
|
|
onReleased: toggleswitch.releaseSwitch()
|
|
}
|
|
}
|
|
|
|
states: [
|
|
State {
|
|
name: "on"
|
|
PropertyChanges { target: button; x: toggleswitch.dragMax }
|
|
},
|
|
State {
|
|
name: "off"
|
|
PropertyChanges { target: button; x: 0 }
|
|
}
|
|
]
|
|
|
|
transitions: Transition {
|
|
NumberAnimation { properties: "x"; easing.type: Easing.InOutQuad; duration: 200 }
|
|
}
|
|
}
|
|
}
|