Lockscreen: Quick Action Button General Improvements

General improvements to the the quick action buttons look and feel. Also, press and hold was added to activate them.

As always, any feedback on these changes is greatly appreciated.

![Screenshot_20250319_230658](/uploads/c2ade0bc4d4fcf3e9ace47acaf94a531/Screenshot_20250319_230658.png)
![Screenshot_20250319_230724](/uploads/1c7d3c7c38607b6e87dbc70830ec4102/Screenshot_20250319_230724.png)

shell/contents/lockscreen/LockScreen.qml

@@ -9,7 +9,6 @@ import QtQuick.Layouts
 import org.kde.plasma.core as PlasmaCore
 import org.kde.notificationmanager as Notifications
 import org.kde.plasma.private.mobileshell as MobileShell
-import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings
 import org.kde.plasma.private.mobileshell.dpmsplugin as DPMS
 import org.kde.plasma.components 3.0 as PC3
 
@@ -27,7 +26,7 @@ Item {
     readonly property var notifModel: Notifications.WatchedNotificationsModel {}
 
     // Only show widescreen mode for short height devices (ex. phone landscape)
-    readonly property bool isWidescreen: root.height < 720 && (root.height < root.width * 0.75)
+    readonly property bool isWidescreen: root.height < Kirigami.Units.gridUnit * 25 && (root.height < root.width * 0.75)
     property bool notificationsShown: false
 
     property var passwordBar: flickableLoader.item ? flickableLoader.item.flickable.passwordBar : null
@@ -189,18 +188,6 @@ Item {
                         }
                     }
 
-                    QuickActionButton {
-                        id: leftButton
-                        buttonAction: ShellSettings.Settings.lockscreenLeftButtonAction
-                        opacity: Math.max(0, 1 - flickable.openFactor * 2)
-                        anchors {
-                            bottom: parent.bottom
-                            left: parent.left
-                            bottomMargin: Kirigami.Units.largeSpacing * 3
-                            leftMargin: Kirigami.Units.largeSpacing * 3
-                        }
-                    }
-
                     // scroll up icon
                     BottomIconIndicator {
                         id: scrollUpIconLoader
@@ -212,18 +199,6 @@ Item {
                         anchors.horizontalCenter: parent.horizontalCenter
                     }
 
-                    QuickActionButton {
-                        id: rightButton
-                        buttonAction: ShellSettings.Settings.lockscreenRightButtonAction
-                        opacity: Math.max(0, 1 - flickable.openFactor * 2)
-                        anchors {
-                            bottom: parent.bottom
-                            right: parent.right
-                            bottomMargin: Kirigami.Units.largeSpacing * 3
-                            rightMargin: Kirigami.Units.largeSpacing * 3
-                        }
-                    }
-
                     Rectangle {
                         id: keypadScrim
                         anchors.fill: parent

shell/contents/lockscreen/LockScreenContent.qml

@@ -9,6 +9,7 @@ import org.kde.kirigami 2.20 as Kirigami
 import org.kde.plasma.workspace.keyboardlayout 1.0
 import org.kde.notificationmanager as Notifications
 import org.kde.plasma.private.mobileshell as MobileShell
+import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings
 
 Item {
     id: root
@@ -37,6 +38,7 @@ Item {
 
         LayoutItemProxy { target: clockAndMediaWidget }
         LayoutItemProxy { target: notificationComponent }
+        LayoutItemProxy { target: actionButtons }
     }
 
     // Horizontal layout (landscape on smaller devices)
@@ -47,12 +49,13 @@ Item {
 
         ColumnLayout {
             id: leftLayout
-            width: parent.width / 2
+            width: Math.round(parent.width / 2.15)
             anchors {
                 top: parent.top
                 bottom: parent.bottom
                 left: parent.left
                 leftMargin: Kirigami.Units.gridUnit * 3
+                bottomMargin: Kirigami.Units.gridUnit * 3
             }
 
             LayoutItemProxy { target: clockAndMediaWidget }
@@ -70,6 +73,15 @@ Item {
 
             LayoutItemProxy { target: notificationComponent }
         }
+
+        ColumnLayout {
+            anchors.bottomMargin: Kirigami.Units.gridUnit
+            anchors.leftMargin: Kirigami.Units.gridUnit
+            anchors.rightMargin: Kirigami.Units.gridUnit
+            anchors.fill: parent
+
+            LayoutItemProxy { target: actionButtons }
+        }
     }
 
     // Clock and media widget column
@@ -111,10 +123,43 @@ Item {
         leftMargin: root.isVertical ? 0 : Kirigami.Units.gridUnit
         rightMargin: root.isVertical ? 0 : Kirigami.Units.gridUnit
         topMargin: root.isVertical ? 0 : MobileShell.Constants.topPanelHeight
-        bottomMargin: Kirigami.Units.gridUnit * 2
+        bottomMargin: root.isVertical && (Kirigami.Units.gridUnit * 35 < root.width) && actionButtons.isVisible ? 0 : Kirigami.Units.gridUnit
         scrollLock: root.scrollLock
 
         onPasswordRequested: root.passwordRequested()
         onNotificationsShownChanged: root.notificationsShown = notificationsShown
     }
+
+    RowLayout {
+        id: actionButtons
+
+        readonly property int sideMargin: Kirigami.Units.gridUnit * 2
+        readonly property bool isVisible: leftButton.visible || rightButton.visible
+
+        Layout.fillWidth: true
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+        Layout.leftMargin: actionButtons.sideMargin
+        Layout.rightMargin: actionButtons.sideMargin
+
+        // Left quick action button.
+        QuickActionButton {
+            id: leftButton
+            buttonAction: ShellSettings.Settings.lockscreenLeftButtonAction
+            opacity: Math.max(0, 1 - flickable.openFactor * 2)
+
+            Layout.alignment: Qt.AlignVCenter
+        }
+
+        // Spacer
+        Item { Layout.fillWidth: true }
+
+        // Right quick action button.
+        QuickActionButton {
+            id: rightButton
+            buttonAction: ShellSettings.Settings.lockscreenRightButtonAction
+            opacity: Math.max(0, 1 - flickable.openFactor * 2)
+
+            Layout.alignment: Qt.AlignVCenter
+        }
+    }
 }

shell/contents/lockscreen/QuickActionButton.qml

@@ -10,38 +10,89 @@ import org.kde.plasma.private.mobileshell as MobileShell
 import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings
 import org.kde.kirigami as Kirigami
 
-Button {
+AbstractButton {
     id: root
+
     property int buttonAction
 
+    property bool buttonHeld: false
+    property double scale: pressed ? (buttonHeld ? 1.7 : 1.5) : 1
+
+    Behavior on scale {
+        NumberAnimation {
+            duration: Kirigami.Units.longDuration
+            easing.type: Easing.OutBack
+        }
+    }
+
+    MobileShell.HapticsEffect {
+        id: haptics
+    }
+
     visible: buttonAction !== ShellSettings.Settings.None
-    highlighted: buttonAction === ShellSettings.Settings.Flashlight ? FlashlightUtil.torchEnabled() : false
-    display: Button.IconOnly
-    icon.name: {
-        switch (buttonAction) {
-        case ShellSettings.Settings.Flashlight:
-            return "flashlight-on-symbolic"
-        case ShellSettings.Settings.Camera:
-            return "camera-photo-symbolic"
+    padding: Math.round(Kirigami.Units.gridUnit * 1.25)
+
+    transform: Scale {
+        origin.x: width / 2
+        origin.y: height / 2
+        xScale: scale
+        yScale: scale
+    }
+
+    background: Rectangle {
+        radius: width
+        color: Qt.rgba(255, 255, 255, pressed ? (buttonHeld ? 0.7 : 0.5) : 0.2)
+    }
+
+    contentItem: Item {
+        Kirigami.Icon {
+            anchors.centerIn: parent
+            width: Kirigami.Units.iconSizes.small
+            height: Kirigami.Units.iconSizes.small
+            source: {
+                switch (buttonAction) {
+                    case ShellSettings.Settings.Flashlight:
+                        return "flashlight-on-symbolic"
+                    case ShellSettings.Settings.Camera:
+                        return "camera-photo-symbolic"
+                }
+            }
+            Kirigami.Theme.inherit: false
+            Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
         }
     }
-    text: {
-        switch (buttonAction) {
-        case ShellSettings.Settings.Flashlight:
-            return i18nc("@action:button", "Turn flashlight on");
-        case ShellSettings.Settings.Camera:
-            return i18nc("@action:button", "Open camera");
+
+    onPressedChanged: {
+        if (pressed) {
+            pressedTimer.restart();
+            buttonHeld = false;
+        } else{
+            pressedTimer.stop();
         }
     }
-    onClicked: {
+
+    onReleased: {
+        if (!buttonHeld) {
+            return
+        }
         switch (buttonAction) {
-        case ShellSettings.Settings.Flashlight:
-            FlashlightUtil.toggleTorch();
-            return;
-        case ShellSettings.Settings.Camera:
-            MobileShell.ShellUtil.launchApp("org.kde.plasma.camera");
-            flickable.goToOpenPosition();
-            return;
+            case ShellSettings.Settings.Flashlight:
+                FlashlightUtil.toggleTorch();
+                return;
+            case ShellSettings.Settings.Camera:
+                MobileShell.ShellUtil.launchApp("org.kde.plasma.camera");
+                flickable.goToOpenPosition();
+                return;
         }
     }
-}
+
+    Timer {
+        id: pressedTimer
+        interval: Kirigami.Units.longDuration
+        repeat: false
+        onTriggered: {
+            haptics.buttonVibrate();
+            buttonHeld = true;
+        }
+    }
+}