diff options
Diffstat (limited to 'modules/lock/Backgrounds.qml')
| -rw-r--r-- | modules/lock/Backgrounds.qml | 216 |
1 files changed, 216 insertions, 0 deletions
diff --git a/modules/lock/Backgrounds.qml b/modules/lock/Backgrounds.qml new file mode 100644 index 0000000..78a4799 --- /dev/null +++ b/modules/lock/Backgrounds.qml @@ -0,0 +1,216 @@ +import "root:/widgets" +import "root:/services" +import "root:/config" +import QtQuick +import QtQuick.Shapes +import QtQuick.Effects + +Item { + id: root + + required property bool locked + + readonly property real clockBottom: innerMask.anchors.margins + clockPath.height + readonly property real inputTop: innerMask.anchors.margins + inputPath.height + + anchors.fill: parent + + StyledRect { + id: base + + anchors.fill: parent + color: Colours.alpha(Config.border.colour, false) + visible: false + } + + Item { + id: mask + + anchors.fill: parent + layer.enabled: true + visible: false + + Rectangle { + id: innerMask + + anchors.fill: parent + anchors.margins: root.locked ? root.height * Config.lock.sizes.border : 0 + anchors.leftMargin: root.locked ? root.width * Config.lock.sizes.border : 0 + anchors.rightMargin: root.locked ? root.width * Config.lock.sizes.border : 0 + + radius: Appearance.rounding.large * 2 + + Behavior on anchors.margins { + Anim {} + } + + Behavior on anchors.leftMargin { + Anim {} + } + + Behavior on anchors.rightMargin { + Anim {} + } + } + } + + MultiEffect { + anchors.fill: parent + source: base + maskEnabled: true + maskInverted: true + maskSource: mask + maskThresholdMin: 0.5 + maskSpreadAtMin: 1 + } + + Shape { + anchors.fill: parent + anchors.margins: Math.floor(innerMask.anchors.margins) + anchors.leftMargin: innerMask.anchors.leftMargin + anchors.rightMargin: innerMask.anchors.rightMargin + + preferredRendererType: Shape.CurveRenderer + + ShapePath { + id: clockPath + + readonly property int width: Config.lock.sizes.clockWidth + property real height: root.locked ? Config.lock.sizes.clockHeight : 0 + + readonly property real rounding: Appearance.rounding.large * 4 + readonly property bool flatten: height < rounding * 2 + readonly property real roundingY: flatten ? height / 2 : rounding + + strokeWidth: -1 + fillColor: Config.border.colour + + startX: (innerMask.width - width) / 2 - rounding + + PathArc { + relativeX: clockPath.rounding + relativeY: clockPath.roundingY + radiusX: clockPath.rounding + radiusY: Math.min(clockPath.rounding, clockPath.height) + } + PathLine { + relativeX: 0 + relativeY: clockPath.height - clockPath.roundingY * 2 + } + PathArc { + relativeX: clockPath.rounding + relativeY: clockPath.roundingY + radiusX: clockPath.rounding + radiusY: Math.min(clockPath.rounding, clockPath.height) + direction: PathArc.Counterclockwise + } + PathLine { + relativeX: clockPath.width - clockPath.rounding * 2 + relativeY: 0 + } + PathArc { + relativeX: clockPath.rounding + relativeY: -clockPath.roundingY + radiusX: clockPath.rounding + radiusY: Math.min(clockPath.rounding, clockPath.height) + direction: PathArc.Counterclockwise + } + PathLine { + relativeX: 0 + relativeY: -(clockPath.height - clockPath.roundingY * 2) + } + PathArc { + relativeX: clockPath.rounding + relativeY: -clockPath.roundingY + radiusX: clockPath.rounding + radiusY: Math.min(clockPath.rounding, clockPath.height) + } + + Behavior on height { + Anim {} + } + + Behavior on fillColor { + ColorAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + } + + ShapePath { + id: inputPath + + readonly property int width: Config.lock.sizes.inputWidth + property real height: root.locked ? Config.lock.sizes.inputHeight : 0 + + readonly property real rounding: Appearance.rounding.large * 2 + readonly property bool flatten: height < rounding * 2 + readonly property real roundingY: flatten ? height / 2 : rounding + + strokeWidth: -1 + fillColor: Config.border.colour + + startX: (innerMask.width - width) / 2 - rounding + startY: Math.ceil(innerMask.height) + + PathArc { + relativeX: inputPath.rounding + relativeY: -inputPath.roundingY + radiusX: inputPath.rounding + radiusY: Math.min(inputPath.rounding, inputPath.height) + direction: PathArc.Counterclockwise + } + PathLine { + relativeX: 0 + relativeY: -(inputPath.height - inputPath.roundingY * 2) + } + PathArc { + relativeX: inputPath.rounding + relativeY: -inputPath.roundingY + radiusX: inputPath.rounding + radiusY: Math.min(inputPath.rounding, inputPath.height) + } + PathLine { + relativeX: inputPath.width - inputPath.rounding * 2 + relativeY: 0 + } + PathArc { + relativeX: inputPath.rounding + relativeY: inputPath.roundingY + radiusX: inputPath.rounding + radiusY: Math.min(inputPath.rounding, inputPath.height) + } + PathLine { + relativeX: 0 + relativeY: inputPath.height - inputPath.roundingY * 2 + } + PathArc { + relativeX: inputPath.rounding + relativeY: inputPath.roundingY + radiusX: inputPath.rounding + radiusY: Math.min(inputPath.rounding, inputPath.height) + direction: PathArc.Counterclockwise + } + + Behavior on height { + Anim {} + } + + Behavior on fillColor { + ColorAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + } + } + + component Anim: NumberAnimation { + duration: Appearance.anim.durations.large + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.emphasized + } +} |