internal: better styled switch
Add state layer + cursor change
This commit is contained in:
parent
329c240699
commit
1835271c28
1 changed files with 32 additions and 16 deletions
|
|
@ -28,6 +28,18 @@ Switch {
|
||||||
implicitHeight: parent.implicitHeight - Appearance.padding.small
|
implicitHeight: parent.implicitHeight - Appearance.padding.small
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
|
||||||
|
StyledRect {
|
||||||
|
anchors.fill: parent
|
||||||
|
radius: parent.radius
|
||||||
|
|
||||||
|
color: root.checked ? Colours.palette.m3primary : Colours.palette.m3onSurface
|
||||||
|
opacity: root.pressed ? 0.1 : root.hovered ? 0.08 : 0
|
||||||
|
|
||||||
|
Behavior on opacity {
|
||||||
|
NumberAnim {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Shape {
|
Shape {
|
||||||
id: icon
|
id: icon
|
||||||
|
|
||||||
|
|
@ -73,7 +85,7 @@ Switch {
|
||||||
|
|
||||||
ShapePath {
|
ShapePath {
|
||||||
strokeWidth: Appearance.font.size.larger * 0.15
|
strokeWidth: Appearance.font.size.larger * 0.15
|
||||||
strokeColor: root.checked ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3surfaceContainerHighest
|
strokeColor: root.checked ? Colours.palette.m3primary : Colours.palette.m3surfaceContainerHighest
|
||||||
fillColor: "transparent"
|
fillColor: "transparent"
|
||||||
capStyle: ShapePath.RoundCap
|
capStyle: ShapePath.RoundCap
|
||||||
|
|
||||||
|
|
@ -103,38 +115,42 @@ Switch {
|
||||||
}
|
}
|
||||||
|
|
||||||
Behavior on start1 {
|
Behavior on start1 {
|
||||||
Anim {}
|
PropAnim {}
|
||||||
}
|
}
|
||||||
Behavior on end1 {
|
Behavior on end1 {
|
||||||
Anim {}
|
PropAnim {}
|
||||||
}
|
}
|
||||||
Behavior on start2 {
|
Behavior on start2 {
|
||||||
Anim {}
|
PropAnim {}
|
||||||
}
|
}
|
||||||
Behavior on end2 {
|
Behavior on end2 {
|
||||||
Anim {}
|
PropAnim {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Behavior on x {
|
Behavior on x {
|
||||||
NumberAnimation {
|
NumberAnim {}
|
||||||
duration: Appearance.anim.durations.normal
|
|
||||||
easing.type: Easing.BezierSpline
|
|
||||||
easing.bezierCurve: Appearance.anim.curves.standard
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Behavior on implicitWidth {
|
Behavior on implicitWidth {
|
||||||
NumberAnimation {
|
NumberAnim {}
|
||||||
duration: Appearance.anim.durations.normal
|
|
||||||
easing.type: Easing.BezierSpline
|
|
||||||
easing.bezierCurve: Appearance.anim.curves.standard
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
component Anim: PropertyAnimation {
|
MouseArea {
|
||||||
|
anchors.fill: parent
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
|
||||||
|
component NumberAnim: NumberAnimation {
|
||||||
|
duration: Appearance.anim.durations.normal
|
||||||
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: Appearance.anim.curves.standard
|
||||||
|
}
|
||||||
|
|
||||||
|
component PropAnim: PropertyAnimation {
|
||||||
duration: Appearance.anim.durations.normal
|
duration: Appearance.anim.durations.normal
|
||||||
easing.type: Easing.BezierSpline
|
easing.type: Easing.BezierSpline
|
||||||
easing.bezierCurve: Appearance.anim.curves.standard
|
easing.bezierCurve: Appearance.anim.curves.standard
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue