From b1feee5bb432c3ad0fb5434de6e1efc0359d6601 Mon Sep 17 00:00:00 2001 From: Micah Stanley Date: Fri, 21 Mar 2025 01:25:34 +0000 Subject: [PATCH] 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 | 27 +---- .../contents/lockscreen/LockScreenContent.qml | 49 ++++++++- .../contents/lockscreen/QuickActionButton.qml | 99 ++++++++++++++----- 3 files changed, 123 insertions(+), 52 deletions(-) diff --git a/shell/contents/lockscreen/LockScreen.qml b/shell/contents/lockscreen/LockScreen.qml index 314e8c71..e9bf43e6 100644 --- a/shell/contents/lockscreen/LockScreen.qml +++ b/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 diff --git a/shell/contents/lockscreen/LockScreenContent.qml b/shell/contents/lockscreen/LockScreenContent.qml index d5acc97e..dd689242 100644 --- a/shell/contents/lockscreen/LockScreenContent.qml +++ b/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 + } + } } diff --git a/shell/contents/lockscreen/QuickActionButton.qml b/shell/contents/lockscreen/QuickActionButton.qml index bdfbf278..82719ade 100644 --- a/shell/contents/lockscreen/QuickActionButton.qml +++ b/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; } } -} \ No newline at end of file + + Timer { + id: pressedTimer + interval: Kirigami.Units.longDuration + repeat: false + onTriggered: { + haptics.buttonVibrate(); + buttonHeld = true; + } + } +}