This repository has been archived on 2024-06-03. You can view files and clone it, but cannot push or open issues or pull requests.
app/qml/components/SmoothSwitchDelegate.qml
dorian dc26169fe0 - many design improvements:
- new text inputs
 - new delegate highlighting
 - better text scaling
- some cleanup
2019-03-29 19:15:20 +01:00

86 lines
2 KiB
QML

import QtQuick 2.9
import QtQuick.Controls 2.3
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
}
text: control.text
color: appTheme.style.textColor
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 ? "#cccccc" : "#ffffff"
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.style.delegatePressedColor : appTheme.style.delegateBackgroundColor
radius: height * 0.3
Behavior on color {
ColorAnimation {
duration: 200
}
}
}
}