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
132 lines
No EOL
4.1 KiB
QML
132 lines
No EOL
4.1 KiB
QML
// SPDX-FileCopyrightText: 2021-2024 Devin Lin <devin@kde.org>
|
|
// SPDX-License-Identifier: GPL-2.0-or-later
|
|
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Effects
|
|
|
|
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
|
|
|
|
Item {
|
|
id: root
|
|
|
|
required property var lockScreenState
|
|
required property bool isVertical
|
|
|
|
property var notificationsModel: []
|
|
property bool notificationsShown: false
|
|
|
|
property real fullHeight
|
|
|
|
signal passwordRequested()
|
|
|
|
// Vertical layout
|
|
ColumnLayout {
|
|
id: verticalLayout
|
|
visible: root.isVertical
|
|
spacing: 0
|
|
|
|
// center clock when no notifications are shown, otherwise move the clock upward
|
|
anchors.topMargin: !root.notificationsShown ? Math.round(root.fullHeight / 2 - (verticalLayout.implicitHeight / 2)) : Kirigami.Units.gridUnit * 5
|
|
anchors.bottomMargin: Kirigami.Units.gridUnit
|
|
anchors.fill: parent
|
|
|
|
// animate
|
|
Behavior on anchors.topMargin {
|
|
NumberAnimation {
|
|
duration: Kirigami.Units.veryLongDuration
|
|
easing.type: Easing.InOutExpo
|
|
}
|
|
}
|
|
|
|
LayoutItemProxy { target: clockAndMediaWidget }
|
|
LayoutItemProxy { target: notificationComponent }
|
|
}
|
|
|
|
// Horizontal layout (landscape on smaller devices)
|
|
Item {
|
|
id: horizontalLayout
|
|
anchors.fill: parent
|
|
visible: !root.isVertical
|
|
|
|
ColumnLayout {
|
|
id: leftLayout
|
|
width: parent.width / 2
|
|
anchors {
|
|
top: parent.top
|
|
bottom: parent.bottom
|
|
left: parent.left
|
|
leftMargin: Kirigami.Units.gridUnit * 3
|
|
}
|
|
|
|
LayoutItemProxy { target: clockAndMediaWidget }
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: rightLayout
|
|
anchors {
|
|
top: parent.top
|
|
bottom: parent.bottom
|
|
left: leftLayout.right
|
|
right: parent.right
|
|
rightMargin: Kirigami.Units.gridUnit
|
|
}
|
|
|
|
LayoutItemProxy { target: notificationComponent }
|
|
}
|
|
}
|
|
|
|
// Clock and media widget column
|
|
ColumnLayout {
|
|
id: clockAndMediaWidget
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: root.isVertical
|
|
spacing: Kirigami.Units.gridUnit * 2
|
|
|
|
Clock {
|
|
layoutAlignment: root.isVertical ? Qt.AlignHCenter : Qt.AlignLeft
|
|
Layout.alignment: root.isVertical ? Qt.AlignHCenter : Qt.AlignLeft
|
|
Layout.fillWidth: true
|
|
Layout.bottomMargin: root.isVertical ? Kirigami.Units.gridUnit * 2 : 0
|
|
}
|
|
|
|
MobileShell.MediaControlsWidget {
|
|
Layout.alignment: root.isVertical ? Qt.AlignHCenter : Qt.AlignLeft
|
|
Layout.fillWidth: true
|
|
Layout.maximumWidth: Kirigami.Units.gridUnit * 25
|
|
Layout.leftMargin: root.isVertical ? Kirigami.Units.gridUnit : 0
|
|
Layout.rightMargin: root.isVertical ? Kirigami.Units.gridUnit : 0
|
|
|
|
layer.enabled: true
|
|
layer.effect: MultiEffect {
|
|
blurMax: 16
|
|
shadowEnabled: true
|
|
shadowVerticalOffset: 1
|
|
shadowOpacity: 0.5
|
|
shadowColor: Qt.lighter(Kirigami.Theme.backgroundColor, 0.1)
|
|
}
|
|
}
|
|
}
|
|
|
|
NotificationsComponent {
|
|
id: notificationComponent
|
|
lockScreenState: root.lockScreenState
|
|
notificationsModel: root.notificationsModel
|
|
|
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
Layout.maximumWidth: Kirigami.Units.gridUnit * (25 + 2) // clip margins
|
|
|
|
leftMargin: root.isVertical ? 0 : Kirigami.Units.gridUnit
|
|
rightMargin: root.isVertical ? 0 : Kirigami.Units.gridUnit
|
|
bottomMargin: root.isVertical ? 0 : Kirigami.Units.gridUnit
|
|
topMargin: Kirigami.Units.gridUnit
|
|
|
|
onPasswordRequested: root.passwordRequested()
|
|
onNotificationsShownChanged: root.notificationsShown = notificationsShown
|
|
}
|
|
} |