[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) <qsm@odoo.com> Co-authored-by: qsm-odoo <qsm@odoo.com>
2022-12-30 13:14:40 +01:00
parent d802f4fe5f
commit be6c45cd1e
5 changed files with 33 additions and 18 deletions
@@ -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) {
@@ -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 {
@@ -469,7 +469,7 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
                }
            }
        }
-    }
+    },
 });

 weSnippetEditor.SnippetEditor.include({
@@ -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 <link> 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;
        }
    },

@@ -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;
 }