Sync the quick nano browser example

The example has gained more features since it was spawned from C++.

Task-number: PYSIDE-841
Change-Id: I8f02703f3037502c9159d695824b77e09eab5b01
Reviewed-by: Cristian Maureira-Fredes <cristian.maureira-fredes@qt.io>

1 files changed, 62 insertions, 0 deletions

diff --git a/examples/webenginequick/nanobrowser/FullScreenNotification.qml b/examples/webenginequick/nanobrowser/FullScreenNotification.qml
new file mode 100644
index 000000000..779406432
--- /dev/null
+++ b/examples/webenginequick/nanobrowser/FullScreenNotification.qml
@@ -0,0 +1,62 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+import QtQuick
+
+Rectangle {
+    id: fullScreenNotification
+    width: 500
+    height: 40
+    color: "white"
+    radius: 7
+
+    visible: false
+    opacity: 0
+
+    function show() {
+        visible = true;
+        opacity = 1;
+        reset.start();
+    }
+
+    function hide() {
+        reset.stop();
+        opacity = 0;
+    }
+
+    Behavior on opacity {
+        NumberAnimation {
+            duration: 750
+            onStopped: {
+                if (opacity == 0)
+                    visible = false;
+            }
+        }
+    }
+
+    Timer {
+        id: reset
+        interval: 5000
+        onTriggered: hide()
+    }
+
+    anchors.horizontalCenter: parent.horizontalCenter
+    y: 125
+
+    Text {
+        id: message
+        width: parent.width
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        wrapMode: Text.WordWrap
+        elide: Text.ElideNone
+        clip: true
+
+        text: qsTr("You are now in fullscreen mode. Press ESC to quit!")
+    }
+}