Skip to content

Implement lockscreen mockups

Devin Lin requested to merge work/lockscreen-work into master

Overhauling the lockscreen with ideas from these mockups: https://phabricator.kde.org/T12717#224147

The pin keyboard is the main change, which replaces the current transparent numpad with something that looks more similar to the maliit keyboard. This can be more consistent for the future if normal text passwords are going to be added. It is also easier to reach all of the buttons with one hand as it is more compact than the current numpad. The buttons are bigger as well, and feel a bit more satisfying when tapped on.

I've also done some layout work, in which the clock and media player are one column, and the notification list is another. In a phone form factor, the notification list is below the clock and media player, while in a tablet form factor, the notification list is to the right.

I'm having some trouble figuring out the notifications API; I saw on the phabricator issue to use the WatchedNotificationsModel, but it doesn't seem like the correct model to be using on the phone screen (it only receives new notifications). Another thing is, I do not know whether I should be reusing a notification component from somewhere, or writing one from scratch.

Other additions:

  • The keypad is now much better with different screen widths, it squashes when the screen becomes smaller, and has a maximum fixed width to prevent the spacing from changing
  • Keyboard input now works with the keypad
  • Added wrong pin warning
  • The number that was last typed in the pin shows up for a half second, before switching to a dot
  • Use a more performant drop shadow for the clock text (turns out it caused a lot of lag)

EDIT (more additions):

  • Basic lockscreen notifications were added, more work can be in another merge request (as permissions on what actions a user can do would need to be discussed separately)
  • Clock is centred in portrait view, unless there are notifications (in which the clock slides upwards)
  • Blur animation when the pin drawer opens
  • Blur background when notifications are shown.

Experiment: https://imgur.com/a/jotOBn2

Experimenting on the pinephone (the filming is a bit bad, some colours on the keypad can't be seen): output

Edited by Devin Lin

Merge request reports