lock: fix weird selection (fixes #2453)

dots/.config/quickshell/ii/modules/ii/lock/LockSurface.qml

@@ -136,6 +136,8 @@ MouseArea {
             // Style
             clip: true
             font.pixelSize: Appearance.font.pixelSize.small
+            selectedTextColor: materialShapeChars ? "transparent" : Appearance.colors.colOnSecondaryContainer
+            selectionColor: materialShapeChars ? "transparent" : Appearance.colors.colSecondaryContainer
 
             // Password
             enabled: !root.context.unlockInProgress
@@ -195,6 +197,9 @@ MouseArea {
                 }
                 sourceComponent: PasswordChars {
                     length: root.context.currentText.length
+                    selectionStart: passwordBox.selectionStart
+                    selectionEnd: passwordBox.selectionEnd
+                    cursorPosition: passwordBox.cursorPosition
                 }
             }
         }
@@ -215,7 +220,7 @@ MouseArea {
                 iconSize: 24
                 text: {
                     if (root.context.targetAction === LockContext.ActionEnum.Unlock) {
-                        return root.ctrlHeld ? "emoji_food_beverage" : "arrow_right_alt";
+                        return root.ctrlHeld ? "coffee" : "arrow_right_alt";
                     } else if (root.context.targetAction === LockContext.ActionEnum.Poweroff) {
                         return "power_settings_new";
                     } else if (root.context.targetAction === LockContext.ActionEnum.Reboot) {

dots/.config/quickshell/ii/modules/ii/lock/PasswordChars.qml

@@ -9,29 +9,62 @@ import Quickshell
 
 StyledFlickable {
     id: root
+
     required property int length
+    property int selectionStart
+    property int selectionEnd
+    property int cursorPosition
+
+    property color color: Appearance.colors.colPrimary
+    property color selectedTextColor: Appearance.colors.colOnSecondaryContainer
+    property color selectionColor: Appearance.colors.colSecondaryContainer
+
+    property int charSize: 20
+
     contentWidth: dotsRow.implicitWidth
     contentX: (Math.max(contentWidth - width, 0))
     Behavior on contentX {
         animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)
     }
+
+    Rectangle {
+        id: cursor
+        anchors {
+            verticalCenter: parent.verticalCenter
+            left: parent.left
+            leftMargin: root.charSize * root.cursorPosition
+        }
+        color: root.color
+        implicitWidth: 2
+        implicitHeight: root.charSize
+        Behavior on anchors.leftMargin {
+            animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(cursor)
+        }
+    }
+
     Row {
         id: dotsRow
         anchors {
             left: parent.left
             verticalCenter: parent.verticalCenter
-            leftMargin: 4
+            leftMargin: 4 - 5 // -5 to account for spacing being simulated by char item width
         }
-        spacing: 10
+        spacing: 0
+
         Repeater {
-            model: ScriptModel {
+            model: ScriptModel { // TODO: use proper custom object model to insert new char at the correct pos
                 values: Array(root.length)
             }
-            delegate: Item {
+
+            delegate: Rectangle {
                 id: charItem
                 required property int index
-                implicitWidth: 10
+                implicitWidth: root.charSize
-                implicitHeight: 10
+                implicitHeight: root.charSize
+                property bool selected: index >= root.selectionStart && index < root.selectionEnd
+
+                color: ColorUtils.transparentize(root.selectionColor, selected ? 0 : 1)
+                
                 MaterialShape {
                     id: materialShape
                     anchors.centerIn: parent
@@ -46,7 +79,7 @@ StyledFlickable {
                     ]
                     shape: charShapes[charItem.index % charShapes.length]
                     // Animate on appearance
-                    color: Appearance.colors.colPrimary
+                    color: charItem.selected ? root.selectedTextColor : root.color
                     implicitSize: 0
                     opacity: 0
                     scale: 0.5