Add unlock animation

4 years ago · d85ff147e1
parent 4d4938e971
commit d85ff147e1
8 changed files with 196 additions and 35 deletions
--- a/screenlocker/application.cpp
+++ b/screenlocker/application.cpp
@ -66,7 +66,7 @@ Application::Application(int &argc, char **argv)
    , m_authenticator(new Authenticator(AuthenticationMode::Direct, this))
 {
    // It's a queued connection to give the QML part time to eventually execute code connected to Authenticator::succeeded if any
-    connect(m_authenticator, &Authenticator::succeeded, this, &QCoreApplication::quit, Qt::QueuedConnection);
+    connect(m_authenticator, &Authenticator::succeeded, this, &Application::onSucceeded, Qt::QueuedConnection);

    installEventFilter(this);

@ -176,6 +176,39 @@ void Application::onScreenAdded(QScreen *screen)
    desktopResized();
 }

+void Application::onSucceeded()
+{
+    QQuickView *mainView = nullptr;
+
+    // 寻找主屏幕的 view
+    for (int i = 0; i < m_views.size(); ++i) {
+        if (m_views.at(i)->screen() == QGuiApplication::primaryScreen()) {
+            mainView = m_views.at(i);
+            break;
+        }
+    }
+
+    if (mainView) {
+        QVariantAnimation *ani = new QVariantAnimation;
+
+        connect(ani, &QVariantAnimation::valueChanged, [mainView] (const QVariant &value) {
+            mainView->setY(value.toInt());
+        });
+
+        connect(ani, &QVariantAnimation::finished, this, [=] {
+            QCoreApplication::exit();
+        });
+
+        ani->setDuration(500);
+        ani->setEasingCurve(QEasingCurve::OutSine);
+        ani->setStartValue(mainView->geometry().y());
+        ani->setEndValue(mainView->geometry().y() + -mainView->geometry().height());
+        ani->start();
+    } else {
+        QCoreApplication::exit();
+    }
+}
+
 void Application::getFocus()
 {
    QWindow *activeScreen = getActiveScreen();
--- a/screenlocker/application.h
+++ b/screenlocker/application.h
@ -22,6 +22,8 @@

 #include <QGuiApplication>
 #include <QQuickView>
+
+#include <QVariantAnimation>
 #include "authenticator.h"

 class Application : public QGuiApplication
@ -39,6 +41,7 @@ public slots:
    void onScreenAdded(QScreen *screen);

 private slots:
+    void onSucceeded();
    void getFocus();
    void markViewsAsVisible(QQuickView *view);

--- a/screenlocker/images/login.svg
+++ b/screenlocker/images/login.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <path d="m2 9.7143v-3.4286h6.8571v-3.4286l5.1429 5.1429-5.1429 5.1429v-3.4286z" fill="#fff" fill-rule="evenodd" stroke-width="1.7143" paint-order="stroke fill markers"/>
+</svg>
--- a/screenlocker/images/screensaver-unlock-symbolic.svg
+++ b/screenlocker/images/screensaver-unlock-symbolic.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <path class="ColorScheme-Text" d="m12 0c-2.216 0-4 1.784-4 4v2h1v-2c0-1.662 1.338-3 3-3s3 1.338 3 3v2h1v-2c0-2.216-1.784-4-4-4z" fill="#fff"/>
+ <path class="ColorScheme-Text" d="m2 6c-1.108 0-2 0.892-2 2v5c0 1.108 0.892 2 2 2h8c1.108 0 2-0.892 2-2v-5c0-1.108-0.892-2-2-2zm0 1h8c0.554 0 1 0.446 1 1v5c0 0.554-0.446 1-1 1h-8c-0.554 0-1-0.446-1-1v-5c0-0.554 0.446-1 1-1z" fill="#fff"/>
+</svg>
--- a/screenlocker/images/system-lock-screen-symbolic.svg
+++ b/screenlocker/images/system-lock-screen-symbolic.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <path d="m8 0c-2.216 0-4 1.784-4 4v2h1v-2c0-1.662 1.338-3 3-3s3 1.338 3 3v2h1v-2c0-2.216-1.784-4-4-4z" fill="#fff"/>
+ <path d="m4 6c-1.108 0-2 0.892-2 2v5c0 1.108 0.892 2 2 2h8c1.108 0 2-0.892 2-2v-5c0-1.108-0.892-2-2-2zm0 1h8c0.554 0 1 0.446 1 1v5c0 0.554-0.446 1-1 1h-8c-0.554 0-1-0.446-1-1v-5c0-0.554 0.446-1 1-1z" fill="#fff"/>
+</svg>
--- a/screenlocker/qml.qrc
+++ b/screenlocker/qml.qrc
@ -1,5 +1,9 @@
 <RCC>
    <qresource prefix="/">
        <file>qml/LockScreen.qml</file>
+        <file>images/login.svg</file>
+        <file>qml/LoginButton.qml</file>
+        <file>images/screensaver-unlock-symbolic.svg</file>
+        <file>images/system-lock-screen-symbolic.svg</file>
    </qresource>
 </RCC>
--- a/screenlocker/qml/LockScreen.qml
+++ b/screenlocker/qml/LockScreen.qml
@ -100,8 +100,21 @@ Item {
        anchors.bottom: _mainItem.top
        anchors.bottomMargin: root.height * 0.1

+//        Image {
+//            id: icon
+//            anchors.horizontalCenter: parent.horizontalCenter
+//            anchors.verticalCenter: parent.verticalCenter
+//            Layout.alignment: Qt.AlignHCenter
+//            width: 32
+//            height: 32
+//            sourceSize: Qt.size(width, height)
+//            source: "qrc:/images/system-lock-screen-symbolic.svg"
+//        }
+
        Label {
            id: timeLabel
+//            anchors.top: icon.bottom
+//            anchors.topMargin: FishUI.Units.largeSpacing
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            Layout.alignment: Qt.AlignHCenter
@ -213,11 +226,11 @@ Item {
            TextField {
                id: password
                Layout.alignment: Qt.AlignHCenter
-                Layout.preferredHeight: 40
-                Layout.preferredWidth: 260
+                Layout.preferredHeight: 36
+                Layout.fillWidth: true
                placeholderText: qsTr("Password")
                leftPadding: FishUI.Units.largeSpacing
-                rightPadding: FishUI.Units.largeSpacing
+                rightPadding: 36 + FishUI.Units.largeSpacing //FishUI.Units.largeSpacing
                enabled: !authenticator.graceLocked
                focus: true

@ -225,49 +238,45 @@ Item {

                background: Rectangle {
                    color: FishUI.Theme.darkMode ? "#B6B6B6" : "white"
-                    radius: FishUI.Theme.bigRadius
+                    // radius: FishUI.Theme.bigRadius
                    opacity: 0.5
                }

                Keys.onEnterPressed: root.tryUnlock()
                Keys.onReturnPressed: root.tryUnlock()
                Keys.onEscapePressed: password.text = ""
-            }

-            Button {
-                id: unlockBtn
-                hoverEnabled: true
-                focusPolicy: Qt.NoFocus
+                LoginButton {
+                    anchors.right: password.right
+                    anchors.top: password.top
+                    anchors.bottom: password.bottom
+                    source: "qrc:/images/screensaver-unlock-symbolic.svg"
+                    iconMargins: 10
                    Layout.alignment: Qt.AlignHCenter
-                Layout.preferredHeight: 40
-                Layout.preferredWidth: 260
-                text: qsTr("Unlock")
-                onClicked: root.tryUnlock()
                    enabled: !authenticator.graceLocked
+                    onClicked: root.tryUnlock()
+                    size: 36
+                    Layout.preferredHeight: 36
+                    Layout.preferredWidth: 36
+                }

-                scale: unlockBtn.pressed ? 0.95 : 1.0
+                layer.enabled: true
+                layer.effect: OpacityMask {
+                    maskSource: Item {
+                        width: password.width
+                        height: password.height

-                Behavior on scale {
-                    NumberAnimation {
-                        duration: 100
+                        Rectangle {
+                            anchors.fill: parent
+                            radius: FishUI.Theme.mediumRadius
                        }
                    }
-
-//                contentItem: Text {
-//                    text: unlockBtn.text
-//                    font: unlockBtn.font
-//                    horizontalAlignment: Text.AlignHCenter
-//                    verticalAlignment: Text.AlignVCenter
-//                    elide: Text.ElideRight
-//                    color: "#1C1C1C"
-//                }
-
-                background: Rectangle {
-                    color: FishUI.Theme.darkMode ? "#B6B6B6" : "white"
-                    opacity: unlockBtn.pressed ? 0.3 : unlockBtn.hovered ? 0.4 : 0.5
-                    radius: FishUI.Theme.bigRadius
                }
            }
+
+            Item {
+                height: 1
+            }
        }
    }

@ -299,7 +308,7 @@ Item {
        samples: radius * 4
        spread: 0.35
        color: Qt.rgba(0, 0, 0, 0.8)
-        opacity: 0.1
+        opacity: 0.3
        visible: true
    }

--- a/screenlocker/qml/LoginButton.qml
+++ b/screenlocker/qml/LoginButton.qml
@ -0,0 +1,71 @@
+/*
+ * Copyright (C) 2021 CutefishOS Team.
+ *
+ * Author:     Reion Wong <reion@cutefishos.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
+ * the Free Software Foundation, either version 3 of the License, or
+ * 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 General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.12
+import QtQuick.Window 2.3
+import QtQuick.Controls 2.4
+import FishUI 1.0 as FishUI
+
+Item {
+    id: control
+
+    property var size: 32
+    property var iconMargins: 0
+    height: size
+    width: size
+
+    property alias background: _background
+    property color backgroundColor: FishUI.Theme.highlightColor
+    property color hoveredColor: Qt.lighter(backgroundColor, 1.1)
+    property color pressedColor: Qt.darker(backgroundColor, 1.2)
+    property alias source: _image.source
+    property alias image: _image
+    signal clicked()
+
+    Rectangle {
+        id: _background
+        anchors.fill: parent
+        // radius: FishUI.Theme.bigRadius //control.height / 2
+        color: mouseArea.pressed ? pressedColor : mouseArea.containsMouse ? control.hoveredColor : control.backgroundColor
+
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: Qt.lighter(_background.color, 1.3) }
+            GradientStop { position: 1.0; color: _background.color }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onClicked: control.clicked()
+    }
+
+    Image {
+        id: _image
+        objectName: "image"
+        anchors.fill: parent
+        anchors.margins: control.iconMargins
+        fillMode: Image.PreserveAspectFit
+        sourceSize: Qt.size(width, height)
+        cache: true
+        asynchronous: false
+    }
+}