lock: freaking fancy password chars

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
     

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();
+        }
+    }
+}

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 {

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<var> 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
+                        }
+                    }
+                }
+            }
+        }
+    }
+}