155 lines
4.8 KiB
QML
155 lines
4.8 KiB
QML
import qs.config
|
|
import qs.custom
|
|
import qs.services
|
|
import qs.util
|
|
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Shapes
|
|
|
|
Switch {
|
|
id: root
|
|
|
|
property real size: Config.font.size.normal * 1.5
|
|
property color bg: Config.colors.container
|
|
property color accent: Color.mute(Config.colors.accent)
|
|
|
|
implicitWidth: implicitIndicatorWidth
|
|
implicitHeight: implicitIndicatorHeight
|
|
|
|
indicator: CustomRect {
|
|
radius: 1000
|
|
color: root.checked ? root.accent : root.bg
|
|
|
|
implicitWidth: implicitHeight * 1.7
|
|
implicitHeight: size
|
|
|
|
CustomRect {
|
|
readonly property real nonAnimWidth: root.pressed ? implicitHeight * 1.3 : implicitHeight
|
|
|
|
radius: 1000
|
|
color: root.checked ? Config.colors.secondary : Config.colors.tertiary
|
|
|
|
x: root.checked ? parent.implicitWidth - nonAnimWidth : 0
|
|
implicitWidth: nonAnimWidth
|
|
implicitHeight: parent.implicitHeight
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
CustomRect {
|
|
anchors.fill: parent
|
|
radius: parent.radius
|
|
|
|
color: root.checked ? Config.colors.tertiary : Config.colors.secondary
|
|
opacity: root.pressed ? 0.4 : root.hovered ? 0.2 : 0
|
|
|
|
Behavior on opacity {
|
|
Anim {}
|
|
}
|
|
}
|
|
|
|
Shape {
|
|
id: icon
|
|
|
|
property point start1: {
|
|
if (root.pressed)
|
|
return Qt.point(width * 0.2, height / 2);
|
|
if (root.checked)
|
|
return Qt.point(width * 0.2, height / 2);
|
|
return Qt.point(width * 0.15, height * 0.15);
|
|
}
|
|
property point end1: {
|
|
if (root.pressed) {
|
|
if (root.checked)
|
|
return Qt.point(width * 0.4, height / 2);
|
|
return Qt.point(width * 0.8, height / 2);
|
|
}
|
|
if (root.checked)
|
|
return Qt.point(width * 0.45, height * 0.7);
|
|
return Qt.point(width * 0.85, height * 0.85);
|
|
}
|
|
property point start2: {
|
|
if (root.pressed) {
|
|
if (root.checked)
|
|
return Qt.point(width * 0.4, height / 2);
|
|
return Qt.point(width * 0.2, height / 2);
|
|
}
|
|
if (root.checked)
|
|
return Qt.point(width * 0.45, height * 0.7);
|
|
return Qt.point(width * 0.15, height * 0.85);
|
|
}
|
|
property point end2: {
|
|
if (root.pressed)
|
|
return Qt.point(width * 0.8, height / 2);
|
|
if (root.checked)
|
|
return Qt.point(width * 0.9, height * 0.2);
|
|
return Qt.point(width * 0.85, height * 0.15);
|
|
}
|
|
|
|
anchors.centerIn: parent
|
|
width: height
|
|
height: parent.implicitHeight * 0.45
|
|
preferredRendererType: Shape.CurveRenderer
|
|
asynchronous: true
|
|
|
|
ShapePath {
|
|
strokeWidth: root.size * 0.1
|
|
strokeColor: Config.colors.primaryDark
|
|
fillColor: "transparent"
|
|
capStyle: ShapePath.RoundCap
|
|
|
|
startX: icon.start1.x
|
|
startY: icon.start1.y
|
|
|
|
PathLine {
|
|
x: icon.end1.x
|
|
y: icon.end1.y
|
|
}
|
|
PathMove {
|
|
x: icon.start2.x
|
|
y: icon.start2.y
|
|
}
|
|
PathLine {
|
|
x: icon.end2.x
|
|
y: icon.end2.y
|
|
}
|
|
|
|
Behavior on strokeColor {
|
|
CAnim {}
|
|
}
|
|
}
|
|
|
|
Behavior on start1 {
|
|
PropAnim {}
|
|
}
|
|
Behavior on end1 {
|
|
PropAnim {}
|
|
}
|
|
Behavior on start2 {
|
|
PropAnim {}
|
|
}
|
|
Behavior on end2 {
|
|
PropAnim {}
|
|
}
|
|
}
|
|
|
|
Behavior on x {
|
|
Anim {}
|
|
}
|
|
|
|
Behavior on implicitWidth {
|
|
Anim {}
|
|
}
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
enabled: false
|
|
}
|
|
|
|
component PropAnim: PropertyAnimation {
|
|
duration: Config.anim.durations.normal
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: Config.anim.curves.standard
|
|
}
|
|
}
|