updated components
This commit is contained in:
+58
-3
@@ -2,7 +2,62 @@ import QtQuick
|
||||
import qs.Config
|
||||
|
||||
NumberAnimation {
|
||||
duration: Appearance.anim.durations.normal
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
easing.type: Easing.BezierSpline
|
||||
enum Type {
|
||||
StandardSmall = 0,
|
||||
Standard,
|
||||
StandardLarge,
|
||||
StandardExtraLarge,
|
||||
EmphasizedSmall,
|
||||
Emphasized,
|
||||
EmphasizedLarge,
|
||||
EmphasizedExtraLarge,
|
||||
FastSpatial,
|
||||
DefaultSpatial,
|
||||
SlowSpatial,
|
||||
FastEffects,
|
||||
DefaultEffects,
|
||||
SlowEffects
|
||||
}
|
||||
|
||||
property int type: Anim.DefaultSpatial
|
||||
|
||||
duration: {
|
||||
if (type < Anim.StandardSmall || type > Anim.SlowEffects)
|
||||
return Appearance.anim.durations.normal;
|
||||
|
||||
if (type === Anim.FastSpatial)
|
||||
return Appearance.anim.durations.expressiveFastSpatial;
|
||||
if (type === Anim.DefaultSpatial)
|
||||
return Appearance.anim.durations.expressiveDefaultSpatial;
|
||||
if (type === Anim.SlowSpatial)
|
||||
return Appearance.anim.durations.large;
|
||||
if (type === Anim.FastEffects)
|
||||
return Appearance.anim.durations.expressiveFastEffects;
|
||||
if (type === Anim.DefaultEffects)
|
||||
return Appearance.anim.durations.expressiveEffects;
|
||||
if (type === Anim.SlowEffects)
|
||||
return Appearance.anim.durations.expressiveSlowEffects;
|
||||
|
||||
const types = ["small", "normal", "large", "extraLarge"];
|
||||
const idx = type % 4; // 0-7 are the 4 standard types
|
||||
return Appearance.anim.durations[types[idx]];
|
||||
}
|
||||
easing.bezierCurve: {
|
||||
if (type === Anim.FastSpatial)
|
||||
return Appearance.anim.curves.expressiveFastSpatial;
|
||||
if (type === Anim.DefaultSpatial)
|
||||
return Appearance.anim.curves.expressiveDefaultSpatial;
|
||||
if (type === Anim.SlowSpatial)
|
||||
return Appearance.anim.curves.expressiveSlowSpatial;
|
||||
if (type === Anim.FastEffects)
|
||||
return Appearance.anim.curves.expressiveFastEffects;
|
||||
if (type === Anim.DefaultEffects)
|
||||
return Appearance.anim.curves.expressiveDefaultEffects;
|
||||
if (type === Anim.SlowEffects)
|
||||
return Appearance.anim.curves.expressiveSlowEffects;
|
||||
|
||||
if (type >= Anim.EmphasizedSmall && type <= Anim.EmphasizedExtraLarge)
|
||||
return Appearance.anim.curves.emphasized;
|
||||
return Appearance.anim.curves.standard;
|
||||
}
|
||||
}
|
||||
|
||||
+155
-32
@@ -1,51 +1,174 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Templates
|
||||
import ZShell.Components
|
||||
import ZShell
|
||||
import qs.Components
|
||||
import qs.Config
|
||||
|
||||
Slider {
|
||||
id: root
|
||||
|
||||
property color color: DynamicColors.palette.m3primary
|
||||
property bool animateWave
|
||||
property color bgColor: enabled ? DynamicColors.palette.m3secondaryContainer : Qt.alpha(DynamicColors.palette.m3onSurface, 0.1)
|
||||
property color fgColor: enabled ? DynamicColors.palette.m3primary : Qt.alpha(DynamicColors.palette.m3onSurface, 0.38)
|
||||
property real filledWidth
|
||||
property real pos: visualPosition
|
||||
property int waveDuration: 1000
|
||||
property real waveFrequency: 6
|
||||
property bool wavy
|
||||
|
||||
signal interaction(v: real)
|
||||
|
||||
implicitHeight: 12
|
||||
implicitWidth: 200
|
||||
|
||||
contentItem: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
background: Item {
|
||||
CustomRect {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: root.implicitHeight / 6
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: root.implicitHeight / 6
|
||||
bottomRightRadius: root.implicitHeight / 6
|
||||
color: root.color
|
||||
implicitWidth: root.handle.x - root.implicitHeight / 6
|
||||
radius: root.implicitHeight / 6
|
||||
topRightRadius: root.implicitHeight / 6
|
||||
id: remaining
|
||||
|
||||
anchors.left: handle.right
|
||||
anchors.leftMargin: Appearance.spacing.extraSmall
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
bottomLeftRadius: Appearance.rounding.extraSmall / 2
|
||||
color: root.bgColor
|
||||
implicitHeight: parent.height * (parent.height <= 12 ? opacity : Math.min(opacity * 2, 1))
|
||||
opacity: Math.min(width, 12) / 12
|
||||
radius: Appearance.rounding.small
|
||||
topLeftRadius: Appearance.rounding.extraSmall / 2
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: root.implicitHeight / 6
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: root.implicitHeight / 6
|
||||
bottomLeftRadius: root.implicitHeight / 6
|
||||
color: DynamicColors.tPalette.m3surfaceContainerHighest
|
||||
implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 6
|
||||
radius: root.implicitHeight / 6
|
||||
topLeftRadius: root.implicitHeight / 6
|
||||
anchors.rightMargin: 4 * remaining.opacity
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: root.fgColor
|
||||
implicitHeight: 4 * remaining.opacity
|
||||
implicitWidth: implicitHeight
|
||||
opacity: remaining.opacity
|
||||
radius: Appearance.rounding.full
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
id: handle
|
||||
|
||||
anchors.left: filled.right
|
||||
anchors.leftMargin: Appearance.spacing.extraSmall
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: root.fgColor
|
||||
implicitHeight: {
|
||||
const mult = parent.height <= 12 ? 3 : 1.2;
|
||||
const pressMult = parent.height <= 12 ? 4 : 1.5;
|
||||
return parent.height * (mouse.pressed ? pressMult : mult);
|
||||
}
|
||||
implicitWidth: 4
|
||||
radius: Appearance.rounding.full
|
||||
|
||||
Behavior on implicitHeight {
|
||||
Anim {
|
||||
type: Anim.FastSpatial
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: filled
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
asynchronous: true
|
||||
sourceComponent: root.wavy ? waveComp : lineComp
|
||||
}
|
||||
|
||||
Component {
|
||||
id: lineComp
|
||||
|
||||
CustomRect {
|
||||
bottomRightRadius: Appearance.rounding.extraSmall / 2
|
||||
color: root.fgColor
|
||||
implicitHeight: root.height
|
||||
implicitWidth: root.filledWidth
|
||||
radius: Appearance.rounding.small
|
||||
topRightRadius: Appearance.rounding.extraSmall / 2
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: waveComp
|
||||
|
||||
WavyLine {
|
||||
color: root.fgColor
|
||||
frequency: root.waveFrequency
|
||||
fullLength: root.width - handle.implicitWidth - handle.anchors.leftMargin
|
||||
implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
|
||||
implicitWidth: root.filledWidth
|
||||
lineWidth: root.height * 0.7
|
||||
startX: x
|
||||
|
||||
Behavior on color {
|
||||
CAnim {
|
||||
}
|
||||
}
|
||||
Anim on waveProgress {
|
||||
duration: root.waveDuration
|
||||
easing.type: Easing.Linear
|
||||
from: 0
|
||||
loops: Animation.Infinite
|
||||
paused: !root.animateWave
|
||||
running: true
|
||||
to: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
handle: CustomRect {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: root.color
|
||||
implicitHeight: root.implicitHeight
|
||||
implicitWidth: root.implicitHeight / 4.5
|
||||
radius: Appearance.rounding.full
|
||||
x: root.visualPosition * root.availableWidth - implicitWidth / 2
|
||||
Behavior on filledWidth {
|
||||
id: widthBehavior
|
||||
|
||||
MouseArea {
|
||||
acceptedButtons: Qt.NoButton
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
Anim {
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: filledWidth = Qt.binding(() => (width - handle.implicitWidth - handle.anchors.leftMargin) * pos)
|
||||
|
||||
Binding {
|
||||
id: posBinding
|
||||
|
||||
property: "pos"
|
||||
target: root
|
||||
value: ZUtils.clamp(mouse.pressStartPos + mouse.dragMovement, 0, 1)
|
||||
when: mouse.pressed
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouse
|
||||
|
||||
property real dragMovement
|
||||
property real pressStartPos
|
||||
property real pressStartX
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
implicitHeight: handle.implicitHeight
|
||||
preventStealing: true
|
||||
|
||||
onPositionChanged: e => {
|
||||
dragMovement = (e.x - pressStartX) / width;
|
||||
root.interaction(posBinding.value);
|
||||
}
|
||||
onPressed: e => {
|
||||
widthBehavior.enabled = false;
|
||||
pressStartX = e.x;
|
||||
pressStartPos = root.visualPosition;
|
||||
}
|
||||
onReleased: e => {
|
||||
root.interaction(posBinding.value);
|
||||
widthBehavior.enabled = true;
|
||||
dragMovement = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+172
-67
@@ -1,15 +1,53 @@
|
||||
import qs.Config
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
import ZShell
|
||||
import ZShell.Components
|
||||
import qs.Helpers
|
||||
import qs.Config
|
||||
|
||||
MouseArea {
|
||||
id: root
|
||||
|
||||
property color color: DynamicColors.palette.m3onSurface
|
||||
property alias bottomLeftRadius: base.bottomLeftRadius
|
||||
property alias bottomRightRadius: base.bottomRightRadius
|
||||
property real circleRadius
|
||||
property alias color: base.color
|
||||
property bool disabled
|
||||
property real radius: parent?.radius ?? 0
|
||||
property alias rect: hoverLayer
|
||||
readonly property real endRadius: {
|
||||
const d1 = distSq(0, 0);
|
||||
const d2 = distSq(width, 0);
|
||||
const d3 = distSq(0, height);
|
||||
const d4 = distSq(width, height);
|
||||
return (Math.sqrt(Math.max(d1, d2, d3, d4)) + (shapeMorph ? 24 : 0)) * 1.3;
|
||||
}
|
||||
property real endRadiusAtPress
|
||||
property bool manualPressOverride
|
||||
property real pressX: width / 2
|
||||
property real pressY: height / 2
|
||||
property alias radius: base.radius
|
||||
readonly property alias rect: base
|
||||
property bool shapeMorph
|
||||
property bool showHoverBackground: true
|
||||
property real stateOpacity: containsMouse ? 0.08 : 0
|
||||
property alias topLeftRadius: base.topLeftRadius
|
||||
property alias topRightRadius: base.topRightRadius
|
||||
|
||||
function onClicked(): void {
|
||||
function clamp(r: real): real {
|
||||
return Math.max(0, Math.min(r, width / 2, height / 2));
|
||||
}
|
||||
|
||||
function distSq(x: real, y: real): real {
|
||||
return (pressX - x) ** 2 + (pressY - y) ** 2;
|
||||
}
|
||||
|
||||
function press(x: real, y: real): void {
|
||||
pressX = x;
|
||||
pressY = y;
|
||||
fadeAnim.complete();
|
||||
circleRadius = 0;
|
||||
circle.opacity = 0.1;
|
||||
rippleAnim.restart();
|
||||
endRadiusAtPress = endRadius;
|
||||
}
|
||||
|
||||
anchors.fill: parent
|
||||
@@ -17,79 +55,146 @@ MouseArea {
|
||||
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();
|
||||
Behavior on stateOpacity {
|
||||
Anim {
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
|
||||
SequentialAnimation {
|
||||
onCircleRadiusChanged: {
|
||||
if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
|
||||
fadeAnim.start();
|
||||
}
|
||||
onClicked: event => !disabled && onClicked(event)
|
||||
onManualPressOverrideChanged: {
|
||||
if (!(pressed || manualPressOverride) && circleRadius > endRadiusAtPress * 0.99 && !fadeAnim.running)
|
||||
fadeAnim.start();
|
||||
}
|
||||
onPressed: e => press(e.x, e.y)
|
||||
onPressedChanged: {
|
||||
if (!(pressed || manualPressOverride) && !rippleAnim.running && circle.opacity > 0)
|
||||
fadeAnim.start();
|
||||
}
|
||||
|
||||
Anim {
|
||||
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
|
||||
}
|
||||
alwaysRunToEnd: true
|
||||
duration: Appearance.anim.durations.expressiveSlowEffects * 2
|
||||
easing.bezierCurve: Appearance.anim.curves.standard
|
||||
property: "circleRadius"
|
||||
target: root
|
||||
to: root.endRadius
|
||||
}
|
||||
|
||||
CustomClippingRect {
|
||||
id: hoverLayer
|
||||
Anim {
|
||||
id: fadeAnim
|
||||
|
||||
property: "opacity"
|
||||
target: circle
|
||||
to: 0
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
id: base
|
||||
|
||||
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
|
||||
bottomLeftRadius: root.parent?.bottomLeftRadius ?? radius ?? 0
|
||||
bottomRightRadius: root.parent?.bottomRightRadius ?? radius ?? 0
|
||||
color: DynamicColors.palette.m3onSurface
|
||||
opacity: root.stateOpacity
|
||||
// Pick up radius from parent if it has one (parent can be anything with radius props)
|
||||
// qmllint disable missing-property
|
||||
radius: root.parent?.radius ?? 0
|
||||
topLeftRadius: root.parent?.topLeftRadius ?? radius ?? 0
|
||||
topRightRadius: root.parent?.topRightRadius ?? radius ?? 0
|
||||
// qmllint enable missing-property
|
||||
}
|
||||
|
||||
CustomRect {
|
||||
id: ripple
|
||||
Shape {
|
||||
id: circle
|
||||
|
||||
border.pixelAligned: false
|
||||
color: root.color
|
||||
opacity: 0
|
||||
radius: Appearance.rounding.full
|
||||
anchors.fill: parent
|
||||
opacity: 0
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
transform: Translate {
|
||||
x: -ripple.width / 2
|
||||
y: -ripple.height / 2
|
||||
ShapePath {
|
||||
fillColor: base.color
|
||||
startX: root.clamp(base.topLeftRadius)
|
||||
startY: 0
|
||||
strokeColor: "transparent"
|
||||
strokeWidth: 0
|
||||
|
||||
fillGradient: RadialGradient {
|
||||
centerRadius: root.circleRadius
|
||||
centerX: root.pressX
|
||||
centerY: root.pressY
|
||||
focalX: centerX
|
||||
focalY: centerY
|
||||
|
||||
GradientStop {
|
||||
color: Qt.alpha(base.color, 1)
|
||||
position: 0
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
color: Qt.alpha(base.color, 1)
|
||||
position: ZUtils.clamp(1 - 0.2 * root.endRadius / root.circleRadius, 0.01, 0.99)
|
||||
}
|
||||
|
||||
GradientStop {
|
||||
color: Qt.alpha(base.color, ZUtils.clamp((root.circleRadius / root.endRadius - 0.9) / 0.1, 0, 1))
|
||||
position: 1
|
||||
}
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.width - root.clamp(base.topRightRadius)
|
||||
y: 0
|
||||
}
|
||||
|
||||
PathArc {
|
||||
radiusX: root.clamp(base.topRightRadius)
|
||||
radiusY: root.clamp(base.topRightRadius)
|
||||
relativeX: root.clamp(base.topRightRadius)
|
||||
relativeY: root.clamp(base.topRightRadius)
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.width
|
||||
y: root.height - root.clamp(base.bottomRightRadius)
|
||||
}
|
||||
|
||||
PathArc {
|
||||
radiusX: root.clamp(base.bottomRightRadius)
|
||||
radiusY: root.clamp(base.bottomRightRadius)
|
||||
relativeX: -root.clamp(base.bottomRightRadius)
|
||||
relativeY: root.clamp(base.bottomRightRadius)
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: root.clamp(base.bottomLeftRadius)
|
||||
y: root.height
|
||||
}
|
||||
|
||||
PathArc {
|
||||
radiusX: root.clamp(base.bottomLeftRadius)
|
||||
radiusY: root.clamp(base.bottomLeftRadius)
|
||||
relativeX: -root.clamp(base.bottomLeftRadius)
|
||||
relativeY: -root.clamp(base.bottomLeftRadius)
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: 0
|
||||
y: root.clamp(base.topLeftRadius)
|
||||
}
|
||||
|
||||
PathArc {
|
||||
radiusX: root.clamp(base.topLeftRadius)
|
||||
radiusY: root.clamp(base.topLeftRadius)
|
||||
x: root.clamp(base.topLeftRadius)
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user