Автор: Alex Markus

Все статьи
В релизе 2022.4 были реструктурированы пакеты продуктов Reports.JS, Reports.PHP, Dashboards.JS и Dashboards.PHP.

Предыстория

Все началось с решения добавить в наши продукты новую тему интерфейса в стиле Microsoft Office 2022. Однако, это значительно увеличило бы количество CSS-файлов, что, естественно, повлекло бы за собой увеличение размера пакетов продуктов. В итоге было принято решение изменить модели оформления JS-компонентов для решения следующих задач:

  • добавить новую тему интерфейса с различными цветовыми акцентами;

  • сохранить обратную совместимость для наших пользователей;

  • избежать увеличения размера скриптов продуктов.

Расскажем обо всем по порядку.

Новая тема

Как уже отмечалось, одной из основных задач релиза 2022.4 было добавление новой темы интерфейса для JS компонентов в стиле Microsoft Office 2022 с различными цветовыми акцентами и использование этой темы по умолчанию, а также сохранение обратной совместимости, то есть возможности в любой момент поменять тему на Microsoft Office 2013 с необходимым цветовым оттенком.

New Theme

Избавление от CSS файлов

Добавление новой темы интерфейса при старой модели оформления повлекло бы увеличение количества CSS-файлов. Мы нашли решение этой проблемы – перенесли все стилевые настройки и элементы управления в файлы скриптов, полностью избавившись от CSS-файлов.

Теперь файл stimulsoft.viewer.js содержит все необходимые стилевые настройки компонента для просмотра отчетов и дашборда, а файл stimulsoft.designer.js все стилевые настройки компонента для создания и редактирования отчетов и дашбордов. Таким образом, CSS-файлы вообще не требуются для работы продукта.

Новый метод и новая опция

Для сохранения обратной совместимости мы предусмотрели возможность использования опции компонента или специального метода. Для установки темы интерфейса по умолчанию в JS-компоненты добавлена новая опция theme, которая располагается в группе настроек appearance. Эта опция может быть установлена одним из перечислений StiViewerTheme (StiDesignerTheme). Например, options.appearance.theme = Stimulsoft.Viewer.StiViewerTheme.Office2022WhiteBlue.

Кроме этого, для изменения темы компонента добавлен специальный метод setTheme, который позволяет менять тему в процессе работы с JS-компонентом. В качестве аргумента метод принимает всё то же перечисление, например, viewer.setTheme(Stimulsoft.Viewer.StiViewerTheme.Office2022WhiteTeal).


Отображение иконок в различных масштабах

Для отображения иконок в различных масштабах экрана мы добавили дополнительные изображения элементов управления компонентов в нескольких размерах. Естественно, увеличение числа изображений привело к увеличению размера скриптов. Чтобы избежать этого, мы сконвертировали все изображения в формат WebP, и это позволило сохранить прежний размер скриптов продуктов. Теперь все JS-компоненты, дизайнер и вьювер, выглядят корректно при различных масштабах экрана пользователя.
Если у вас остались вопросы, свяжитесь с нами.
By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.