[IMP] website, web: add fullscreen mode and frontend keyboard shortcuts

While the edit mode interface is full of useful things, it also adds a
lot of clutter, and alters the page's width and thus, its layout. This
commit adds keyboard shortcut for website editors to use, and allows
them to enter a "fullscreen" mode that hides the editor interface while
remaining in edit mode, allowing the user to have fewer distractions
while editing text content, and a closer rendition of the page's final
layout while editing.

For this, keyboard shortcuts were required, and a few other useful
shortcuts have been added, such as alt-1,2,3 for the navbar, just like
in the backed.

task-2126915

closes odoo/odoo#46953

Related: odoo/enterprise#9295
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 4 insertions, 1 deletions

diff --git a/addons/website/static/src/js/menu/mobile_view.js b/addons/website/static/src/js/menu/mobile_view.js
index acfd28042c9..668962c8a10 100644
--- a/addons/website/static/src/js/menu/mobile_view.js
+++ b/addons/website/static/src/js/menu/mobile_view.js
@@ -50,7 +50,10 @@ var MobileMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
      * @private
      */
     _onMobilePreviewClick: function () {
-        new MobilePreviewDialog(this, {
+        if (this.mobilePreview && !this.mobilePreview.isDestroyed()) {
+            return this.mobilePreview.close();
+        }
+        this.mobilePreview = new MobilePreviewDialog(this, {
             title: _t('Mobile preview') + ' <span class="fa fa-refresh"/>',
         }).open();
     },