mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-04-29 15:03:09 +00:00
lockscreen: Port from Flickable to SwipeArea
This commit is contained in:
Devin Lin
parent
911d41e5ce
commit
f949ea7fdf
2 changed files with 107 additions and 143 deletions
|
|
@ -5,8 +5,9 @@ import QtQuick 2.15
|
||||||
import QtQuick.Layouts 1.15
|
import QtQuick.Layouts 1.15
|
||||||
|
|
||||||
import org.kde.kirigami 2.20 as Kirigami
|
import org.kde.kirigami 2.20 as Kirigami
|
||||||
|
import org.kde.plasma.private.mobileshell as MobileShell
|
||||||
|
|
||||||
Flickable {
|
MobileShell.SwipeArea {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
property int position: 0
|
property int position: 0
|
||||||
|
|
@ -52,14 +53,6 @@ Flickable {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// we use flickable solely for capturing flicks, not positioning elements
|
|
||||||
contentWidth: width
|
|
||||||
contentHeight: height * 2
|
|
||||||
contentX: 0
|
|
||||||
contentY: startContentY
|
|
||||||
|
|
||||||
readonly property real startContentY: contentHeight / 2
|
|
||||||
|
|
||||||
property int oldPosition: position
|
property int oldPosition: position
|
||||||
property bool movingUp: false
|
property bool movingUp: false
|
||||||
|
|
||||||
|
|
@ -68,38 +61,15 @@ Flickable {
|
||||||
oldPosition = position;
|
oldPosition = position;
|
||||||
}
|
}
|
||||||
|
|
||||||
// update position from flickable movement
|
onSwipeStarted: cancelAnimations();
|
||||||
property real oldContentY
|
onSwipeEnded: {
|
||||||
onContentYChanged: {
|
|
||||||
position = Math.max(0, Math.min(keypadHeight, position + (contentY - oldContentY)));
|
|
||||||
oldContentY = contentY;
|
|
||||||
}
|
|
||||||
|
|
||||||
onMovementStarted: cancelAnimations();
|
|
||||||
onMovementEnded: {
|
|
||||||
if (!positionAnim.running) {
|
if (!positionAnim.running) {
|
||||||
updateState();
|
updateState();
|
||||||
}
|
}
|
||||||
resetPosition();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onFlickStarted: root.cancelFlick()
|
onSwipeMove: (totalDeltaX, totalDeltaY, deltaX, deltaY) => {
|
||||||
onFlickEnded: resetPosition();
|
position = Math.max(0, Math.min(keypadHeight, position + deltaY));
|
||||||
|
|
||||||
onDraggingChanged: {
|
|
||||||
if (!dragging) {
|
|
||||||
resetPosition();
|
|
||||||
if (!positionAnim.running) {
|
|
||||||
root.updateState();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
cancelAnimations();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetPosition() {
|
|
||||||
oldContentY = startContentY;
|
|
||||||
contentY = startContentY;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -108,131 +108,125 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
LockScreenNarrowContent {
|
||||||
width: flickable.width
|
id: phoneComponent
|
||||||
height: flickable.height
|
|
||||||
y: flickable.contentY // effectively anchored to the screen
|
|
||||||
|
|
||||||
LockScreenNarrowContent {
|
visible: !isWidescreen
|
||||||
id: phoneComponent
|
active: visible
|
||||||
|
opacity: 1 - flickable.openFactor
|
||||||
|
|
||||||
visible: !isWidescreen
|
fullHeight: root.height
|
||||||
active: visible
|
|
||||||
|
lockScreenState: root.lockScreenState
|
||||||
|
notificationsModel: root.notifModel
|
||||||
|
onNotificationsShownChanged: root.notificationsShown = notificationsShown
|
||||||
|
|
||||||
|
onPasswordRequested: flickable.goToOpenPosition()
|
||||||
|
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.bottom: scrollUpIconLoader.top
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
|
||||||
|
// move while swiping up
|
||||||
|
transform: Translate { y: Math.round((1 - phoneComponent.opacity) * (-root.height / 6)) }
|
||||||
|
}
|
||||||
|
|
||||||
|
LockScreenWideScreenContent {
|
||||||
|
id: tabletComponent
|
||||||
|
|
||||||
|
visible: isWidescreen
|
||||||
|
active: visible
|
||||||
|
opacity: 1 - flickable.openFactor
|
||||||
|
|
||||||
|
lockScreenState: root.lockScreenState
|
||||||
|
notificationsModel: root.notifModel
|
||||||
|
onNotificationsShownChanged: root.notificationsShown = notificationsShown
|
||||||
|
|
||||||
|
onPasswordRequested: flickable.goToOpenPosition()
|
||||||
|
|
||||||
|
anchors.topMargin: headerBarLoader.statusBarHeight
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.bottom: scrollUpIconLoader.top
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
|
||||||
|
// move while swiping up
|
||||||
|
transform: Translate { y: Math.round((1 - phoneComponent.opacity) * (-root.height / 6)) }
|
||||||
|
}
|
||||||
|
|
||||||
|
// scroll up icon
|
||||||
|
Loader {
|
||||||
|
id: scrollUpIconLoader
|
||||||
|
asynchronous: true
|
||||||
|
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
anchors.bottomMargin: Kirigami.Units.gridUnit + flickable.position * 0.5
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
|
||||||
|
sourceComponent: Kirigami.Icon {
|
||||||
|
id: scrollUpIcon
|
||||||
|
implicitWidth: Kirigami.Units.iconSizes.smallMedium
|
||||||
|
implicitHeight: Kirigami.Units.iconSizes.smallMedium
|
||||||
opacity: 1 - flickable.openFactor
|
opacity: 1 - flickable.openFactor
|
||||||
|
|
||||||
fullHeight: root.height
|
Kirigami.Theme.colorSet: Kirigami.Theme.ComplementaryColorGroup
|
||||||
|
source: "arrow-up"
|
||||||
lockScreenState: root.lockScreenState
|
|
||||||
notificationsModel: root.notifModel
|
|
||||||
onNotificationsShownChanged: root.notificationsShown = notificationsShown
|
|
||||||
|
|
||||||
onPasswordRequested: flickable.goToOpenPosition()
|
|
||||||
|
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.bottom: scrollUpIconLoader.top
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
|
|
||||||
// move while swiping up
|
|
||||||
transform: Translate { y: Math.round((1 - phoneComponent.opacity) * (-root.height / 6)) }
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
LockScreenWideScreenContent {
|
// password keypad
|
||||||
id: tabletComponent
|
Loader {
|
||||||
|
id: keypadLoader
|
||||||
|
width: parent.width
|
||||||
|
asynchronous: true
|
||||||
|
active: !root.lockScreenState.passwordless // only load keypad if not passwordless
|
||||||
|
|
||||||
visible: isWidescreen
|
anchors.bottom: parent.bottom
|
||||||
active: visible
|
|
||||||
opacity: 1 - flickable.openFactor
|
|
||||||
|
|
||||||
lockScreenState: root.lockScreenState
|
sourceComponent: ColumnLayout {
|
||||||
notificationsModel: root.notifModel
|
property alias passwordBar: keypad.passwordBar
|
||||||
onNotificationsShownChanged: root.notificationsShown = notificationsShown
|
|
||||||
|
|
||||||
onPasswordRequested: flickable.goToOpenPosition()
|
transform: Translate { y: flickable.keypadHeight - flickable.position }
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
anchors.topMargin: headerBarLoader.statusBarHeight
|
// info notification text
|
||||||
anchors.top: parent.top
|
Label {
|
||||||
anchors.bottom: scrollUpIconLoader.top
|
Layout.fillWidth: true
|
||||||
anchors.left: parent.left
|
Layout.rightMargin: Kirigami.Units.gridUnit
|
||||||
anchors.right: parent.right
|
Layout.leftMargin: Kirigami.Units.gridUnit
|
||||||
|
Layout.bottomMargin: Kirigami.Units.smallSpacing * 2
|
||||||
|
font.pointSize: 9
|
||||||
|
|
||||||
// move while swiping up
|
elide: Text.ElideRight
|
||||||
transform: Translate { y: Math.round((1 - phoneComponent.opacity) * (-root.height / 6)) }
|
horizontalAlignment: Text.AlignHCenter
|
||||||
}
|
text: root.lockScreenState.info
|
||||||
|
opacity: (root.lockScreenState.info.length === 0 || flickable.openFactor < 1) ? 0 : 1
|
||||||
|
color: 'white'
|
||||||
|
|
||||||
// scroll up icon
|
Behavior on opacity {
|
||||||
Loader {
|
NumberAnimation { duration: 200 }
|
||||||
id: scrollUpIconLoader
|
}
|
||||||
asynchronous: true
|
}
|
||||||
|
|
||||||
anchors.bottom: parent.bottom
|
// scroll down icon
|
||||||
anchors.bottomMargin: Kirigami.Units.gridUnit + flickable.position * 0.5
|
Kirigami.Icon {
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
Layout.bottomMargin: Kirigami.Units.gridUnit
|
||||||
sourceComponent: Kirigami.Icon {
|
|
||||||
id: scrollUpIcon
|
|
||||||
implicitWidth: Kirigami.Units.iconSizes.smallMedium
|
implicitWidth: Kirigami.Units.iconSizes.smallMedium
|
||||||
implicitHeight: Kirigami.Units.iconSizes.smallMedium
|
implicitHeight: Kirigami.Units.iconSizes.smallMedium
|
||||||
opacity: 1 - flickable.openFactor
|
|
||||||
|
|
||||||
Kirigami.Theme.colorSet: Kirigami.Theme.ComplementaryColorGroup
|
Kirigami.Theme.colorSet: Kirigami.Theme.ComplementaryColorGroup
|
||||||
source: "arrow-up"
|
source: "arrow-down"
|
||||||
|
opacity: Math.sin((Math.PI / 2) * flickable.openFactor + 1.5 * Math.PI) + 1
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// password keypad
|
Keypad {
|
||||||
Loader {
|
id: keypad
|
||||||
id: keypadLoader
|
Layout.fillWidth: true
|
||||||
width: parent.width
|
focus: true
|
||||||
asynchronous: true
|
|
||||||
active: !root.lockScreenState.passwordless // only load keypad if not passwordless
|
|
||||||
|
|
||||||
anchors.bottom: parent.bottom
|
lockScreenState: root.lockScreenState
|
||||||
|
swipeProgress: flickable.openFactor
|
||||||
sourceComponent: ColumnLayout {
|
|
||||||
property alias passwordBar: keypad.passwordBar
|
|
||||||
|
|
||||||
transform: Translate { y: flickable.keypadHeight - flickable.position }
|
|
||||||
spacing: 0
|
|
||||||
|
|
||||||
// info notification text
|
|
||||||
Label {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.rightMargin: Kirigami.Units.gridUnit
|
|
||||||
Layout.leftMargin: Kirigami.Units.gridUnit
|
|
||||||
Layout.bottomMargin: Kirigami.Units.smallSpacing * 2
|
|
||||||
font.pointSize: 9
|
|
||||||
|
|
||||||
elide: Text.ElideRight
|
|
||||||
horizontalAlignment: Text.AlignHCenter
|
|
||||||
text: root.lockScreenState.info
|
|
||||||
opacity: (root.lockScreenState.info.length === 0 || flickable.openFactor < 1) ? 0 : 1
|
|
||||||
color: 'white'
|
|
||||||
|
|
||||||
Behavior on opacity {
|
|
||||||
NumberAnimation { duration: 200 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// scroll down icon
|
|
||||||
Kirigami.Icon {
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
Layout.bottomMargin: Kirigami.Units.gridUnit
|
|
||||||
implicitWidth: Kirigami.Units.iconSizes.smallMedium
|
|
||||||
implicitHeight: Kirigami.Units.iconSizes.smallMedium
|
|
||||||
Kirigami.Theme.colorSet: Kirigami.Theme.ComplementaryColorGroup
|
|
||||||
source: "arrow-down"
|
|
||||||
opacity: Math.sin((Math.PI / 2) * flickable.openFactor + 1.5 * Math.PI) + 1
|
|
||||||
}
|
|
||||||
|
|
||||||
Keypad {
|
|
||||||
id: keypad
|
|
||||||
Layout.fillWidth: true
|
|
||||||
focus: true
|
|
||||||
|
|
||||||
lockScreenState: root.lockScreenState
|
|
||||||
swipeProgress: flickable.openFactor
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue