Фігури¶

Фігури зручні, якщо ви хочете додати індивідуальності своєму вебсайту.

У цьому розділі ви дізнаєтесь, як додавати стандартні та власні форми фону й зображень.

Фігури фону¶

Фігури фону – це SVG-файли, які можна додавати як декоративний фон у різні розділи. Кожна фігура має один або кілька налаштовуваних кольорів, а деякі з них анімовані.

Попередження

Фігури Odoo за замовчуванням використовують карту палітри кольорів Odoo за замовчуванням як орієнтир. Таким чином, кольори будуть автоматично адаптуватися до нової палітри щоразу, коли вона змінюється:

default_palette = {
    '1': '#3AADAA',
    '2': '#7C6576',
    '3': '#F6F6F6',
    '4': '#FFFFFF',
    '5': '#383E45',
}

Standard¶

Доступний великий вибір стандартних фігур фону.

Використання

<section data-oe-shape-data="{'shape':'web_editor/Zigs/06'}">
    <div class="o_we_shape o_web_editor_Zigs_06"/>
    <div class="container">
        <!-- Content -->
     </div>
</section>

data-oe-shape-data - це JSON-об’єкт, що містить інформацію про вашу фігуру, таку як розташування SVG-файлу, параметри повторення та відображення тощо.

Наприклад, ви можете відобразити фігуру горизонтально або вертикально, використовуючи вісь X або Y ось так:

<section data-oe-shape-data="{'shape':'web_editor/Zigs/06','flip':[x,y]}">
    <div class="o_we_shape o_we_flip_x o_we_flip_y o_web_editor_Zigs_06"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Зіставлення кольорів¶

Ви також можете змінити стандартне відображення кольорів вашої фігури, змінивши кольори на поточній карті або створивши альтернативну карту без зміни початкової.

Перемикання кольорів зіставлення¶

Спочатку ми можемо використати таку фігуру:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <svg id="zigs06_top" viewBox="0 0 30 30" preserveAspectRatio="xMinYMin meet" fill="#383E45" width="100%">
            <path d="M30,7.9C22.5,7.9,22.5,20,15,20S7.5,7.9,0,7.9V0h30V7.9z"/>
        </svg>
        <svg id="zigs06_bottom" viewBox="0 0 30 30" preserveAspectRatio="xMinYMax meet" fill="#FFFFFF" width="100%">
            <path d="M0,22.1C7.5,22.1,7.5,10,15,10s7.5,12.1,15,12.1V30H0V22.1z"/>
        </svg>
    </defs>
    <svg>
        <use xlink:href="#zigs06_top"/>
        <use xlink:href="#zigs06_bottom"/>
    </svg>
</svg>

Тут ми використовуємо #383E45 та #FFFFFF, що відповідає 5-му та 4-му кольорам у палітрі кольорів Odoo за замовчуванням.

Форма оголошується в SCSS наступним чином:

/website_airproof/static/src/scss/primary_variables.scss¶

'Zigs/06': ('position': bottom, 'size': 30px 100%, 'colors': (4, 5), 'repeat-x': true),

Чорнуватий колір використовується зверху (c5), світліший (c4) знизу та між ними, форма просто прозора.

Ми перепишемо карту кольорів з деякими парами key: value:

З посиланням на кольорову палітру та власним кольором

/website_airproof/static/src/scss/primary_variables.scss¶

 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Zigs/06', (4: 3, 5: rgb(187, 27, 152)))

Або просто з посиланнями

/website_airproof/static/src/scss/primary_variables.scss¶

 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Zigs/06', (4: 3, 5: 1));

c4 (білий) буде замінено на c3 (білуватий), а c5 (чорний) на c1 (білий).

Результати

Додати додаткове відображення кольорів¶

Додавання додаткового колірного зіставлення дозволяє додати варіант кольору до шаблону фігури, зберігаючи при цьому оригінал.

/website_airproof/static/src/scss/boostrap_overridden.scss¶

$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Zigs/06', 'second', (4: 3, 5: 1));

<section data-oe-shape-data="{'shape':'web_editor/Zigs/06'}">
    <div class="o_we_shape o_web_editor_Zigs_06 o_second_extra_shape_mapping"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Користувацький¶

Іноді ваш дизайн може вимагати створення однієї або кількох власних фігур.

Спочатку вам потрібно створити SVG-файл для вашої фігури.

/website_airproof/static/shapes/hexagons/01.svg¶

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="86" height="100">
    <polygon points="0 25, 43 0, 86 25, 86 75, 43 100, 0 75" style="fill: #3AADAA;"/>
</svg>

Обов’язково використовуйте кольори зі стандартної палітри Odoo для вашої фігури (як пояснено вище).

default_palette = {
    '1': '#3AADAA',
    '2': '#7C6576',
    '3': '#F6F6F6',
    '4': '#FFFFFF',
    '5': '#383E45',
}

Вкладення¶

Оголосіть свій файл фігури.

/website_airproof/data/shapes.xml¶

<record id="shape_hexagon_01" model="ir.attachment">
    <field name="name">01.svg</field>
    <field name="datas" type="base64" file="website_airproof/static/shapes/hexagons/01.svg"/>
    <field name="url">/web_editor/shape/illustration/hexagons/01.svg</field>
    <field name="public" eval="True"/>
</record>

Поле	Опис
name	Назва фігури
datas	Шлях до фігури
url	Розташування вашої фігури у веб-редакторі. Файл автоматично дублюється в `/web_editor/shape/illustration` конструктором веб-сайтів.
public	Зробить фігуру доступною для подальшого редагування.

SCSS¶

Визначте стилі вашої фігури.

/website_airproof/static/src/scss/primary_variables.scss¶

$o-bg-shapes: map-merge($o-bg-shapes,
    (
        'illustration': map-merge(
            map-get($o-bg-shapes, 'illustration') or (),
            (
                'hexagons/01': ('position': center center, 'size': auto 100%, 'colors': (1), 'repeat-x': true, 'repeat-y': true),
            ),
        ),
    )
);

Key	Опис
Розташування файлу	`hexagons/01` відповідає розташуванню вашого файлу в папці `shapes`.
position	Визначає положення вашої фігури.
size	Визначає розмір вашої фігури.
colors	Визначає колір c*, який ви хочете мати (це замінить колір, який ви вказали у вашому SVG).
repeat-x	Визначає, чи фігура повторюється горизонтально. Цей ключ необов’язковий і його потрібно визначати, лише якщо встановлено значення `true`.
repeat-y	Визначає, чи фігура повторюється вертикально. Цей ключ необов’язковий і його потрібно визначати, лише якщо встановлено значення `true`.

Додати опцію¶

Нарешті, додайте свою фігуру до списку фігур, доступних у Конструкторі веб-сайтів.

/website_airproof/views/snippets/options.xml¶

<template id="snippet_options_background_options" inherit_id="website.snippet_options_background_options" name="Airproof - Shapes">
   <xpath expr="//*[hasclass('o_we_bg_shape_menu')]/header[hasclass('o_pager_nav')]//*[hasclass('o_pager_nav_btn')][last()]" position="after">
      <button type="button" class="o_pager_nav_btn p-0 text-uppercase" data-scroll-to="x_scroll_bgshapes_airproof">
         <span class="w-100">Airproof</span>
      </button>
   </xpath>
   <xpath expr="//*[hasclass('o_we_bg_shape_menu')]/div[hasclass('o_pager_container')]" position="inside">
      <div class="x_scroll_bgshapes_airproof">
         <we-title>Airproof</we-title>
         <we-select-page string="Airproof">
            <we-button data-shape="illustration/airproof/01" data-select-label="Airproof 01"/>
         </we-select-page>
      </div>
   </xpath>
</template>

Використовуйте це на своїх сторінках¶

На ваших XML-сторінках ви можете використовувати свою фігуру так само, як і інші.

<section class="..." data-oe-shape-data="{'shape': 'illustration/airproof/01', 'colors': 'c4': '#8595A2', 'c5': 'rgba(0, 255, 0)'}">
    <div class="o_we_shape o_illustration_airproof_01"/>
    <div class="container">
        <!-- Content -->
    </div>
</section>

Ви також можете перевизначити кольори за допомогою атрибута data-oe-shape-data, але це необов’язково.

Редагувати на GitHub