From 033b49e1a810c3decd8988698620616bd927f6c3 Mon Sep 17 00:00:00 2001 From: Antoine Guenet Date: Thu, 27 Apr 2023 12:04:39 +0000 Subject: [PATCH] [ADD] web_editor: allow the user to input a font size in the toolbar With this commit, when a user clicks on the font size number in the editor's toolbar, two things happen: 1. Same as before: the list of recommended sizes opens. 2. The current font size is selected, and the user can type any value they want. They need to confirm with "Enter" or blur the input to use a custom value. task-3167041 Part-of: odoo/odoo#119972 --- .../static/src/scss/mass_mailing.ui.scss | 13 +++++ .../js/editor/odoo-editor/src/OdooEditor.js | 55 ++++++++++++++++++- .../web_editor/static/src/scss/wysiwyg.scss | 5 ++ .../static/src/scss/wysiwyg_snippets.scss | 26 +++++++++ addons/web_editor/static/src/xml/editor.xml | 32 ++++++----- 5 files changed, 115 insertions(+), 16 deletions(-) diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss index f91189c74f9..b4800f478a4 100644 --- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss +++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss @@ -361,6 +361,19 @@ body.editor_enable.o_basic_theme.o_in_iframe { top: unset !important; } } + + #font-size > button { + &:focus-within input { + padding: 0 !important; + width: calc(2ch + #{$o-we-sidebar-content-field-clickable-spacing * 2} - #{$o-we-sidebar-content-field-border-width * 2}); + } + + input { + padding: 0; + text-align: center; + width: calc(2ch + #{$o-we-sidebar-content-field-clickable-spacing * 2}); + } + } } } } diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js index 5e90c08f1f8..6d3c94f7a04 100644 --- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js +++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js @@ -702,6 +702,59 @@ export class OdooEditor extends EventTarget { this.updateColorpickerLabels(); }); } + const fontSizeInput = this.toolbar.querySelector('input#fontSizeCurrentValue'); + this.addDomListener(this.toolbar, 'click', ev => { + if (fontSizeInput && ev.target.closest('#font-size .dropdown-toggle')) { + // If the click opened the font size dropdown, select the input content. + fontSizeInput.select(); + } else if (!this.isSelectionInEditable()) { + // Otherwise, if we lost the selection in the editable, restore it. + this.historyResetLatestComputedSelection(true); + } + }) + // Handle the font size input. + if (fontSizeInput) { + const debouncedOnInputChange = (() => { + let handle; + return () => new Promise(resolve => { + clearTimeout(handle); + handle = setTimeout(() => { + handle = null; + setFontSize(fontSizeInput.value); + resolve(); + }, 50); + }); + })(); + const setFontSize = fontSize => { + if (fontSize === 'default' || parseInt(fontSize) > 0) { + if (!this.isSelectionInEditable()) { + this.historyResetLatestComputedSelection(true); + } + this.execCommand('setFontSize', fontSize === 'default' ? undefined : parseInt(fontSize) + 'px'); + fontSizeInput.closest('#font-size').querySelectorAll('.show').forEach(el => { + el.classList.remove('show'); // Close the dropdown. + // Remove Popper's styles to ensure proper positioning + // of the dropdown next time it opens. + el.style.removeProperty('inset'); + el.style.removeProperty('transform'); + }); + fontSizeInput.blur(); + } + } + this.addDomListener(fontSizeInput, 'change', debouncedOnInputChange); + // Handle the font size dropdown. + const fontSizeDropdown = this.toolbar.querySelector('#font-size'); + if (fontSizeDropdown) { + fontSizeDropdown.querySelectorAll('.dropdown-item').forEach(item => { + this.addDomListener(item, 'mousedown', ev => setFontSize(ev.target.textContent)); + this.addDomListener(item, 'keydown', ev => { + if (ev.key === 'Enter') { + setFontSize(ev.target.textContent); + } + }); + }); + } + } } resetContent(value) { @@ -2901,7 +2954,7 @@ export class OdooEditor extends EventTarget { const fontSizeValue = this.toolbar.querySelector('#fontSizeCurrentValue'); if (fontSizeValue) { - fontSizeValue.textContent = /\d+/.exec(selectionStartStyle.fontSize).pop(); + fontSizeValue.value = /\d+/.exec(selectionStartStyle.fontSize).pop(); } const table = getInSelection(this.document, 'table'); const toolbarButton = this.toolbar.querySelector('.toolbar-edit-table'); diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss index aea78a301b1..6d25f43359a 100644 --- a/addons/web_editor/static/src/scss/wysiwyg.scss +++ b/addons/web_editor/static/src/scss/wysiwyg.scss @@ -384,6 +384,11 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; @include o-text-overflow(); max-width: 150px; } + + input#fontSizeCurrentValue { + width: 20px; + border: none; + } } // Toolbar in Sidebar (website editor, mass mailing) diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index d4a4b6c061f..881ce099b7d 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -516,6 +516,32 @@ padding: ($o-we-sidebar-content-field-height * .12) ($o-we-sidebar-content-field-button-group-button-spacing - 2); } + #font-size > button { + &:focus-within { + @extend %we-generic-text-input; + // Cancel the height of the border: + margin-top: -1px; + margin-bottom: -1px; + + input { + padding: 0 !important; + width: calc(2ch + #{$o-we-sidebar-content-field-clickable-spacing * 2} - #{$o-we-sidebar-content-field-border-width * 2}); + } + } + &.dropdown-toggle::after { + display: none; + } + + input { + background-color: unset; + border: none; + color: unset; + padding: 0; + text-align: center; + width: calc(2ch + #{$o-we-sidebar-content-field-clickable-spacing * 2}); + } + } + we-customizeblock-option { grid-area: options; padding-left: 0; diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml index 351528e9df0..005acde9287 100644 --- a/addons/web_editor/static/src/xml/editor.xml +++ b/addons/web_editor/static/src/xml/editor.xml @@ -74,30 +74,32 @@ - + - +