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 @@
-
+
-
+