mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-04-26 22:33:08 +00:00
5c41092c0f
The current lockscreen mockups were originally from this mockup: https://phabricator.kde.org/T12717 There are some issues with it however: - The 0 key is on the right, which is a bit strange and differs from the layouts of all other platforms - One-handed usability is worse due to 4 columns instead of 3 - Most mobile lockscreen have the keypad toward the center for one-handed usability, our keypad is stuck to the bottom - It makes use of a lot of shadows which makes it slower to load - It's supposed to emulate the design of the keyboard, but it doesn't look like it so it's out of place The new design is much simpler, with a centered 3 column approach making keys much easier to reach with one hand. It also avoids the use of shadows and layers.    TODO: - Investigate some improvements for keyboard input
84 lines
1.9 KiB
QML
84 lines
1.9 KiB
QML
// SPDX-FileCopyrightText: 2021-2024 Devin Lin <devin@kde.org>
|
|
// SPDX-License-Identifier: LGPL-2.0-or-later
|
|
|
|
import QtQuick 2.15
|
|
import QtQuick.Layouts 1.15
|
|
|
|
import org.kde.kirigami 2.20 as Kirigami
|
|
import org.kde.plasma.private.mobileshell as MobileShell
|
|
|
|
MobileShell.SwipeArea {
|
|
id: root
|
|
required property real keypadHeight
|
|
|
|
readonly property real openFactor: position / keypadHeight
|
|
property real position: 0
|
|
property bool movingUp: false
|
|
property real __oldPosition: position
|
|
|
|
signal opened()
|
|
|
|
mode: MobileShell.SwipeArea.VerticalOnly
|
|
|
|
function cancelAnimations() {
|
|
positionAnim.stop();
|
|
}
|
|
|
|
function goToOpenPosition() {
|
|
positionAnim.to = keypadHeight;
|
|
positionAnim.restart();
|
|
}
|
|
|
|
function goToClosePosition() {
|
|
positionAnim.to = 0;
|
|
positionAnim.restart();
|
|
}
|
|
|
|
function updateState() {
|
|
// don't update state if at end
|
|
if (position <= 0 || position >= keypadHeight) return;
|
|
|
|
if (movingUp) {
|
|
goToOpenPosition();
|
|
} else {
|
|
goToClosePosition();
|
|
}
|
|
}
|
|
|
|
NumberAnimation on position {
|
|
id: positionAnim
|
|
duration: 800
|
|
easing.type: Easing.OutExpo
|
|
|
|
onFinished: {
|
|
if (root.position === keypadHeight) {
|
|
root.opened();
|
|
}
|
|
}
|
|
}
|
|
|
|
onPositionChanged: {
|
|
movingUp = __oldPosition <= position;
|
|
__oldPosition = position;
|
|
|
|
// Limit position to between 0 and keypadHeight
|
|
if (position > keypadHeight) {
|
|
position = keypadHeight;
|
|
} else if (position < 0) {
|
|
position = 0;
|
|
}
|
|
}
|
|
|
|
onSwipeStarted: cancelAnimations();
|
|
onSwipeEnded: {
|
|
if (!positionAnim.running) {
|
|
updateState();
|
|
}
|
|
}
|
|
|
|
onSwipeMove: (totalDeltaX, totalDeltaY, deltaX, deltaY) => {
|
|
position = Math.max(0, Math.min(keypadHeight, position - deltaY));
|
|
}
|
|
}
|
|
|
|
|