Odoo 12, How to change the width of the notification window <t t-name="Notification"></t> of the web module?

Question

In the base.xml file of the web module, there is the definition of the notification as follows.

<t t-name="Notification">
    <div t-attf-class="o_notification #{widget.className}" t-translation="off" role="alertdialog">
        <a t-if="widget.sticky" class="fa fa-times o_close" href="#" title="Close" aria-label="Close"/>
        <div class="o_notification_title">
            <span t-attf-class="o_icon fa fa-3x #{widget.icon}" role="img" t-attf-aria-label="Notification #{widget.name}" t-attf-title="Notification #{widget.name}"/>
            <t t-raw="widget.title"/>
        </div>
        <div class="o_notification_content" t-if="widget.message"><t t-raw="widget.message"/></div>
        <div t-if="widget.buttons.length" class="o_buttons">
            <button t-foreach="widget.buttons" t-as="button" t-attf-class="btn #{button.primary ? 'btn-primary' : 'btn-secondary'}" type="button">
                <t t-if="button.icon">
                    <i t-if="button.icon.indexOf('fa-') === 0" t-attf-class="fa fa-fw o_button_icon #{button.icon}" role="img" t-att-aria-label="button.name" t-att-title="button.name"/>
                    <img t-else="" t-att-src="button.icon" t-att-alt="button.name"/>
                </t>
                <span><t t-esc="button.text"/></span>
            </button>
        </div>
    </div>
</t>

On my screen, it gives me a window in a fixed position like this.

I access to this window with the following codes.

• xml file mybase.xml to replace the content

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="Notification" t-extend="Notification">
        <t t-jquery=".o_notification_title > t" t-operation="replace">
            <p>Title replace</p>
        </t>
        <t t-jquery=".o_notification_content" t-operation="append">
            <p>Content replace</p>
        </t>
    </t>
</templates>

• js file mybase.js to load base.xml

odoo.define('bp_unjustified.base', function (require) {
    "use strict";
    var core = require('web.core');
    var ajax = require('web.ajax');
    var qweb = core.qweb;
    ajax.loadXML('/bp_unjustified/static/src/xml/base.xml', qweb);
});

• xml file mybase_ext_js.xml to add my own xml and css to web.assets_backend

<?xml version="1.0" encoding="UTF-8"?>
<template id="base_notification_ext_js" name="Bsae Notification Ext Js" inherit_id="web.assets_backend">
    <xpath expr="." position="inside">
        <script type="text/javascript" src="/bp_unjustified/static/src/js/base.js"/>
    </xpath>
    <xpath expr="link[last()]" position="after">
        <link rel="stylesheet" type="text/scss" href="/bp_unjustified/static/src/scss/webclient.scss"/>
    </xpath>
</template>

I can change the content from the mybase.xml file, the inline css works but, impossible to change the width. My scss file base.scss is not read.

The whole window is contained in the class .o_notification_manager, the title in the class .o_notification_title, the content in the class .o_notification_content. I would like to change the width of the window from the scss file and restructure the content in table from the javascript file.

Any help will be welcome please.

Answer 1

I solved the problem with javascript only. Since the notifications appeared randomly, I used MutationObserver. Here is the code of the mybase.js file

odoo.define('bp_unjustified.Base', function (require) {
    "use strict";

    var core = require('web.core');
    var ajax = require('web.ajax');
    var qweb = core.qweb;

    $(document).ready(function() {

        var observer = new MutationObserver(_=> {
            if (document.contains($('div.o_notification_manager')[0])) {
                const bodyWidth = $('body').css('width');
                let targetNode = document.querySelector('div.o_notification_manager');
                targetNode.style.width = bodyWidth;

                let notifications = targetNode.querySelectorAll('div.o_notification');
                for (let notification of notifications) {
                    let title = notification.querySelector('.o_notification_title');
                    let content = notification.querySelector('.o_notification_content');
                    $(title).text('Vos bons provisoires non justifiés');
                    title.style.width = bodyWidth;
                    $(title).css('text-transform', 'uppercase');
                    $(title).css('text-align', 'center');

                    const contentHtml = $(content).html();
                    let tableLines = [];
                    tableLines = contentHtml.split('<br><br>');
                    let table = convertContentToTable(tableLines)
                    table.style.width = bodyWidth;
                    $(table).css('border-collapse', 'collapse');
                    let ths = table.querySelectorAll('th');
                    let tds = table.querySelectorAll('td');
                    for (let i=0; i<ths.length; i++)
                        $(ths[i]).css('border', '1px solid white').css('padding-left', '0.4rem');

                    for (let i=0; i<tds.length; i++)
                        $(tds[i]).css('border', '1px solid gray').css('padding-left', '0.4rem');

                    $(content).html(table);
                }
                observer.disconnect();
            }
        });

        observer.observe(mutationObject.target, {attributes: false, childList: true, characterData: true, subtree:true});


        function convertContentToTable(tableString = []) {
            let thead = document.createElement('thead');
            let trh = document.createElement('tr');
            for (let i=1; i<=4; i++) {
                let th = document.createElement('th');
                if (i === 1) {
                    th.innerHTML = 'No';
                    trh.appendChild(th);
                }
                if (i === 2) {
                    th.innerHTML = 'Description';
                    trh.appendChild(th);
                }
                if (i === 3) {
                    th.innerHTML = 'Date';
                    trh.appendChild(th);
                }
                if (i === 4) {
                    th.innerHTML = 'Montant';
                    trh.appendChild(th);
                }
            }
            thead.appendChild(trh);

            let tbody = document.createElement('tbody');
            for (const line of tableString) {
                let cells = line.split('<br>');
                let trb = document.createElement('tr');
                for (const cell of cells) {
                    let td = document.createElement('td');
                    if (cell !== '') {
                        const index = cell.indexOf(':');
                        td.innerHTML = cell.substring(index+1).trim();
                        trb.appendChild(td);
                    }
                }
                tbody.appendChild(trb);
            }

            let table = document.createElement('table');
            table.appendChild(thead);
            table.appendChild(tbody);

            return table;
        }
    });
});

Here is the new rendering