Раздел Редактор приложений
Назначение
Редактор приложений (CMS Studio) помогает настроить внешний вид и структуру готового Mini App. Здесь можно менять дизайн, проверять результат в предпросмотре и редактировать компоненты текущей страницы.
Раздел доступен владельцу компании и менеджеру через меню CMS, затем Редактор приложений.
Связанные инструкции:
Устройство Studio
Верхняя панель
В верхней панели находятся:
- Приложение - выбор Mini App для редактирования;
- Редактирование / Просмотр - включает или скрывает служебные действия внутри предпросмотра. После открытия приложения Studio всегда начинает с безопасного режима просмотра;
- Обновить - заново открывает предпросмотр;
- Сохранить - сохраняет изменения дизайн-системы. Пока изменений нет, кнопка показывает Сохранено.
При переключении приложения с несохранённым дизайном Studio запрашивает подтверждение.
Дизайн-система
Левая колонка управляет оформлением всего приложения. Готовые наборы открываются визуальной галереей, а отдельные кнопки позволяют точнее настроить:
- цвета для светлой и тёмной темы;
- шрифты и размеры текста;
- скругления и отступы.
Черновые изменения сразу видны в предпросмотре, но становятся постоянными только после Сохранить дизайн или верхней кнопки Сохранить. Отменить изменения возвращает значения последней сохранённой версии.
Живой предпросмотр
Центральная область показывает клиентскую страницу Mini App. На широком экране доступны шесть профилей: три формата телефона, планшеты 8 и 11 дюймов и компьютер 16:10. Studio запоминает последний выбранный профиль.
Панель профилей по умолчанию закреплена над предпросмотром. Кнопка с булавкой открепляет и плавно скрывает её, оставляя полупрозрачную кнопку быстрого доступа. Наведение или переход фокусом временно раскрывает панель, а нажатие на кнопку закрепляет её снова. Выбранный режим сохраняется для следующих открытий Studio.
Предпросмотр использует временный защищенный доступ. Когда срок доступа заканчивается, Studio автоматически перезагружает страницу. После сетевой ошибки нажмите Обновить.
Название, URL текущего экрана и кнопка перехода в отдельный редактор CMS-страницы находятся в заголовке правой карты страницы. Перед переходом Studio предупреждает о несохранённом дизайне.
Структура страницы
Правая колонка показывает две карты - базовой страницы приложения и текущего экрана. В них видны:
- название и URL текущей страницы;
- слоты страницы;
- компоненты внутри каждого слота;
- компоненты базовой страницы, которые окружают содержимое текущего экрана.
Нажатие на компонент в карте прокручивает предпросмотр к нужному блоку и ненадолго подсвечивает его. Данные, оформление и порядок меняются прямо в предпросмотре. Там же можно удалить компонент.
Новый компонент добавляется через кнопку Добавить компонент в блоке Выбранный слот. Добавление, удаление и перемещение меняют структуру страницы сразу и сопровождаются уведомлением. Удаление требует подтверждения.
Инспектор компонента
В режиме Редактирование у блоков в предпросмотре появляются действия. Редактировать данные открывает Содержимое, а Редактировать стиль - Оформление.
Поля в разделе Содержимое зависят от типа блока. Здесь могут быть тексты, изображения, ссылки и коллекции. Изменения компонента сохраняются отдельной кнопкой.
Если в предпросмотре перейти на другую страницу, Studio закрывает инспектор старого компонента, возвращает панель структуры и загружает карту новой страницы. Это не позволяет случайно продолжить редактирование компонента, которого уже нет на экране.
В Оформлении перечислены доступные настройки выбранного компонента. Для каждой указано назначение и значение по умолчанию. Значение можно ввести вручную или выбрать из уже настроенного оформления приложения.
Кнопка Выбрать значение открывает подходящий вариант окна для текущей настройки:
- для цвета - палитру светлой и тёмной темы;
- для размеров и скруглений - список готовых значений с единицами измерения;
- для цвета с прозрачностью - дополнительную настройку непрозрачности.
Адаптивный интерфейс
На широком экране одновременно видны дизайн, предпросмотр и карта структуры. Основное меню Backoffice сворачивается в полосу иконок и раскрывается поверх Studio при наведении или переходе фокусом. При редактировании компонента дизайн-панель скрывается, а расширенный инспектор занимает правую часть Studio.
На планшетах и небольших экранах вспомогательные панели открываются через нижнюю навигацию Дизайн, Структура и, после выбора компонента, Инспектор. На смартфонах Studio недоступна: используйте планшет или компьютер.
Правила сохранения
- дизайн приложения сохраняется явно;
- данные компонента сохраняются в инспекторе явно;
- добавление, удаление и порядок компонентов применяются отдельными структурными командами;
- переход на другую CMS-страницу, приложение или из раздела при несохранённом дизайне требует внимания к предупреждению;
- после успешной операции Studio показывает уведомление, а после ошибки - понятное сообщение с безопасным следующим действием.
Где выполнять смежные задачи
- создать основу нового приложения - в Конструкторе приложений;
- изменить базовые поля приложения - в Приложениях;
- редактировать URL и метаданные страницы - в Страницах;
- открыть компонент отдельно - в Компонентах.