Zacharias-Brohn
97 lines
1.7 KiB
QML
97 lines
1.7 KiB
QML
import qs.Config
|
|
import QtQuick
|
|
|
|
MouseArea {
|
|
id: root
|
|
|
|
property color color: DynamicColors.palette.m3onSurface
|
|
property bool disabled
|
|
property real radius: parent?.radius ?? 0
|
|
property alias rect: hoverLayer
|
|
|
|
function onClicked(): void {
|
|
}
|
|
|
|
anchors.fill: parent
|
|
cursorShape: disabled ? undefined : Qt.PointingHandCursor
|
|
enabled: !disabled
|
|
hoverEnabled: true
|
|
|
|
onClicked: event => !disabled && onClicked(event)
|
|
onPressed: event => {
|
|
if (disabled)
|
|
return;
|
|
|
|
rippleAnim.x = event.x;
|
|
rippleAnim.y = event.y;
|
|
|
|
const dist = (ox, oy) => ox * ox + oy * oy;
|
|
rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y), dist(event.x, height - event.y), dist(width - event.x, event.y), dist(width - event.x, height - event.y)));
|
|
|
|
rippleAnim.restart();
|
|
}
|
|
|
|
SequentialAnimation {
|
|
id: rippleAnim
|
|
|
|
property real radius
|
|
property real x
|
|
property real y
|
|
|
|
PropertyAction {
|
|
property: "x"
|
|
target: ripple
|
|
value: rippleAnim.x
|
|
}
|
|
|
|
PropertyAction {
|
|
property: "y"
|
|
target: ripple
|
|
value: rippleAnim.y
|
|
}
|
|
|
|
PropertyAction {
|
|
property: "opacity"
|
|
target: ripple
|
|
value: 0.08
|
|
}
|
|
|
|
Anim {
|
|
easing.bezierCurve: MaterialEasing.standardDecel
|
|
from: 0
|
|
properties: "implicitWidth,implicitHeight"
|
|
target: ripple
|
|
to: rippleAnim.radius * 2
|
|
}
|
|
|
|
Anim {
|
|
property: "opacity"
|
|
target: ripple
|
|
to: 0
|
|
}
|
|
}
|
|
|
|
CustomClippingRect {
|
|
id: hoverLayer
|
|
|
|
anchors.fill: parent
|
|
border.pixelAligned: false
|
|
color: Qt.alpha(root.color, root.disabled ? 0 : root.pressed ? 0.1 : root.containsMouse ? 0.08 : 0)
|
|
radius: root.radius
|
|
|
|
CustomRect {
|
|
id: ripple
|
|
|
|
border.pixelAligned: false
|
|
color: root.color
|
|
opacity: 0
|
|
radius: 1000
|
|
|
|
transform: Translate {
|
|
x: -ripple.width / 2
|
|
y: -ripple.height / 2
|
|
}
|
|
}
|
|
}
|
|
}
|