101 lines
2.4 KiB
QML
101 lines
2.4 KiB
QML
|
|
import QtQuick
|
|
import qs.config
|
|
import qs.custom
|
|
import qs.services
|
|
|
|
MouseArea {
|
|
id: root
|
|
|
|
property bool disabled
|
|
property color color: Config.colors.primary
|
|
property real radius: 1000
|
|
|
|
function onClicked(): void {}
|
|
|
|
cursorShape: disabled ? undefined : Qt.PointingHandCursor
|
|
hoverEnabled: true
|
|
|
|
onPressed: event => {
|
|
rippleAnim.x = event.x;
|
|
rippleAnim.y = event.y;
|
|
|
|
const dist = (ox, oy) => ox * ox + oy * oy;
|
|
rippleAnim.radius = Math.sqrt(Math.max(dist(0, 0), dist(0, width), dist(width, 0), dist(width, height)));
|
|
|
|
rippleAnim.restart();
|
|
}
|
|
|
|
onClicked: event => !disabled && onClicked(event)
|
|
|
|
SequentialAnimation {
|
|
id: rippleAnim
|
|
|
|
property real x
|
|
property real y
|
|
property real radius
|
|
|
|
PropertyAction {
|
|
target: ripple
|
|
property: "x"
|
|
value: rippleAnim.x
|
|
}
|
|
PropertyAction {
|
|
target: ripple
|
|
property: "y"
|
|
value: rippleAnim.y
|
|
}
|
|
PropertyAction {
|
|
target: ripple
|
|
property: "opacity"
|
|
value: 0.1
|
|
}
|
|
ParallelAnimation {
|
|
Anim {
|
|
target: ripple
|
|
properties: "implicitWidth,implicitHeight"
|
|
from: 0
|
|
to: rippleAnim.radius * 2
|
|
duration: Config.anim.durations.large
|
|
easing.bezierCurve: Config.anim.curves.standardDecel
|
|
}
|
|
Anim {
|
|
target: ripple
|
|
property: "opacity"
|
|
to: 0
|
|
duration: Config.anim.durations.large
|
|
easing.type: Easing.BezierSpline
|
|
easing.bezierCurve: Config.anim.curves.standardDecel
|
|
}
|
|
}
|
|
}
|
|
|
|
CustomClippingRect {
|
|
id: hoverLayer
|
|
|
|
anchors.fill: parent
|
|
|
|
property real alpha: root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.05 : 0
|
|
color: Qt.alpha(root.color, alpha)
|
|
radius: root.radius
|
|
|
|
Behavior on alpha {
|
|
Anim {
|
|
duration: Config.anim.durations.small
|
|
}
|
|
}
|
|
|
|
CustomRect {
|
|
id: ripple
|
|
|
|
radius: 1000
|
|
color: root.color
|
|
opacity: 0
|
|
|
|
transform: Translate {
|
|
x: -ripple.width / 2
|
|
y: -ripple.height / 2
|
|
}
|
|
}
|
|
}
|
|
}
|