New lockscreen design

look-and-feel/contents/lockscreen/Clock.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.8
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.5
+import org.kde.plasma.core 2.0
+
+ColumnLayout {
+    readonly property bool softwareRendering: GraphicsInfo.api === GraphicsInfo.Software
+
+    Label {
+        text: Qt.formatTime(timeSource.data["Local"]["DateTime"])
+        color: ColorScope.textColor
+        style: softwareRendering ? Text.Outline : Text.Normal
+        styleColor: softwareRendering ? ColorScope.backgroundColor : "transparent" //no outline, doesn't matter
+        font.pointSize: 40
+        Layout.alignment: Qt.AlignHCenter
+    }
+    Label {
+        text: Qt.formatDate(timeSource.data["Local"]["DateTime"], Qt.DefaultLocaleLongDate)
+        color: ColorScope.textColor
+        style: softwareRendering ? Text.Outline : Text.Normal
+        styleColor: softwareRendering ? ColorScope.backgroundColor : "transparent" //no outline, doesn't matter
+        font.pointSize: 16
+        Layout.alignment: Qt.AlignHCenter
+    }
+    DataSource {
+        id: timeSource
+        engine: "time"
+        connectedSources: ["Local"]
+        interval: 1000
+    }
+}

look-and-feel/contents/lockscreen/Dialer.qml

@@ -1,54 +0,0 @@
-/*
- *   Copyright 2014 Aaron Seigo <aseigo@kde.org>
- *   Copyright 2014 Marco Martin <mart@kde.org>
- *
- *   This program is free software; you can redistribute it and/or modify
- *   it under the terms of the GNU Library General Public License as
- *   published by the Free Software Foundation; either version 2, or
- *   (at your option) any later version.
- *
- *   This program is distributed in the hope that it will be useful,
- *   but WITHOUT ANY WARRANTY; without even the implied warranty of
- *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *   GNU Library General Public License for more details
- *
- *   You should have received a copy of the GNU Library General Public
- *   License along with this program; if not, write to the
- *   Free Software Foundation, Inc.,
- *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-
-import QtQuick 2.0
-import QtQuick.Layouts 1.1
-import org.kde.plasma.core 2.0 as PlasmaCore
-import "../components"
-
-
-GridLayout {
-    id: pad
-    columns: 3
-
-    Layout.fillWidth: true
-    Layout.fillHeight: true
-
-    function addNumber(number) {
-        passwordInput.text += number;
-    }
-
-    DialerButton { id: one; text: "1" } 
-    DialerButton { text: "2" }
-    DialerButton { text: "3" }
-
-    DialerButton { text: "4" } 
-    DialerButton { text: "5" }
-    DialerButton { text: "6" }
-
-    DialerButton { text: "7" } 
-    DialerButton { text: "8" }
-    DialerButton { text: "9" }
-
-    DialerButton { text: "*"; } 
-    DialerButton { text: "0"; sub: "+"; }
-    DialerButton { text: "#" }
-}
-

look-and-feel/contents/lockscreen/InfoPane.qml

@@ -1,91 +0,0 @@
-/*
- *   Copyright 2014 David Edmundson <davidedmundson@kde.org>
- *   Copyright (C) 2014 by Aleix Pol Gonzalez <aleixpol@blue-systems.com>
- *
- *   This program is free software; you can redistribute it and/or modify
- *   it under the terms of the GNU Library General Public License as
- *   published by the Free Software Foundation; either version 2 or
- *   (at your option) any later version.
- *
- *   This program is distributed in the hope that it will be useful,
- *   but WITHOUT ANY WARRANTY; without even the implied warranty of
- *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *   GNU General Public License for more details
- *
- *   You should have received a copy of the GNU Library General Public
- *   License along with this program; if not, write to the
- *   Free Software Foundation, Inc.,
- *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
- */
-
-import QtQuick 2.2
-import QtQuick.Layouts 1.1
-import org.kde.plasma.components 2.0 as PlasmaComponents
-import org.kde.plasma.core 2.0 as PlasmaCore
-import org.kde.plasma.extras 2.0 as PlasmaExtras
-import org.kde.plasma.workspace.components 2.0 as PW
-
-ColumnLayout {
-   PlasmaComponents.Label { //should be a heading but we want it _loads_ bigger
-        text: Qt.formatTime(timeSource.data["Local"]["DateTime"])
-        //we fill the width then align the text so that we can make the text shrink to fit
-        Layout.fillWidth: true
-        horizontalAlignment: Text.AlignHCenter
-
-        font.weight: Font.DemiBold
-        fontSizeMode: Text.HorizontalFit
-        font.pointSize: 36
-    }
-
-    PlasmaComponents.Label {
-        text: Qt.formatDate(timeSource.data["Local"]["DateTime"], Qt.DefaultLocaleLongDate);
-        Layout.alignment: Qt.AlignHCenter
-    }
-
-    RowLayout {
-        Layout.alignment: Qt.AlignHCenter
-        visible: pmSource.data["Battery"]["Has Cumulative"]
-
-        PW.BatteryIcon {
-            id: battery
-            hasBattery: true
-            percent: pmSource.data["Battery"]["Percent"]
-            pluggedIn: pmSource.data["AC Adapter"] ? pmSource.data["AC Adapter"]["Plugged in"] : false
-
-            height: batteryLabel.height
-            width: batteryLabel.height
-        }
-
-        PlasmaComponents.Label {
-            id: batteryLabel
-            text: {
-                var state = pmSource.data["Battery"] ? pmSource.data["Battery"]["State"] : "";
-                switch(state) {
-                case "Charging":
-                    return i18nd("plasma_lookandfeel_org.kde.lookandfeel","%1%. Charging", battery.percent)
-                case "FullyCharged":
-                    return i18nd("plasma_lookandfeel_org.kde.lookandfeel","Fully charged")
-                default:
-                    return i18nd("plasma_lookandfeel_org.kde.lookandfeel","%1% battery remaining", battery.percent)
-                }
-            }
-            Layout.alignment: Qt.AlignHCenter
-            wrapMode: Text.Wrap
-        }
-    }
-
-    
-    PlasmaCore.DataSource {
-        id: pmSource
-        engine: "powermanagement"
-        connectedSources: ["Battery", "AC Adapter"]
-    }
-
-    PlasmaCore.DataSource {
-        id: timeSource
-        engine: "time"
-        connectedSources: ["Local"]
-        interval: 1000
-    }
-
-}

look-and-feel/contents/lockscreen/LockScreen.qml

@@ -1,7 +1,5 @@
-/********************************************************************
+/*
- This file is part of the KDE project.
+Copyright (C) 2019 Nicolas Fella <nicolas.fella@gmx.de>
-
-Copyright (C) 2014 Aleix Pol Gonzalez <aleixpol@blue-systems.com>
 
 This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
@@ -15,111 +13,156 @@ GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*********************************************************************/
+*/
 
-import QtQuick 2.0
+import QtQuick 2.13
 import QtQuick.Controls 1.1
 import QtQuick.Layouts 1.1
+import QtGraphicalEffects 1.12
 import org.kde.plasma.components 2.0 as PlasmaComponents
 import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.workspace.keyboardlayout 1.0
 import "../components"
 
 PlasmaCore.ColorScope {
-    id: block
+    id: root
+
+    property string password
+
     colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
     anchors.fill: parent
 
-    Rectangle {
+    FastBlur {
-        anchors.top: parent.top
+        id: blur
-        anchors.left: parent.left
+        anchors.fill: parent
-        anchors.right: parent.right
+        source: wallpaper
+        radius: 32
+        visible: false
+    }
+
+    MultiPointTouchArea {
+        anchors.fill: parent
+
+        onGestureStarted: {
+            numBlock.visible = true
+            blur.visible = true
+        }
+    }
+
+    DropShadow {
+        id: clockShadow
+        anchors.fill: clock
+        source: clock
+        horizontalOffset: 1
+        verticalOffset: 1
+        radius: 6
+        samples: 14
+        spread: 0.3
         color: PlasmaCore.ColorScope.backgroundColor
-        opacity: 0.8
+        Behavior on opacity {
-        height: infoPane.height + units.largeSpacing * 2
+            OpacityAnimator {
+                duration: 1000
+                easing.type: Easing.InOutQuad
+            }
+        }
     }
 
-    InfoPane {
+    Clock {
-        id: infoPane
+        id: clock
+
+        property Item shadow: clockShadow
+
+        anchors.leftMargin: units.gridUnit
+        anchors.rightMargin: units.gridUnit
+        anchors.topMargin: units.gridUnit * 3
         anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.topMargin: units.largeSpacing
     }
 
-    Rectangle {
+    Row {
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: numBlock.top
+        anchors.bottomMargin: units.gridUnit * 2
+        spacing: 6
+
+        Repeater {
+            model: root.password.length
+            delegate: Rectangle {
+                width: units.gridUnit * 2
+                height: width
+                radius: width
+                color: Qt.rgba(PlasmaCore.ColorScope.backgroundColor.r, PlasmaCore.ColorScope.backgroundColor.g, PlasmaCore.ColorScope.backgroundColor.b, 0.6)
+            }
+        }
+    }
+
+    GridLayout {
+        id: numBlock
+        visible: false
+        property string thePw
+
+        height: units.gridUnit * 16
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.right: parent.right
-        color: PlasmaCore.ColorScope.backgroundColor
+        anchors.bottomMargin: units.gridUnit
-        opacity: 0.8
+        anchors.leftMargin: units.gridUnit * 2
-        height: mainLayout.height + units.largeSpacing * 2
+        anchors.rightMargin: units.gridUnit *2
-    }
+        rowSpacing: units.gridUnit
 
-    ColumnLayout {
+        columns: 3
-        id: mainLayout
-        anchors {
-            left: parent.left
-            right: parent.right
-            bottom: parent.bottom
-            bottomMargin: units.largeSpacing
-        }
-        spacing: units.largeSpacing
-        RowLayout {
-            Layout.alignment: Qt.AlignHCenter
 
-            PlasmaComponents.TextField {
+        Repeater {
-                id: passwordInput
+            model: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "R", "0", "E"]
-                placeholderText: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Password")
+            delegate: Item {
-                echoMode: TextInput.Password
-                enabled: !authenticator.graceLocked
-                onAccepted: actionButton.clicked(null)
-                focus: false
-
-                onVisibleChanged: {
-                    if (visible) {
-                        forceActiveFocus();
-                    }
-                    text = "";
-                }
-                onTextChanged: {
-                    if (text == "") {
-                        clearTimer.stop();
-                    } else {
-                        clearTimer.restart();
-                    }
-                }
-
-                Timer {
-                    id: clearTimer
-                    interval: 30000
-                    repeat: false
-                    onTriggered: {
-                        passwordInput.text = "";
-                    }
-                }
-            }
-
-            DialerIconButton {
-                source: "edit-clear"
-                callback: function() {
-                    if (passwordInput.text.length > 0) {
-                        passwordInput.text = passwordInput.text.substr(0, passwordInput.text.length - 1);
-                    }
-                }
-            }
-        }
-        Dialer {
-            id: dialer
                 Layout.fillWidth: true
-        }
+                Layout.fillHeight: true
-        PlasmaComponents.Button {
+
-            id: actionButton
+                Rectangle {
-            Layout.alignment: Qt.AlignHCenter
+                    anchors.centerIn: parent
-            Layout.minimumWidth: passwordInput.width
+                    width: units.gridUnit * 3
-            text: i18n("Unlock")
+                    height: width
-            enabled: !authenticator.graceLocked
+                    radius: 12
-            onClicked: authenticator.tryUnlock(passwordInput.text);
+                    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"
+                }
+            }
         }
     }
 }