[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>
This commit is contained in:
Samuel Degueldre
committed by
qsm-odoo
qsm-odoo
parent
d6893ae727
commit
0b0690a393
@@ -30,7 +30,17 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
|
||||
'keyup': '_onKeyUp',
|
||||
},
|
||||
|
||||
init: function () {
|
||||
/**
|
||||
* @constructor
|
||||
* @param {object} [options]
|
||||
* @param {boolean} [options.autoAccessKeys=true]
|
||||
* Whether accesskeys should be created automatically for buttons
|
||||
* without them in the page.
|
||||
*/
|
||||
init: function (options) {
|
||||
this.options = Object.assign({
|
||||
autoAccessKeys: true,
|
||||
}, options);
|
||||
this._areAccessKeyVisible = false;
|
||||
this.BrowserDetection = new BrowserDetection();
|
||||
},
|
||||
@@ -130,22 +140,24 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
|
||||
|
||||
var usedAccessKey = this._getAllUsedAccessKeys();
|
||||
|
||||
var buttonsWithoutAccessKey = this.$el.find('button.btn:visible')
|
||||
.not('[accesskey]')
|
||||
.not('[disabled]')
|
||||
.not('[tabindex="-1"]');
|
||||
_.each(buttonsWithoutAccessKey, function (elem) {
|
||||
var buttonString = [elem.innerText, elem.title, "ABCDEFGHIJKLMNOPQRSTUVWXYZ"].join('');
|
||||
for (var letterIndex = 0; letterIndex < buttonString.length; letterIndex++) {
|
||||
var candidateAccessKey = buttonString[letterIndex].toUpperCase();
|
||||
if (candidateAccessKey >= 'A' && candidateAccessKey <= 'Z' &&
|
||||
!_.includes(usedAccessKey, candidateAccessKey)) {
|
||||
elem.accessKey = candidateAccessKey;
|
||||
usedAccessKey.push(candidateAccessKey);
|
||||
break;
|
||||
if (this.options.autoAccessKeys) {
|
||||
var buttonsWithoutAccessKey = this.$el.find('button.btn:visible')
|
||||
.not('[accesskey]')
|
||||
.not('[disabled]')
|
||||
.not('[tabindex="-1"]');
|
||||
_.each(buttonsWithoutAccessKey, function (elem) {
|
||||
var buttonString = [elem.innerText, elem.title, "ABCDEFGHIJKLMNOPQRSTUVWXYZ"].join('');
|
||||
for (var letterIndex = 0; letterIndex < buttonString.length; letterIndex++) {
|
||||
var candidateAccessKey = buttonString[letterIndex].toUpperCase();
|
||||
if (candidateAccessKey >= 'A' && candidateAccessKey <= 'Z' &&
|
||||
!_.includes(usedAccessKey, candidateAccessKey)) {
|
||||
elem.accessKey = candidateAccessKey;
|
||||
usedAccessKey.push(candidateAccessKey);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var elementsWithoutAriaKeyshortcut = this.$el.find('[accesskey]').not('[aria-keyshortcuts]');
|
||||
_.each(elementsWithoutAriaKeyshortcut, function (elem) {
|
||||
@@ -230,4 +242,3 @@ odoo.define('web.KeyboardNavigationMixin', function (require) {
|
||||
return KeyboardNavigationMixin;
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -143,3 +143,21 @@ span.o_force_ltr {
|
||||
.o_width_128 {
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
.o_web_accesskey_overlay {
|
||||
@include o-position-absolute(0, 0);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
color: #FFFFFF;
|
||||
font-size: 1rem;
|
||||
|
||||
// Needed as the parent button could be using font-awesome.
|
||||
// Can't be put to a BS variable here as we are in assets common (will be
|
||||
// overridden for backend but left with 'sans-serif' for frontend to not
|
||||
// have an useless frontend rule.
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
@@ -84,16 +84,6 @@ div.o_boolean_toggle.custom-control.custom-checkbox {
|
||||
|
||||
.o_web_accesskey_overlay {
|
||||
font-family: $font-family-sans-serif;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0,0,0,.6);
|
||||
color: #FFFFFF;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Decorations
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<odoo>
|
||||
<template id="snippets">
|
||||
<div id="snippets_menu">
|
||||
<button type="button" class="o_we_add_snippet_btn active">
|
||||
<button type="button" class="o_we_add_snippet_btn active" accesskey="1">
|
||||
Blocks
|
||||
</button>
|
||||
<t t-set="customize_title">Click in the page to customize</t>
|
||||
|
||||
@@ -3,6 +3,8 @@ odoo.define('website.root', function (require) {
|
||||
|
||||
var core = 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");
|
||||
|
||||
@@ -10,8 +12,8 @@ var _t = core._t;
|
||||
|
||||
var websiteRootRegistry = publicRootData.publicRootRegistry;
|
||||
|
||||
var WebsiteRoot = publicRootData.PublicRoot.extend({
|
||||
events: _.extend({}, publicRootData.PublicRoot.prototype.events || {}, {
|
||||
var WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
|
||||
events: _.extend({}, KeyboardNavigationMixin.events, publicRootData.PublicRoot.prototype.events || {}, {
|
||||
'click .js_change_lang': '_onLangChangeClick',
|
||||
'click .js_publish_management .js_publish_btn': '_onPublishBtnClick',
|
||||
'click .js_multi_website_switch': '_onWebsiteSwitch',
|
||||
@@ -22,6 +24,16 @@ var WebsiteRoot = publicRootData.PublicRoot.extend({
|
||||
seo_object_request: '_onSeoObjectRequest',
|
||||
}),
|
||||
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
init() {
|
||||
this.isFullscreen = false;
|
||||
KeyboardNavigationMixin.init.call(this, {
|
||||
autoAccessKeys: false,
|
||||
});
|
||||
return this._super(...arguments);
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
@@ -82,6 +94,38 @@ var WebsiteRoot = publicRootData.PublicRoot.extend({
|
||||
}
|
||||
return registry;
|
||||
},
|
||||
/**
|
||||
* Toggles the fullscreen mode.
|
||||
*
|
||||
* @private
|
||||
* @param {boolean} state toggle fullscreen on/off (true/false)
|
||||
*/
|
||||
_toggleFullscreen(state) {
|
||||
this.isFullscreen = state;
|
||||
document.body.classList.toggle('o_fullscreen', this.isFullscreen);
|
||||
document.body.style.overflowX = 'hidden';
|
||||
let resizing = true;
|
||||
window.requestAnimationFrame(function resizeFunction() {
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
if (resizing) {
|
||||
window.requestAnimationFrame(resizeFunction);
|
||||
}
|
||||
});
|
||||
let stopResizing;
|
||||
const onTransitionEnd = ev => {
|
||||
if (ev.target === document.body && ev.propertyName === 'padding-top') {
|
||||
stopResizing();
|
||||
}
|
||||
};
|
||||
stopResizing = () => {
|
||||
resizing = false;
|
||||
document.body.style.overflowX = '';
|
||||
document.body.removeEventListener('transitionend', onTransitionEnd);
|
||||
};
|
||||
document.body.addEventListener('transitionend', onTransitionEnd);
|
||||
// Safeguard in case the transitionend event doesn't trigger for whatever reason.
|
||||
window.setTimeout(() => stopResizing(), 500);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Handlers
|
||||
@@ -147,6 +191,9 @@ var WebsiteRoot = publicRootData.PublicRoot.extend({
|
||||
*/
|
||||
_onPublishBtnClick: function (ev) {
|
||||
ev.preventDefault();
|
||||
if (document.body.classList.contains('editor_enable')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var self = this;
|
||||
var $data = $(ev.currentTarget).parents(".js_publish_management:first");
|
||||
@@ -207,6 +254,20 @@ var WebsiteRoot = publicRootData.PublicRoot.extend({
|
||||
_onModalShown: function (ev) {
|
||||
$(ev.target).addClass('modal_shown');
|
||||
},
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_onKeyDown(ev) {
|
||||
if (!session.user_id) {
|
||||
return;
|
||||
}
|
||||
// If document.body doesn't contain the element, it was probably removed as a consequence of pressing Esc.
|
||||
// we don't want to toggle fullscreen as the removal (eg, closing a modal) is the intended action.
|
||||
if (ev.keyCode !== $.ui.keyCode.ESCAPE || !document.body.contains(ev.target) || ev.target.closest('.modal')) {
|
||||
return KeyboardNavigationMixin._onKeyDown.apply(this, arguments);
|
||||
}
|
||||
this._toggleFullscreen(!this.isFullscreen);
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
|
||||
@@ -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();
|
||||
},
|
||||
|
||||
@@ -132,6 +132,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
|
||||
* @private
|
||||
*/
|
||||
_hideMenu: function () {
|
||||
this.shown = false;
|
||||
this.$newContentMenuChoices.addClass('o_hidden');
|
||||
$('body').removeClass('o_new_content_open');
|
||||
},
|
||||
@@ -168,6 +169,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
|
||||
});
|
||||
}).then(function () {
|
||||
self.firstTab = true;
|
||||
self.shown = true;
|
||||
self.$newContentMenuChoices.removeClass('o_hidden');
|
||||
$('body').addClass('o_new_content_open');
|
||||
self.$('> a').focus();
|
||||
@@ -203,9 +205,13 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
|
||||
* @param {Event} ev
|
||||
*/
|
||||
_onBackgroundKeydown: function (ev) {
|
||||
if (!this.shown) {
|
||||
return;
|
||||
}
|
||||
switch (ev.which) {
|
||||
case $.ui.keyCode.ESCAPE:
|
||||
this._hideMenu();
|
||||
ev.stopPropagation();
|
||||
break;
|
||||
case $.ui.keyCode.TAB:
|
||||
if (ev.shiftKey) {
|
||||
|
||||
@@ -8,9 +8,29 @@ body {
|
||||
// Set frontend direction that will be flipped with
|
||||
// rtlcss for right-to-left text direction.
|
||||
direction: ltr;
|
||||
transition: padding 0.35s;
|
||||
}
|
||||
body.o_connected_user {
|
||||
padding-top: $o-navbar-height!important;
|
||||
|
||||
&.o_fullscreen {
|
||||
padding-top: 0 !important;
|
||||
|
||||
&.editor_enable.editor_has_snippets {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
#oe_main_menu_navbar, #web_editor-top-edit {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
#oe_snippets {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
#oe_main_menu_navbar, #web_editor-top-edit, #oe_snippets {
|
||||
transition: transform 0.35s !important;
|
||||
}
|
||||
|
||||
// MAIN MENU STYLE (added above navbar.scss)
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
<t t-name="website.editorbar">
|
||||
<div id="web_editor-top-edit">
|
||||
<form class="navbar-form text-muted">
|
||||
<button type="button" class="btn btn-secondary" data-action="cancel"><i class="fa fa-times"/> Discard</button>
|
||||
<button type="button" class="btn btn-primary" data-action="save"><i class="fa fa-floppy-o"/> Save</button>
|
||||
<button type="button" class="btn btn-secondary" data-action="cancel" accesskey="j"><i class="fa fa-times"/> Discard</button>
|
||||
<button type="button" class="btn btn-primary" data-action="save" accesskey="s"><i class="fa fa-floppy-o"/> Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
@@ -77,6 +77,9 @@
|
||||
<script type="text/javascript" src="/website/static/lib/jstz.min.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/js/utils.js"/>
|
||||
|
||||
<script type="text/javascript" src="/web/static/src/js/core/browser_detection.js"/>
|
||||
<script type="text/javascript" src="/web/static/src/js/chrome/keyboard_navigation_mixin.js"/>
|
||||
|
||||
<script type="text/javascript" src="/website/static/src/js/content/website_root.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/js/content/compatibility.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/js/content/lazy_template_call.js"/>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<xpath expr="//div[@id='snippets_menu']" position="inside">
|
||||
<button type="button" class="o_we_customize_theme_btn"
|
||||
data-title="Customize your theme"
|
||||
groups="website.group_website_designer">
|
||||
groups="website.group_website_designer" accesskey="2">
|
||||
Options
|
||||
</button>
|
||||
</xpath>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<template id="website_publisher" name="Website Publisher">
|
||||
<t groups="website.group_website_publisher" t-if="'website_published' in main_object.fields_get() and ('can_publish' not in main_object.fields_get() or main_object.can_publish)">
|
||||
<li t-attf-class="js_publish_management #{extra_classes} #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-description="env['ir.model']._get(main_object._name).display_name" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
|
||||
<label class="o_switch o_switch_danger js_publish_btn" for="id">
|
||||
<input type="checkbox" t-att-checked="main_object.website_published" id="id"/>
|
||||
<label class="o_switch o_switch_danger js_publish_btn" t-att-accesskey="desktop_navbar and 'p'">
|
||||
<input type="checkbox" t-att-checked="main_object.website_published"/>
|
||||
<span/>
|
||||
<span class="css_publish">Unpublished</span>
|
||||
<span class="css_unpublish">Published</span>
|
||||
@@ -68,13 +68,14 @@
|
||||
<ul class="o_menu_systray d-none d-md-block" groups="website.group_website_publisher">
|
||||
<t t-call="website.website_publisher">
|
||||
<t t-set="extra_classes" t-value=""/>
|
||||
<t t-set="desktop_navbar" t-value="true"/>
|
||||
</t>
|
||||
<!-- Mobile preview -->
|
||||
<li class="o_mobile_preview" id="mobile-menu">
|
||||
<a data-action="show-mobile-preview" href="#"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-mobile"/></a>
|
||||
<a data-action="show-mobile-preview" href="#" accesskey="v"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-mobile"/></a>
|
||||
</li>
|
||||
<li groups="website.group_multi_website" t-if="multi_website_websites" id="website_switcher">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#" accesskey="w">
|
||||
<i class="fa fa-globe d-lg-none"/>
|
||||
<span class="d-none d-lg-inline-block">
|
||||
<t t-esc="multi_website_websites_current['name']"/>
|
||||
@@ -98,7 +99,7 @@
|
||||
|
||||
<!-- Page Edition -->
|
||||
<li class="o_new_content_menu" id="new-content-menu">
|
||||
<a href="#"><span class="fa fa-plus mr-2"/>New</a>
|
||||
<a href="#" accesskey="c"><span class="fa fa-plus mr-2"/>New</a>
|
||||
<div id="o_new_content_menu_choices" class="o_hidden">
|
||||
<div class="container pt32 pb32">
|
||||
<div class="row">
|
||||
@@ -161,7 +162,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li t-if="not translatable" id="edit-page-menu">
|
||||
<a data-action="edit" href="#"><span class="fa fa-pencil mr-2"/>Edit</a>
|
||||
<a data-action="edit" href="#" accesskey="a"><span class="fa fa-pencil mr-2"/>Edit</a>
|
||||
</li>
|
||||
<li t-if="edit_in_backend or ('website_published' in main_object.fields_get() and main_object._name != 'website.page')">
|
||||
<a role="button" class="btn btn-primary btn-sm dropdown-toggle css_edit_dynamic" data-toggle="dropdown">
|
||||
|
||||
Reference in New Issue
Block a user