Zacharias-Brohn
120 lines
2.5 KiB
QML
120 lines
2.5 KiB
QML
import QtQuick
|
|
|
|
import qs.Data as Dat
|
|
import qs.Generics as Gen
|
|
|
|
Rectangle {
|
|
id: root
|
|
|
|
required property bool active
|
|
property color activeColor: Dat.Colors.current.primary
|
|
property color activeIconColor: Dat.Colors.current.on_primary
|
|
property alias icon: matIcon
|
|
property alias mArea: mouseArea
|
|
property color passiveColor: Dat.Colors.current.surface_container
|
|
property color passiveIconColor: Dat.Colors.current.on_surface
|
|
|
|
color: "transparent"
|
|
state: (root.active) ? "ACTIVE" : "PASSIVE"
|
|
|
|
states: [
|
|
State {
|
|
name: "ACTIVE"
|
|
|
|
PropertyChanges {
|
|
bgToggle.color: root.activeColor
|
|
bgToggle.opacity: 1
|
|
bgToggle.visible: true
|
|
bgToggle.width: bgToggle.parent.width
|
|
matIcon.color: root.activeIconColor
|
|
matIcon.fill: 1
|
|
}
|
|
},
|
|
State {
|
|
name: "PASSIVE"
|
|
|
|
PropertyChanges {
|
|
bgToggle.color: root.passiveColor
|
|
bgToggle.opacity: 0
|
|
bgToggle.visible: false
|
|
bgToggle.width: 0
|
|
matIcon.color: root.passiveIconColor
|
|
matIcon.fill: 0
|
|
}
|
|
}
|
|
]
|
|
transitions: [
|
|
Transition {
|
|
from: "PASSIVE"
|
|
to: "ACTIVE"
|
|
|
|
SequentialAnimation {
|
|
PropertyAction {
|
|
property: "visible"
|
|
target: bgToggle
|
|
}
|
|
|
|
ParallelAnimation {
|
|
NumberAnimation {
|
|
duration: Dat.MaterialEasing.standardTime
|
|
easing.bezierCurve: Dat.MaterialEasing.standard
|
|
properties: "width, opacity"
|
|
target: bgToggle
|
|
}
|
|
|
|
ColorAnimation {
|
|
duration: Dat.MaterialEasing.standardTime
|
|
targets: [bgToggle, matIcon]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
Transition {
|
|
from: "ACTIVE"
|
|
to: "PASSIVE"
|
|
|
|
SequentialAnimation {
|
|
ParallelAnimation {
|
|
NumberAnimation {
|
|
duration: Dat.MaterialEasing.standardTime
|
|
easing.bezierCurve: Dat.MaterialEasing.standard
|
|
properties: "width, opacity"
|
|
target: bgToggle
|
|
}
|
|
|
|
ColorAnimation {
|
|
duration: Dat.MaterialEasing.standardTime
|
|
targets: [bgToggle, matIcon]
|
|
}
|
|
}
|
|
|
|
PropertyAction {
|
|
property: "visible"
|
|
target: bgToggle
|
|
}
|
|
}
|
|
}
|
|
]
|
|
|
|
Rectangle {
|
|
id: bgToggle
|
|
|
|
anchors.centerIn: parent
|
|
height: this.width
|
|
radius: this.width
|
|
}
|
|
|
|
Gen.MatIcon {
|
|
id: matIcon
|
|
|
|
anchors.centerIn: parent
|
|
icon: ""
|
|
}
|
|
|
|
Gen.MouseArea {
|
|
id: mouseArea
|
|
|
|
layerColor: matIcon.color
|
|
}
|
|
}
|