From dd215efb50b4b9baedfa9d80d8c017440097c74c Mon Sep 17 00:00:00 2001 From: Nicolas Fella Date: Sat, 1 Feb 2020 14:21:24 +0000 Subject: [PATCH] New lockscreen design --- look-and-feel/contents/lockscreen/Clock.qml | 31 +++ look-and-feel/contents/lockscreen/Dialer.qml | 54 ----- .../contents/lockscreen/InfoPane.qml | 91 -------- .../contents/lockscreen/LockScreen.qml | 201 +++++++++++------- 4 files changed, 153 insertions(+), 224 deletions(-) create mode 100644 look-and-feel/contents/lockscreen/Clock.qml delete mode 100644 look-and-feel/contents/lockscreen/Dialer.qml delete mode 100644 look-and-feel/contents/lockscreen/InfoPane.qml diff --git a/look-and-feel/contents/lockscreen/Clock.qml b/look-and-feel/contents/lockscreen/Clock.qml new file mode 100644 index 00000000..f5c01535 --- /dev/null +++ b/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 + } +} diff --git a/look-and-feel/contents/lockscreen/Dialer.qml b/look-and-feel/contents/lockscreen/Dialer.qml deleted file mode 100644 index 6e0df659..00000000 --- a/look-and-feel/contents/lockscreen/Dialer.qml +++ /dev/null @@ -1,54 +0,0 @@ -/* - * Copyright 2014 Aaron Seigo - * Copyright 2014 Marco Martin - * - * 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: "#" } -} - diff --git a/look-and-feel/contents/lockscreen/InfoPane.qml b/look-and-feel/contents/lockscreen/InfoPane.qml deleted file mode 100644 index 59a53a69..00000000 --- a/look-and-feel/contents/lockscreen/InfoPane.qml +++ /dev/null @@ -1,91 +0,0 @@ -/* - * Copyright 2014 David Edmundson - * Copyright (C) 2014 by Aleix Pol Gonzalez - * - * 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 - } - -} diff --git a/look-and-feel/contents/lockscreen/LockScreen.qml b/look-and-feel/contents/lockscreen/LockScreen.qml index d60ad20a..54e7f08d 100644 --- a/look-and-feel/contents/lockscreen/LockScreen.qml +++ b/look-and-feel/contents/lockscreen/LockScreen.qml @@ -1,7 +1,5 @@ -/******************************************************************** - This file is part of the KDE project. - -Copyright (C) 2014 Aleix Pol Gonzalez +/* +Copyright (C) 2019 Nicolas Fella 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 @@ -10,116 +8,161 @@ the Free Software Foundation; either version 2 of the License, or 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 +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 General Public License along with this program. If not, see . -*********************************************************************/ +*/ -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 { - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right + FastBlur { + id: blur + anchors.fill: parent + 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 - height: infoPane.height + units.largeSpacing * 2 + Behavior on opacity { + OpacityAnimator { + duration: 1000 + easing.type: Easing.InOutQuad + } + } } - InfoPane { - id: infoPane + Clock { + 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 - opacity: 0.8 - height: mainLayout.height + units.largeSpacing * 2 - } + anchors.bottomMargin: units.gridUnit + anchors.leftMargin: units.gridUnit * 2 + anchors.rightMargin: units.gridUnit *2 + rowSpacing: units.gridUnit - ColumnLayout { - id: mainLayout - anchors { - left: parent.left - right: parent.right - bottom: parent.bottom - bottomMargin: units.largeSpacing - } - spacing: units.largeSpacing - RowLayout { - Layout.alignment: Qt.AlignHCenter + columns: 3 - PlasmaComponents.TextField { - id: passwordInput - placeholderText: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Password") - echoMode: TextInput.Password - enabled: !authenticator.graceLocked - onAccepted: actionButton.clicked(null) - focus: false + Repeater { + model: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "R", "0", "E"] + delegate: Item { + Layout.fillWidth: true + Layout.fillHeight: true - onVisibleChanged: { - if (visible) { - forceActiveFocus(); - } - text = ""; - } - onTextChanged: { - if (text == "") { - clearTimer.stop(); - } else { - clearTimer.restart(); + 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 + } + } } } - Timer { - id: clearTimer - interval: 30000 - repeat: false - onTriggered: { - passwordInput.text = ""; - } + 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" } } - - 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 - } - PlasmaComponents.Button { - id: actionButton - Layout.alignment: Qt.AlignHCenter - Layout.minimumWidth: passwordInput.width - text: i18n("Unlock") - enabled: !authenticator.graceLocked - onClicked: authenticator.tryUnlock(passwordInput.text); } } }