From be6c45cd1e83c8e800baf418b01c414432a61e86 Mon Sep 17 00:00:00 2001 From: "Arthur Detroux (ard)" Date: Wed, 9 Nov 2022 12:44:44 +0000 Subject: [PATCH] [FIX] web_editor, website: fix the fonts selection styling Prior to [1] the font names in the font selection menu had styling. What [1] broke could be fixed with a simple CSS rule, however, it would not style custom fonts. The reason is that the styles from the editor are no longer reloaded when a SCSS variable is changed since [2]. (To note that after [2] but prior to [1] the names would not even appear, which [1] fixed.) This commit fixes that by setting the font-family style manually in javascript to each widget, and loading the CSS via loadCSS. [1]: https://github.com/odoo/odoo/commit/c0f2f670eb087991cc9a6a67f4beea5f12bd15f2#diff-70f7fe38208aa7fe678f18e329d3c11b70065dee723921352b6005774e8bab53R131 [2]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b task-2978623 closes odoo/odoo#108819 X-original-commit: 0cbb8397ae6d57817efa5721dda8b6a0526aa43b Signed-off-by: Quentin Smetz (qsm) Co-authored-by: qsm-odoo --- .../static/src/js/editor/snippets.options.js | 3 ++ .../static/src/scss/web_editor.common.scss | 1 + .../static/src/js/editor/snippets.editor.js | 2 +- .../static/src/js/editor/snippets.options.js | 38 ++++++++++++++----- .../static/src/scss/website.wysiwyg.scss | 7 ---- 5 files changed, 33 insertions(+), 18 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index 22232197d32..d4eb4161a90 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -55,6 +55,9 @@ function _addTitleAndAllowedAttributes(el, title, options) { const titleEl = _buildTitleElement(title); tooltipEl = titleEl; el.appendChild(titleEl); + if (options && options.dataAttributes && options.dataAttributes.fontFamily) { + titleEl.style.fontFamily = options.dataAttributes.fontFamily; + } } if (options && options.classes) { diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index 2c5380f6462..5e0afd1f9a0 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -77,6 +77,7 @@ @include print-variable('o-md-container-max-width', map-get($container-max-widths, md)); @include print-variable('o-we-content-to-translate-color', $o-we-content-to-translate-color); @include print-variable('o-we-translated-content-color', $o-we-translated-content-color); + @include print-variable('o-system-fonts', $o-system-fonts); } html, body { diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js index beadfb1a0c6..d7f968f5019 100644 --- a/addons/website/static/src/js/editor/snippets.editor.js +++ b/addons/website/static/src/js/editor/snippets.editor.js @@ -469,7 +469,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({ } } } - } + }, }); weSnippetEditor.SnippetEditor.include({ diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 876ae78e3b6..22654de8021 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -3,7 +3,7 @@ odoo.define('website.editor.snippets.options', function (require) { const {ColorpickerWidget} = require('web.Colorpicker'); var core = require('web.core'); -const { loadBundle } = require("@web/core/assets"); +const { loadBundle, loadCSS } = require("@web/core/assets"); var Dialog = require('web.Dialog'); const {Markup, sprintf} = require('web.utils'); const weUtils = require('web_editor.utils'); @@ -121,19 +121,39 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({ await this._super(...arguments); + const fontsToLoad = []; + for (const font of this.googleFonts) { + const fontURL = `https://fonts.googleapis.com/css?family=${encodeURIComponent(font).replace(/%20/g, '+')}`; + fontsToLoad.push(fontURL); + } + for (const font of this.googleLocalFonts) { + const attachmentId = font.split(/\s*:\s*/)[1]; + const fontURL = `/web/content/${attachmentId}`; + fontsToLoad.push(fontURL); + } + // TODO ideally, remove the elements created once this widget + // instance is destroyed (although it should not hurt to keep them for + // the whole backend lifecycle). + const proms = fontsToLoad.map(async fontURL => loadCSS(fontURL)); + const fontsLoadingProm = Promise.all(proms); + const fontEls = []; const methodName = this.el.dataset.methodName || 'customizeWebsiteVariable'; const variable = this.el.dataset.variable; _.times(nbFonts, fontNb => { const realFontNb = fontNb + 1; const fontKey = weUtils.getCSSVariableValue(`font-number-${realFontNb}`, style); - const fontName = fontKey === "'SYSTEM_FONTS'" ? _t("System Fonts") : fontKey.slice(1, -1); + let fontName = fontKey.slice(1, -1); // Unquote + let fontFamily = fontName; + if (fontName === "SYSTEM_FONTS") { + fontName = _t("System Fonts"); + fontFamily = 'var(--o-system-fonts)'; + } const fontEl = document.createElement('we-button'); - fontEl.classList.add(`o_we_option_font_${realFontNb}`); fontEl.setAttribute('string', fontName); fontEl.dataset.variable = variable; fontEl.dataset[methodName] = fontKey; - fontEl.dataset.font = realFontNb; + fontEl.dataset.fontFamily = fontFamily; fontEls.push(fontEl); this.menuEl.appendChild(fontEl); }); @@ -160,6 +180,8 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({ $(this.menuEl).append($(core.qweb.render('website.add_google_font_btn', { variable: variable, }))); + + return fontsLoadingProm; }, //-------------------------------------------------------------------------- @@ -172,14 +194,10 @@ const FontFamilyPickerUserValueWidget = SelectUserValueWidget.extend({ async setValue() { await this._super(...arguments); - for (const className of this.menuTogglerEl.classList) { - if (className.match(/^o_we_option_font_\d+$/)) { - this.menuTogglerEl.classList.remove(className); - } - } + this.menuTogglerEl.style.fontFamily = ''; const activeWidget = this._userValueWidgets.find(widget => !widget.isPreviewed() && widget.isActive()); if (activeWidget) { - this.menuTogglerEl.classList.add(`o_we_option_font_${activeWidget.el.dataset.font}`); + this.menuTogglerEl.style.fontFamily = activeWidget.el.dataset.fontFamily; } }, diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss index 3ba0b52358d..0e8bee8b5c3 100644 --- a/addons/website/static/src/scss/website.wysiwyg.scss +++ b/addons/website/static/src/scss/website.wysiwyg.scss @@ -66,13 +66,6 @@ html[data-edit_translations="1"] { } // SNIPPET PANEL -$i: 1; -@each $font-name, $font-config in $o-theme-font-configs { - we-toggler.o_we_option_font_#{$i}, we-button.o_we_option_font_#{$i} > div { - font-family: o-safe-get($font-config, 'family', $font-family-base); - } - $i: $i + 1; -} .o_we_add_google_font_btn { border-top: 1px solid currentColor !important; }