[IMP] website: show indication to the user that he can exit full screen

Behaviour before the PR is merged :
There is no indication that the user can exit fullscreen by
pressing on escape.

Desired behaviour after PR is merged :
An indication is shown to the user after he enters fullscreen,
which disappear after a few seconds. A new widget
FullscreenIndication is available.

Part of https://github.com/odoo/odoo/pull/65255

task-2438556

closes odoo/odoo#65255

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/js/content/website_root.js

@@ -3,12 +3,11 @@ odoo.define('website.root', function (require) {
 
 const ajax = require('web.ajax');
 const {_t} = require('web.core');
-var Dialog = require('web.Dialog');
 const KeyboardNavigationMixin = require('web.KeyboardNavigationMixin');
 const session = require('web.session');
 var publicRootData = require('web.public.root');
 require("web.zoomodoo");
-
+const {FullscreenIndication} = require('@website/js/widgets/fullscreen_indication');
 var websiteRootRegistry = publicRootData.publicRootRegistry;
 
 var WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
@@ -35,6 +34,16 @@ var WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
         });
         return this._super(...arguments);
     },
+    /**
+     * @override
+     */
+    willStart: async function () {
+        this.fullscreenIndication = new FullscreenIndication(this);
+        return Promise.all([
+            this._super(...arguments),
+            this.fullscreenIndication.appendTo(document.body),
+        ]);
+    },
     /**
      * @override
      */
@@ -170,6 +179,11 @@ var WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
      */
     _toggleFullscreen(state) {
         this.isFullscreen = state;
+        if (this.isFullscreen) {
+            this.fullscreenIndication.show();
+        } else {
+            this.fullscreenIndication.hide();
+        }
         document.body.classList.add('o_fullscreen_transition');
         document.body.classList.toggle('o_fullscreen', this.isFullscreen);
         document.body.style.overflowX = 'hidden';

addons/website/static/src/js/widgets/fullscreen_indication.js

@@ -0,0 +1,40 @@
+/** @odoo-module **/
+
+import Widget from 'web.Widget';
+
+export const FullscreenIndication = Widget.extend({
+    xmlDependencies: ['/website/static/src/xml/website.xml'],
+    template: 'website.fullscreen_indication', 
+
+    init: function () {
+        this.visible = false;
+        this.displayTime = 2000;
+        this._super(...arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Displays the fullscreen indication modal
+     */
+    show: function () {
+        clearTimeout(this.autofade);
+        this.visible = true;
+        this.el.classList.add('o_transition', 'o_visible');
+        this.autofade = setTimeout(() => {
+            this.hide(true);
+        }, this.displayTime);
+    },
+    /**
+     * Hides the fullscreen indication modal with optionnal transition
+     * 
+     * @param {boolean} [withTransition=false]
+     */
+    hide: function (withTransition = false) {
+        this.el.classList.toggle('o_transition', withTransition);
+        this.el.classList.remove('o_visible');
+        this.visible = false;
+    },
+});

addons/website/static/src/scss/website.ui.scss

@@ -41,6 +41,36 @@ body.o_connected_user {
     }
 }
 
+//FULLSCREEN INDICATION LAYOUT
+.o_fullscreen_indication {
+    display: flex;
+    position: absolute;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    margin-top: $o-navbar-height!important;
+    opacity: 0;
+    p {
+        padding: 15px 30px;
+        background-color: rgba(0, 0, 0, 0.7);
+        color: white;
+        span {
+            border: 1px solid white;
+            border-color: white;
+            border-radius: 5px;
+            padding: 7px 5px;
+            margin: 5px;
+        }
+    }
+    &.o_transition {
+        transition: opacity 400ms;
+    }
+    &.o_visible {
+        opacity: 1;
+    }
+}
+
 // MAIN MENU STYLE (added above navbar.scss)
 #oe_main_menu_navbar {
     @include o-w-preserve-dropdown-menus;

addons/website/static/src/xml/website.xml

@@ -98,4 +98,8 @@
             </a>
         </t>
     </t>
+
+    <div t-name="website.fullscreen_indication" class="o_fullscreen_indication">
+        <p>Press <span>esc</span> to exit full screen</p>
+    </div>
 </templates>

addons/website/views/assets.xml

@@ -82,6 +82,7 @@
         <script type="text/javascript" src="/website/static/src/js/utils.js"/>
 
         <script type="text/javascript" src="/website/static/src/js/content/website_root.js"/>
+        <script type="text/javascript" src="/website/static/src/js/widgets/fullscreen_indication.js"/>
         <script type="text/javascript" src="/website/static/src/js/content/compatibility.js"/>
         <script type="text/javascript" src="/website/static/src/js/content/menu.js"/>
         <script type="text/javascript" src="/website/static/src/js/content/snippets.animation.js"/>