app/resources/qml/components/SmoothSwitchDelegate.qml

88 lines
2.1 KiB
QML

import QtQuick 2.9
import QtQuick.Controls 2.2
SwitchDelegate {
id: control
implicitHeight: 50
implicitWidth: 100
baselineOffset: 100
contentItem: Text {
visible: false
}
Text {
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
right: indicator.left
leftMargin: control.width * 0.02
rightMargin: control.width * 0.01
}
text: control.text
color: appTheme.theme.colors.text
fontSizeMode: Text.Fit
font.pixelSize: control.height * 0.4
}
indicator: Rectangle {
property bool checked: parent.checked
property bool down: parent.down
height: parent.height * 0.6
width: height * 1.84
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: control.width * 0.02
}
radius: height * 0.5
color: parent.checked ? "#17a81a" : "transparent"
border.color: parent.checked ? "#17a81a" : "#cccccc"
Behavior on color{
ColorAnimation{
duration: 200
}
}
Rectangle {
x: parent.checked ? parent.width - width : 0
width: parent.height
height: parent.height
radius: height * 0.5
color: parent.down ? appTheme.theme.colors.buttonPressed:appTheme.theme.colors.background
border.color: parent.checked ? (parent.down ? "#17a81a" : "#21be2b") : "#999999"
Behavior on x{
NumberAnimation {
property: "x"
duration: 200
easing.type: Easing.InOutQuad
}
}
}
}
background: Rectangle {
opacity: enabled ? 1 : 0.3
color: control.down ? appTheme.theme.colors.delegatePressed : appTheme.theme.colors.delegateBackground
radius: height * 0.3
Behavior on color {
ColorAnimation {
duration: 200
}
}
}
}