Цветовая палитра
Эта статья расскажет, как управлять цветами блоков и как работает наследование цветов от приложения и сайта, к которому принадлежит блок. Однако, если Вы не читали первые три статьи цикла, а именно "Каркас блока", "Настройки блока" и "Фронтенд блока", рекомендуем сначала ознакомиться с ними в указанной последовательности.
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>Это мой блок. Таких блоков много, но этот — мой.</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>
Скачайте плагин, иллюстрирующий материалы этой статьи.