Цветовая палитра

Эта статья расскажет, как управлять цветами блоков и как работает наследование цветов от приложения и сайта, к которому принадлежит блок. Однако, если Вы не читали первые три статьи цикла, а именно "Каркас блока", "Настройки блока" и "Фронтенд блока", рекомендуем сначала ознакомиться с ними в указанной последовательности.

 

1. Настройки цветовой палитры блока

Каждый из блоков имеет цветовые настройки, чтобы пользователь мог настроить цвета под свой фирменный стиль. Приложение предоставляет возможность вынести цветовые настройки в отдельную вкладку "Цвета" в настройках блока. Для этого в блоке определяется метод getColors(), который возвращает массив цветов с описаниями и правилом наследования, например:

// Метод определения цветов блока
public function getColors()
{
    return array(
        'background_color' => array(
            'name' => 'Цвет фона',
            'hint' => 'Цвет фона блока',
            'legacy' => 'background_primary',
        ),
        'text_color' => array(
            'name' => 'Цвет текста',
            'hint' => 'Цвет текста в блоке',
            'legacy' => 'color_primary',
        ),
    );
}

Важно уделить внимание параметру legacy, который определяет код цвета, по которому будет получен сам цвет из настроек приложения или сайта, к которому принадлежит блок. Данный параметр может принимать следующие значения:

'background_primary' => '#ffffff', // Основной цвет фона
'background_secondary' => '#00aaf8', // Дополнительный (контрастный) цвет фона
'color_primary' => '#393939', // Основной цвет текста
'color_secondary' => '#ffffff', // Дополнительный (контрастный) цвет текста
'color_bright' => '#00aaf8', // Яркий цвет, чтобы что-то отметить
'color_warning' => '#da5151', // Цвет для обозначения ошибок или выделения текста, обычно красный оттенок
'color_light' => '#959595', // Осветленный цвет для не самого важного
'color_ultralight' => '#ebebeb', // Сильно осветленный цвет, например, для фона
'color_links' => '#00aaf8', // Цвет ссылок и кнопок
'color_links_hover' => '#007bff', // Цвет ссылок и кнопок при наведении

Обратите внимание, что указаны стандартные коды цветов, пользователь может переопределить их в настройках системы или сайта.

 

2. Наследование цветов

Блок может наследовать цвета от приложения или от сайта, к которому принадлежит. Это удобно для пользователя - не нужно красить каждый блок вручную. Чтобы цвета наследовались, необходимо включать код

$settings = $this->applyLegacyColors($settings);

в метод getFrontendHtml() блока.

 

3. Свой шаблон цветовых настроек

По умолчанию, система сама сгенерирует для бока шаблон цветовых настроек, ничего делать не нужно, но, если Вы решили все-же сделать свои настройки, переопределите в классе своего блока эти методы:

  • public function getColorSettingsTemplatePath()
  • public function getColorSettingsHtml()

Алгоритм тот же, как и для шаблонов настроек и фронтенда блока, который описан в статье "Каркас блока".

 

4. Не забудьте про фронтенд

Чтобы настройки работали, не забудьте добавить в шаблон фронтенде дополнительные стили, например:

<div class="my-block-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <p>Это мой блок. Таких блоков много, но этот &mdash; мой.</p><br>
                <input type="text" class="my-custom-value" value="10"><br>
                <input type="button" value="Отправить" class="my-block-send">
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    #landings_block_{$block_id|escape} .my-block-wrapper { background: {$block_settings.background_color|escape}; color: {$block_settings.text_color|escape}; }
</style>

Скачайте плагин, иллюстрирующий материалы этой статьи.