Значки играют решающую роль в улучшении пользовательского опыта приложения Odoo. Они предоставляют визуальные подсказки и делают интерфейс более интуитивным. В этой статье блога мы рассмотрим различные методы добавления значков в Odoo и предоставим примеры кода для каждого метода.

Метод 1: использование значков Font Awesome
Font Awesome — это популярная библиотека значков, предоставляющая широкий выбор значков. Чтобы добавить значки Font Awesome в Odoo, выполните следующие действия:

Шаг 1. Включите библиотеку Font Awesome в свой модуль Odoo.

<odoo>
    <data>
        <template id="assets_backend" name="My Module Assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <link rel="stylesheet" href="/my_module/static/src/css/fontawesome.min.css"/>
            </xpath>
        </template>
    </data>
</odoo>

Шаг 2. Используйте соответствующий класс для отображения нужного значка в представлениях Odoo.

<odoo>
    <data>
        <record id="my_module_view" model="ir.ui.view">
            <field name="name">My Module View</field>
            <field name="model">my.module.model</field>
            <field name="arch" type="xml">
                <form>
                    <header>
                        ...
                        <button name="button_action" string="Button with Icon" type="object"
                                class="oe_highlight fa fa-check-square"/>
                        ...
                    </header>
                    ...
                </form>
            </field>
        </record>
    </data>
</odoo>

Метод 2: использование значков SVG
Odoo также поддерживает использование значков SVG. Вот пример добавления значка SVG:

Шаг 1. Поместите файл SVG в модуль Odoo.

<odoo>
    <data>
        <template id="assets_backend" name="My Module Assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/my_module/static/src/js/icons.js"/>
            </xpath>
        </template>
    </data>
</odoo>

Шаг 2. Определите значок SVG в файле JavaScript.

odoo.define('my_module.icons', function (require) {
    "use strict";
    var core = require('web.core');
    var Widget = require('web.Widget');
    var Icons = Widget.extend({
        template: 'my_module.icons',
        events: {
            'click .my-icon': '_onClickIcon',
        },
        _onClickIcon: function (ev) {
            // Handle icon click event
        },
    });
    core.action_registry.add('my_module_icons', Icons);
    return Icons;
});

Шаг 3. Определите шаблон значка SVG в XML-файле.

<odoo>
    <data>
        <template id="assets_backend" name="My Module Assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <link rel="stylesheet" href="/my_module/static/src/css/icons.css"/>
            </xpath>
        </template>
        <template id="svg_icon_template">
            <svg class="my-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M12 2L3 9h3v13h12V9h3z"/>
            </svg>
        </template>
    </data>
</odoo>

Метод 3: настройка значков Odoo
Помимо использования внешних библиотек значков, Odoo позволяет настраивать значки. Вы можете заменить значки по умолчанию своими собственными значками. Вот пример:

Шаг 1. Поместите файл пользовательского значка в модуль Odoo.

<odoo>
    <data>
        <template id="assets_backend" name="My Module Assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <link rel="stylesheet" href="/my_module/static/src/css/icons.css"/>
            </xpath>
        </template>
    </data>
</odoo>

Шаг 2. Определите собственный значок в CSS.

/* icons.css */
.my-custom-icon:before {
    content: url('/my_module/static/src/img/custom_icon.png');
}

Шаг 3. Используйте собственный класс значков в представлениях Odoo.

<odoo>
    <data>
        <record id="my_module_view" model="ir.ui.view">
            <field name="name">My Module View</field>
            <field name="model">my.module.model</field>
            <field name="arch" type="xml">
                <form>
                    <header>
                        ...
                        <button name="button_action" string="Button with Custom Icon" type="object" class="oe_highlight my-custom-icon"/>
                        ...
                    </header>
                    ...
                </form>
            </field>
        </record>
    </data>
</odoo>

В этой статье мы рассмотрели различные способы добавления значков в Odoo. Мы рассмотрели использование значков Font Awesome, значков SVG и настройку значков Odoo. Значки не только повышают визуальную привлекательность вашего приложения Odoo, но и улучшают общий пользовательский опыт. Внедрив эти методы, вы сможете создать более интуитивно понятный и привлекательный интерфейс для своих пользователей.