From dfcc9a3ce09fe2f22786ea67e05e336a302a97bb Mon Sep 17 00:00:00 2001 From: Younn Olivier Date: Mon, 1 Feb 2021 14:16:11 +0000 Subject: [PATCH] [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) --- .../static/src/js/content/website_root.js | 18 ++++++++- .../src/js/widgets/fullscreen_indication.js | 40 +++++++++++++++++++ .../website/static/src/scss/website.ui.scss | 30 ++++++++++++++ addons/website/static/src/xml/website.xml | 4 ++ addons/website/views/assets.xml | 1 + 5 files changed, 91 insertions(+), 2 deletions(-) create mode 100644 addons/website/static/src/js/widgets/fullscreen_indication.js diff --git a/addons/website/static/src/js/content/website_root.js b/addons/website/static/src/js/content/website_root.js index 5d52902272c..d6bdb06e8ce 100644 --- a/addons/website/static/src/js/content/website_root.js +++ b/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'; diff --git a/addons/website/static/src/js/widgets/fullscreen_indication.js b/addons/website/static/src/js/widgets/fullscreen_indication.js new file mode 100644 index 00000000000..44ffc379994 --- /dev/null +++ b/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; + }, +}); diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss index 88596884fd0..2cc6b1c6ef9 100644 --- a/addons/website/static/src/scss/website.ui.scss +++ b/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; diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml index 44ef684c2c7..1c747952c54 100644 --- a/addons/website/static/src/xml/website.xml +++ b/addons/website/static/src/xml/website.xml @@ -98,4 +98,8 @@ + +
+

Press esc to exit full screen

+
diff --git a/addons/website/views/assets.xml b/addons/website/views/assets.xml index b0d66b6d909..7f4c5feac72 100644 --- a/addons/website/views/assets.xml +++ b/addons/website/views/assets.xml @@ -82,6 +82,7 @@