diff --git a/addons/im_livechat/__manifest__.py b/addons/im_livechat/__manifest__.py index aaa3b0e1251..26fc7955c68 100644 --- a/addons/im_livechat/__manifest__.py +++ b/addons/im_livechat/__manifest__.py @@ -95,6 +95,7 @@ Help your customers with this chat, and analyse their feedback. 'im_livechat/static/tests/tours/**/*', ], 'im_livechat.assets_core': [ + 'web/static/lib/odoo_ui_icons/style.css', 'mail/static/src/core/common/**/*', 'mail/static/src/discuss/core/common/*', 'mail/static/src/discuss/typing/**/*', diff --git a/addons/im_livechat/controllers/main.py b/addons/im_livechat/controllers/main.py index efc047b838f..817f246cc9a 100644 --- a/addons/im_livechat/controllers/main.py +++ b/addons/im_livechat/controllers/main.py @@ -40,6 +40,10 @@ class LivechatController(http.Controller): def fontawesome(self, **kwargs): return http.Stream.from_path('web/static/src/libs/fontawesome/fonts/fontawesome-webfont.woff2').get_response() + @http.route('/im_livechat/odoo_ui_icons', type='http', auth='none', cors="*") + def odoo_ui_icons(self, **kwargs): + return http.Stream.from_path('web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2').get_response() + @http.route('/im_livechat/emoji_bundle', type='http', auth='public', cors='*') def get_emoji_bundle(self): bundle = 'web.assets_emoji' diff --git a/addons/im_livechat/static/src/embed/boot_helpers.js b/addons/im_livechat/static/src/embed/boot_helpers.js index 1cd793706b5..c153e6ffdd3 100644 --- a/addons/im_livechat/static/src/embed/boot_helpers.js +++ b/addons/im_livechat/static/src/embed/boot_helpers.js @@ -2,23 +2,23 @@ import { serverUrl } from "@im_livechat/embed/livechat_data"; -async function loadFontAwesome() { +async function loadFont(name, url) { await document.fonts.ready; - if ([...document.fonts].some(({ family }) => family === "FontAwesome")) { - // FontAwesome already loaded. + if ([...document.fonts].some(({ family }) => family === name)) { + // Font already loaded. return; } const link = document.createElement("link"); link.rel = "preload"; link.as = "font"; - link.href = `${serverUrl}/im_livechat/font-awesome`; + link.href = url; link.crossOrigin = ""; const style = document.createElement("style"); style.appendChild( document.createTextNode(` @font-face { - font-family: 'FontAwesome'; - src: url('${serverUrl}/im_livechat/font-awesome') format('woff2'); + font-family: ${name}; + src: url('${url}') format('woff2'); font-weight: normal; font-style: normal; font-display: block; @@ -47,7 +47,7 @@ export function makeRoot(target) { /** * Initialize the livechat container by loading the styles and - * FontAwesome. + * the fonts. * * @param {HTMLElement} root * @returns {ShadowRoot} @@ -62,6 +62,10 @@ export async function makeShadow(root) { }); const shadow = root.attachShadow({ mode: "open" }); shadow.appendChild(link); - await Promise.all([stylesLoadedPromise, loadFontAwesome()]); + await Promise.all([ + stylesLoadedPromise, + loadFont("FontAwesome", `${serverUrl}/im_livechat/font-awesome`), + loadFont("odoo_ui_icons", `${serverUrl}/im_livechat/odoo_ui_icons`), + ]); return shadow; }