Adjust keypad height for vkbd and ensure vkbd is always showing

look-and-feel/contents/lockscreen/Keypad.qml

@@ -32,7 +32,13 @@ Rectangle {
     
     opacity: Math.sin((Math.PI / 2) * swipeProgress + 1.5 * Math.PI) + 1
     
-    implicitHeight: passwordBar.isPinMode ? PlasmaCore.Units.gridUnit * 17 : passwordBar.implicitHeight
+    implicitHeight: {
+        if (passwordBar.isPinMode && !Qt.inputMethod.visible) {
+            return PlasmaCore.Units.gridUnit * 17;
+        } else {
+            return PlasmaCore.Units.smallSpacing * 2 + Qt.inputMethod.keyboardRectangle.height + passwordBar.implicitHeight;
+        }
+    }
     Behavior on implicitHeight {
         NumberAnimation {
             duration: Kirigami.Units.longDuration

look-and-feel/contents/lockscreen/LockScreen.qml

@@ -1,5 +1,6 @@
 /*
 SPDX-FileCopyrightText: 2019 Nicolas Fella <nicolas.fella@gmx.de>
+SPDX-FileCopyrightText: 2021 Devin Lin <espidev@gmail.com>
 
 SPDX-License-Identifier: GPL-2.0-or-later
 */

look-and-feel/contents/lockscreen/PasswordBar.qml

@@ -12,6 +12,7 @@ import org.kde.plasma.components 2.0 as PlasmaComponents
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.workspace.keyboardlayout 1.0
 import org.kde.kirigami 2.12 as Kirigami
+import org.kde.plasma.workspace.keyboardlayout 1.0 as Keyboards
 
 Rectangle {
     id: root
@@ -69,6 +70,10 @@ Rectangle {
         if (!authenticator.graceLocked) {
             authenticator.tryUnlock(root.password);
         }
+        if (keypadOpen && !isPinMode) {
+            // make sure keyboard doesn't close
+            openKeyboardTimer.restart();
+        }
     }
     
     function keyPress(data) {
@@ -85,6 +90,15 @@ Rectangle {
         }
     }
     
+    // HACK: we have to open the virtual keyboard after a certain amount of time or else it will close anyway
+    Timer {
+        id: openKeyboardTimer
+        interval: 10
+        running: false
+        repeat: false
+        onTriggered: Keyboards.KWinVirtualKeyboard.active = true
+    }
+    
     // trigger turning letter into dot after 500 milliseconds
     Timer {
         id: letterTimer
@@ -148,102 +162,112 @@ Rectangle {
         }
     }
     
-    // toggle between showing keypad and not
+    MouseArea {
-    ToolButton {
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        anchors.margins: units.smallSpacing
-        implicitWidth: height
-        icon.name: "input-keyboard-virtual-symbolic"
-        onClicked: root.isPinMode = !root.isPinMode
-    }
-    
-    // label ("wrong pin", "enter pin")
-    Label {
-        opacity: password.length === 0 ? 1 : 0
-        anchors.centerIn: parent
-        text: root.pinLabel
-        font.pointSize: 12
-        color: root.headerTextColor 
-        
-        Behavior on opacity {
-            NumberAnimation { duration: 200 }
-        }
-    }
-    
-    // pin dot display
-    ColumnLayout {
         anchors.fill: parent
-        
+        onClicked: {
-        ListView {
+            // clicking on rectangle opens keyboard if not already open
-            id: dotDisplay
+            if (!isPinMode) {
-            property int dotWidth: Math.round(units.gridUnit * 0.35)
+                Keyboards.KWinVirtualKeyboard.active = true;
-            
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-            Layout.bottomMargin: Math.round(dotWidth / 2)
-            orientation: ListView.Horizontal
-            implicitWidth: count * dotWidth + spacing * (count - 1)
-            spacing: 8
-            model: dotDisplayModel
-            
-            Behavior on implicitWidth {
-                NumberAnimation { duration: 50 }
             }
+        }
         
-            delegate: Item {
+        // toggle between showing keypad and not
-                implicitWidth: dotDisplay.dotWidth
+        ToolButton {
-                implicitHeight: dotDisplay.dotWidth
+            anchors.right: parent.right
-                property bool showChar: index === root.previewCharIndex
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.margins: units.smallSpacing
+            implicitWidth: height
+            icon.name: "input-keyboard-virtual-symbolic"
+            onClicked: root.isPinMode = !root.isPinMode
+        }
         
-                Component.onCompleted: {
+        // label ("wrong pin", "enter pin")
-                    if (showChar) {
+        Label {
-                        charAnimation.to = 1;
+            opacity: password.length === 0 ? 1 : 0
-                        charAnimation.duration = 75;
+            anchors.centerIn: parent
-                        charAnimation.restart();
+            text: root.pinLabel
-                    } else {
+            font.pointSize: 12
-                        dotAnimation.to = 1;
+            color: root.headerTextColor 
-                        dotAnimation.restart();
+            
-                    }
+            Behavior on opacity {
+                NumberAnimation { duration: 200 }
+            }
+        }
+        
+        // pin dot display
+        ColumnLayout {
+            anchors.fill: parent
+            
+            ListView {
+                id: dotDisplay
+                property int dotWidth: Math.round(units.gridUnit * 0.35)
+                
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                Layout.bottomMargin: Math.round(dotWidth / 2)
+                orientation: ListView.Horizontal
+                implicitWidth: count * dotWidth + spacing * (count - 1)
+                spacing: 8
+                model: dotDisplayModel
+                
+                Behavior on implicitWidth {
+                    NumberAnimation { duration: 50 }
                 }
                 
-                onShowCharChanged: {
+                delegate: Item {
-                    if (!showChar) {
+                    implicitWidth: dotDisplay.dotWidth
-                        charAnimation.to = 0;
+                    implicitHeight: dotDisplay.dotWidth
-                        charAnimation.duration = 50;
+                    property bool showChar: index === root.previewCharIndex
-                        charAnimation.restart();
+                    
-                        dotAnimation.to = 1;
+                    Component.onCompleted: {
-                        dotAnimation.start();
+                        if (showChar) {
+                            charAnimation.to = 1;
+                            charAnimation.duration = 75;
+                            charAnimation.restart();
+                        } else {
+                            dotAnimation.to = 1;
+                            dotAnimation.restart();
+                        }
                     }
-                }
                     
-                Rectangle { // dot
+                    onShowCharChanged: {
-                    id: dot
+                        if (!showChar) {
-                    scale: 0
+                            charAnimation.to = 0;
-                    anchors.fill: parent
+                            charAnimation.duration = 50;
-                    radius: width
+                            charAnimation.restart();
-                    color: root.waitingForAuth ? root.headerTextInactiveColor : root.headerTextColor // dim when waiting for auth
+                            dotAnimation.to = 1;
-                    
+                            dotAnimation.start();
-                    PropertyAnimation {
+                        }
-                        id: dotAnimation
-                        target: dot;
-                        property: "scale";
-                        duration: 50
                     }
-                }
                     
-                Label { // number/letter
+                    Rectangle { // dot
-                    id: charLabel
+                        id: dot
-                    scale: 0
+                        scale: 0
-                    anchors.centerIn: parent
+                        anchors.fill: parent
-                    color: root.waitingForAuth ? root.headerTextInactiveColor : root.headerTextColor // dim when waiting for auth
+                        radius: width
-                    text: model.char
+                        color: root.waitingForAuth ? root.headerTextInactiveColor : root.headerTextColor // dim when waiting for auth
-                    font.pointSize: 12
                         
-                    PropertyAnimation {
+                        PropertyAnimation {
-                        id: charAnimation
+                            id: dotAnimation
-                        target: charLabel;
+                            target: dot;
-                        property: "scale";
+                            property: "scale";
+                            duration: 50
+                        }
+                    }
+                    
+                    Label { // number/letter
+                        id: charLabel
+                        scale: 0
+                        anchors.centerIn: parent
+                        color: root.waitingForAuth ? root.headerTextInactiveColor : root.headerTextColor // dim when waiting for auth
+                        text: model.char
+                        font.pointSize: 12
+                        
+                        PropertyAnimation {
+                            id: charAnimation
+                            target: charLabel;
+                            property: "scale";
+                        }
                     }
                 }
             }