diff --git a/dots/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml b/dots/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml index a0cdfeafc..79048ca63 100644 --- a/dots/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml +++ b/dots/.config/quickshell/ii/modules/common/widgets/MaterialCookie.qml @@ -3,7 +3,6 @@ import QtQuick.Shapes import Quickshell import qs.modules.common - Item { id: root diff --git a/dots/.config/quickshell/ii/modules/common/widgets/MaterialShape.qml b/dots/.config/quickshell/ii/modules/common/widgets/MaterialShape.qml new file mode 100644 index 000000000..30d953478 --- /dev/null +++ b/dots/.config/quickshell/ii/modules/common/widgets/MaterialShape.qml @@ -0,0 +1,87 @@ +import qs.modules.common.widgets.shapes +import "shapes/material-shapes.js" as MaterialShapes + +ShapeCanvas { + id: root + enum Shape { + Circle, + Square, + Slanted, + Arch, + Fan, + Arrow, + SemiCircle, + Oval, + Pill, + Triangle, + Diamond, + ClamShell, + Pentagon, + Gem, + Sunny, + VerySunny, + Cookie4Sided, + Cookie6Sided, + Cookie7Sided, + Cookie9Sided, + Cookie12Sided, + Ghostish, + Clover4Leaf, + Clover8Leaf, + Burst, + SoftBurst, + Boom, + SoftBoom, + Flower, + Puffy, + PuffyDiamond, + PixelCircle, + PixelTriangle, + Bun, + Heart + } + required property var shape + property double implicitSize + implicitHeight: implicitSize + implicitWidth: implicitSize + roundedPolygon: { + switch (root.shape) { + case MaterialShape.Shape.Circle: return MaterialShapes.getCircle(); + case MaterialShape.Shape.Square: return MaterialShapes.getSquare(); + case MaterialShape.Shape.Slanted: return MaterialShapes.getSlanted(); + case MaterialShape.Shape.Arch: return MaterialShapes.getArch(); + case MaterialShape.Shape.Fan: return MaterialShapes.getFan(); + case MaterialShape.Shape.Arrow: return MaterialShapes.getArrow(); + case MaterialShape.Shape.SemiCircle: return MaterialShapes.getSemiCircle(); + case MaterialShape.Shape.Oval: return MaterialShapes.getOval(); + case MaterialShape.Shape.Pill: return MaterialShapes.getPill(); + case MaterialShape.Shape.Triangle: return MaterialShapes.getTriangle(); + case MaterialShape.Shape.Diamond: return MaterialShapes.getDiamond(); + case MaterialShape.Shape.ClamShell: return MaterialShapes.getClamShell(); + case MaterialShape.Shape.Pentagon: return MaterialShapes.getPentagon(); + case MaterialShape.Shape.Gem: return MaterialShapes.getGem(); + case MaterialShape.Shape.Sunny: return MaterialShapes.getSunny(); + case MaterialShape.Shape.VerySunny: return MaterialShapes.getVerySunny(); + case MaterialShape.Shape.Cookie4Sided: return MaterialShapes.getCookie4Sided(); + case MaterialShape.Shape.Cookie6Sided: return MaterialShapes.getCookie6Sided(); + case MaterialShape.Shape.Cookie7Sided: return MaterialShapes.getCookie7Sided(); + case MaterialShape.Shape.Cookie9Sided: return MaterialShapes.getCookie9Sided(); + case MaterialShape.Shape.Cookie12Sided: return MaterialShapes.getCookie12Sided(); + case MaterialShape.Shape.Ghostish: return MaterialShapes.getGhostish(); + case MaterialShape.Shape.Clover4Leaf: return MaterialShapes.getClover4Leaf(); + case MaterialShape.Shape.Clover8Leaf: return MaterialShapes.getClover8Leaf(); + case MaterialShape.Shape.Burst: return MaterialShapes.getBurst(); + case MaterialShape.Shape.SoftBurst: return MaterialShapes.getSoftBurst(); + case MaterialShape.Shape.Boom: return MaterialShapes.getBoom(); + case MaterialShape.Shape.SoftBoom: return MaterialShapes.getSoftBoom(); + case MaterialShape.Shape.Flower: return MaterialShapes.getFlower(); + case MaterialShape.Shape.Puffy: return MaterialShapes.getPuffy(); + case MaterialShape.Shape.PuffyDiamond: return MaterialShapes.getPuffyDiamond(); + case MaterialShape.Shape.PixelCircle: return MaterialShapes.getPixelCircle(); + case MaterialShape.Shape.PixelTriangle: return MaterialShapes.getPixelTriangle(); + case MaterialShape.Shape.Bun: return MaterialShapes.getBun(); + case MaterialShape.Shape.Heart: return MaterialShapes.getHeart(); + default: return MaterialShapes.getCircle(); + } + } +} diff --git a/dots/.config/quickshell/ii/modules/common/widgets/shapes b/dots/.config/quickshell/ii/modules/common/widgets/shapes index 19a61bed7..3c4e4a374 160000 --- a/dots/.config/quickshell/ii/modules/common/widgets/shapes +++ b/dots/.config/quickshell/ii/modules/common/widgets/shapes @@ -1 +1 @@ -Subproject commit 19a61bed7e5ac338cfcfbf3329963704e6d658dc +Subproject commit 3c4e4a37451fc32c1755efd710d9e3a24b79986c diff --git a/dots/.config/quickshell/ii/modules/lock/LockSurface.qml b/dots/.config/quickshell/ii/modules/lock/LockSurface.qml index 5feba6c72..bf5895e8a 100644 --- a/dots/.config/quickshell/ii/modules/lock/LockSurface.qml +++ b/dots/.config/quickshell/ii/modules/lock/LockSurface.qml @@ -1,5 +1,6 @@ import QtQuick import QtQuick.Layouts +import Qt5Compat.GraphicalEffects import Quickshell.Services.UPower import qs import qs.services @@ -7,6 +8,7 @@ import qs.modules.common import qs.modules.common.widgets import qs.modules.common.functions import qs.modules.bar as Bar +import Quickshell import Quickshell.Services.SystemTray MouseArea { @@ -124,6 +126,26 @@ MouseArea { Keys.onPressed: event => { root.context.resetClearTimer(); } + + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Rectangle { + width: passwordBox.width - 8 + height: passwordBox.height + radius: height / 2 + } + } + + // We're drawing dots manually + color: ColorUtils.transparentize(Appearance.colors.colOnLayer1) + PasswordChars { + anchors { + fill: parent + leftMargin: passwordBox.padding + rightMargin: passwordBox.padding + } + length: root.context.currentText.length + } } ToolbarButton { diff --git a/dots/.config/quickshell/ii/modules/lock/PasswordChars.qml b/dots/.config/quickshell/ii/modules/lock/PasswordChars.qml new file mode 100644 index 000000000..058173000 --- /dev/null +++ b/dots/.config/quickshell/ii/modules/lock/PasswordChars.qml @@ -0,0 +1,96 @@ +pragma ComponentBehavior: Bound +import QtQuick +import qs +import qs.services +import qs.modules.common +import qs.modules.common.widgets +import qs.modules.common.functions +import Quickshell + +StyledFlickable { + id: root + required property int length + contentWidth: dotsRow.implicitWidth + contentX: (Math.max(contentWidth - width, 0)) + Behavior on contentX { + animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this) + } + rightMargin: 14 + Row { + id: dotsRow + anchors { + left: parent.left + verticalCenter: parent.verticalCenter + leftMargin: 4 + } + spacing: 10 + Repeater { + model: ScriptModel { + values: Array(root.length) + } + delegate: Item { + id: charItem + required property int index + implicitWidth: 10 + implicitHeight: 10 + MaterialShape { + id: materialShape + anchors.centerIn: parent + property list charShapes: [ + MaterialShape.Shape.Clover4Leaf, + MaterialShape.Shape.Arrow, + MaterialShape.Shape.Pill, + MaterialShape.Shape.SoftBurst, + MaterialShape.Shape.Diamond, + MaterialShape.Shape.ClamShell, + MaterialShape.Shape.Pentagon, + ] + shape: charShapes[charItem.index % charShapes.length] + // Animate on appearance + color: Appearance.colors.colPrimary + implicitSize: 0 + opacity: 0 + scale: 0.5 + Component.onCompleted: { + appearAnim.start(); + } + ParallelAnimation { + id: appearAnim + NumberAnimation { + target: materialShape + properties: "opacity" + to: 1 + duration: 50 + easing.type: Appearance.animation.elementMoveFast.type + easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve + } + NumberAnimation { + target: materialShape + properties: "scale" + to: 1 + duration: 200 + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.animationCurves.expressiveFastSpatial + } + NumberAnimation { + target: materialShape + properties: "implicitSize" + to: 34 + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.animationCurves.expressiveFastSpatial + } + ColorAnimation { + target: materialShape + properties: "color" + from: Appearance.colors.colPrimary + to: Appearance.colors.colOnLayer1 + duration: 1000 + easing.type: Appearance.animation.elementMoveFast.type + easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve + } + } + } + } + } + } +}