mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-08-03 10:14:45 +00:00
Add scrolling lockscreen, and a darken effect when keypad is shown
This commit is contained in:
parent
e0dd510861
commit
30847f710e
1 changed files with 116 additions and 85 deletions
|
|
@ -31,22 +31,19 @@ PlasmaCore.ColorScope {
|
||||||
|
|
||||||
colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
|
colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|
||||||
FastBlur {
|
BrightnessContrast {
|
||||||
id: blur
|
id: darken
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
source: wallpaper
|
source: wallpaper
|
||||||
radius: 32
|
brightness: -(passwordFlickable.contentY / passwordFlickable.columnHeight * 0.6)
|
||||||
visible: false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
MultiPointTouchArea {
|
FastBlur {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
cached: true
|
||||||
onGestureStarted: {
|
source: darken
|
||||||
numBlock.visible = true
|
radius: passwordFlickable.contentY / passwordFlickable.columnHeight * 32
|
||||||
blur.visible = true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
DropShadow {
|
DropShadow {
|
||||||
|
|
@ -80,87 +77,121 @@ PlasmaCore.ColorScope {
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
}
|
}
|
||||||
|
|
||||||
Row {
|
Flickable {
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
id: passwordFlickable
|
||||||
anchors.bottom: numBlock.top
|
|
||||||
anchors.bottomMargin: units.gridUnit * 2
|
anchors.fill: parent
|
||||||
spacing: 6
|
|
||||||
|
property int columnHeight: units.gridUnit * 20
|
||||||
Repeater {
|
|
||||||
model: root.password.length
|
height: columnHeight + root.height
|
||||||
delegate: Rectangle {
|
contentHeight: columnHeight + root.height
|
||||||
width: units.gridUnit * 2
|
boundsBehavior: Flickable.StopAtBounds
|
||||||
height: width
|
|
||||||
radius: width
|
// always snap to end (either hidden or shown)
|
||||||
color: Qt.rgba(PlasmaCore.ColorScope.backgroundColor.r, PlasmaCore.ColorScope.backgroundColor.g, PlasmaCore.ColorScope.backgroundColor.b, 0.6)
|
onFlickEnded: {
|
||||||
|
if (!atYBeginning && !atYEnd) {
|
||||||
|
if (contentY > columnHeight - contentY) {
|
||||||
|
flick(0, -1000);
|
||||||
|
} else {
|
||||||
|
flick(0, 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// wipe password at beginning
|
||||||
|
if (atYBeginning) {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
ColumnLayout {
|
||||||
|
id: passwordLayout
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
|
||||||
|
width: parent.width
|
||||||
|
spacing: units.gridUnit * 2
|
||||||
|
opacity: Math.sin((Math.PI / 2) * (passwordFlickable.contentY / passwordFlickable.columnHeight) + 1.5 * Math.PI) + 1
|
||||||
|
|
||||||
|
Row {
|
||||||
|
id: dotDisplay
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
spacing: 6
|
||||||
|
|
||||||
GridLayout {
|
Repeater {
|
||||||
id: numBlock
|
model: root.password.length
|
||||||
visible: false
|
delegate: Rectangle {
|
||||||
property string thePw
|
width: units.gridUnit * 2
|
||||||
|
height: width
|
||||||
height: units.gridUnit * 16
|
radius: width
|
||||||
anchors.bottom: parent.bottom
|
color: Qt.rgba(PlasmaCore.ColorScope.backgroundColor.r, PlasmaCore.ColorScope.backgroundColor.g, PlasmaCore.ColorScope.backgroundColor.b, 0.6)
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.bottomMargin: units.gridUnit
|
|
||||||
anchors.leftMargin: units.gridUnit * 2
|
|
||||||
anchors.rightMargin: units.gridUnit *2
|
|
||||||
rowSpacing: units.gridUnit
|
|
||||||
|
|
||||||
columns: 3
|
|
||||||
|
|
||||||
Repeater {
|
|
||||||
model: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "R", "0", "E"]
|
|
||||||
delegate: Item {
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.fillHeight: true
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
width: units.gridUnit * 3
|
|
||||||
height: width
|
|
||||||
radius: 12
|
|
||||||
color: Qt.rgba(PlasmaCore.ColorScope.backgroundColor.r, PlasmaCore.ColorScope.backgroundColor.g, PlasmaCore.ColorScope.backgroundColor.b, ma.pressed ? 0.8 : 0.3)
|
|
||||||
visible: modelData.length > 0
|
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
id: ma
|
|
||||||
anchors.fill: parent
|
|
||||||
onClicked: {
|
|
||||||
if (modelData === "R") {
|
|
||||||
root.password = root.password.substr(0, root.password.length - 1);
|
|
||||||
} else if (modelData === "E") {
|
|
||||||
authenticator.tryUnlock(root.password);
|
|
||||||
} else {
|
|
||||||
root.password += modelData
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
PlasmaComponents.Label {
|
GridLayout {
|
||||||
visible: modelData !== "R" && modelData !== "E"
|
id: numBlock
|
||||||
text: modelData
|
property string thePw
|
||||||
anchors.centerIn: parent
|
|
||||||
font.pointSize: 20
|
|
||||||
}
|
|
||||||
|
|
||||||
PlasmaCore.IconItem {
|
Layout.fillWidth: true
|
||||||
visible: modelData === "R"
|
Layout.minimumHeight: units.gridUnit * 16
|
||||||
anchors.centerIn: parent
|
Layout.maximumWidth: root.width
|
||||||
colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
|
Layout.bottomMargin: units.gridUnit
|
||||||
source: "edit-clear"
|
Layout.leftMargin: units.gridUnit * 2
|
||||||
}
|
Layout.rightMargin: units.gridUnit * 2
|
||||||
|
rowSpacing: units.gridUnit
|
||||||
|
|
||||||
PlasmaCore.IconItem {
|
columns: 3
|
||||||
visible: modelData === "E"
|
|
||||||
anchors.centerIn: parent
|
Repeater {
|
||||||
colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
|
model: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "R", "0", "E"]
|
||||||
source: "go-next"
|
delegate: Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.fillHeight: true
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
width: units.gridUnit * 3
|
||||||
|
height: width
|
||||||
|
radius: 12
|
||||||
|
color: Qt.rgba(PlasmaCore.ColorScope.backgroundColor.r, PlasmaCore.ColorScope.backgroundColor.g, PlasmaCore.ColorScope.backgroundColor.b, ma.pressed ? 0.8 : 0.3)
|
||||||
|
visible: modelData.length > 0
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: ma
|
||||||
|
anchors.fill: parent
|
||||||
|
onClicked: {
|
||||||
|
if (modelData === "R") {
|
||||||
|
root.password = root.password.substr(0, root.password.length - 1);
|
||||||
|
} else if (modelData === "E") {
|
||||||
|
authenticator.tryUnlock(root.password);
|
||||||
|
} else {
|
||||||
|
root.password += modelData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
PlasmaComponents.Label {
|
||||||
|
visible: modelData !== "R" && modelData !== "E"
|
||||||
|
text: modelData
|
||||||
|
anchors.centerIn: parent
|
||||||
|
font.pointSize: 20
|
||||||
|
}
|
||||||
|
|
||||||
|
PlasmaCore.IconItem {
|
||||||
|
visible: modelData === "R"
|
||||||
|
anchors.centerIn: parent
|
||||||
|
colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
|
||||||
|
source: "edit-clear"
|
||||||
|
}
|
||||||
|
|
||||||
|
PlasmaCore.IconItem {
|
||||||
|
visible: modelData === "E"
|
||||||
|
anchors.centerIn: parent
|
||||||
|
colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
|
||||||
|
source: "go-next"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue