F NAV - Вкладки мобильной навигации

Настройка Компонент темы
73

Быстрое обновление о моём форке «F-NAV для мобильных устройств» с кнопкой «Назад», пользовательским подменю и элементами управления видимостью. Лучше всего работает с версией 3.6beta1.

Зачем этот форк?

  • Добавлена кнопка «Назад» в заголовке на страницах тем, повторяющая распространённый UX мобильных приложений.
  • Предложен тип вкладки «customMenu», открывающий настраиваемое подменю (идеально для ссылок на несколько целей; мы используем его для добавления пользовательских ссылок «Новая тема» с предустановленными данными).
  • Добавлена групповая видимость для вкладок и элементов меню, чтобы можно было показывать определённые элементы только сотрудникам и т. д.
  • Небольшие исправления, связанные с устареванием и улучшением стилей/доступности.
Краткое описание новых функций
  • Иконка «Назад» в заголовке (опционально)
    • Заменяет логотип «Домой» в заголовке на стрелку «Назад» на страницах тем.
    • Поведение: переход назад, если есть история, иначе — перенаправление на «/».
    • Управление через настройку: header_back_icon_enabled.
  • Тип вкладки «Custom Submenu» (пользовательское подменю)
    • Новая функция f_nav_tabs: customMenu.
    • Новая настройка: f_nav_submenu_items.
      • Настройка элементов меню с меткой и URL (опционально иконка).
      • Отлично подходит для быстрого доступа к нескольким страницам из одной вкладки.
  • Элементы управления видимостью на основе групп
    • Вкладки, элементы подменю и profile_extra_items можно ограничить выбранными группами.
    • Поведение:
      • Пустые группы => видны всем.
      • Если группы заданы => видят только члены хотя бы одной выбранной группы.
      • Анонимные пользователи не видят ограниченные элементы.
  • Опционально: скрытие панели навигации на страницах тем
    • Управление через настройку: hide_nav_in_topic.
  • Артефакты сборки в архиве и документация по тестированию
    • Удобные артефакты сборки (v1–v5) в папке builds/.
    • Файлы TESTING_GUIDE.md и TEST_RESULTS.md с документацией по ручной валидации.

Улучшения существующих функций

  • Элементы и вкладки F-NAV
    • Добавлен видимый getter visibleTabs для учёта групповой видимости.
    • Интеграция нового компонента CustomSubmenu в поток FNavItem.
  • Меню профиля/аватара в заголовке
    • Определение мобильного вида перемещено внутрь компонента, что улучшило поведение и устранило предупреждения.
    • Дополнительные элементы профиля теперь поддерживают групповую видимость.
  • Стилизация и доступность
    • Новый SCSS для пользовательского подменю и иконки «Назад».
    • Последовательные состояния наведения/активности/focus-visible.
    • Последовательный border-radius с использованием переменных ядра; улучшенные отступы (например, отступ кнопки «Назад» установлен в 0).

Исправления ошибок и поддержка

  • Устранены предупреждения об устаревании site.mobileView путём переноса проверок из инициализаторов в рендеринг компонентов.
  • Исправлен случайный сбой рендеринга путём вынесения функции из блока.
  • Небольшие доработки для соответствия поведению заголовка Discourse (состояния наведения/активности, переходы непрозрачности).
  • Небольшие правки CSS (например, убедиться, что отступ кнопки «Назад» равен нулю, предотвратить случайные изменения размеров).

Сравнение высокого уровня (Оригинал vs Форк)

  • Оригинал (main): Мобильные вкладки F-NAV + опциональный импорт чата; нет кнопки «Назад» или пользовательского подменю.
  • Форк (feat/home-logo-arrow-back):
    • Добавлена функция иконки «Назад» в заголовке с резервным маршрутизированием.
    • Введена функция вкладки «customMenu» с настраиваемыми элементами подменю.
    • Добавлена групповая видимость для вкладок, элементов подменю и элементов профиля.
    • Опциональное скрытие F-NAV на страницах тем.
    • Улучшена доступность (a11y) и согласованность состояний взаимодействия.
    • Предоставлена документация по тестированию и упакованные сборки.

Примечания:

  • Этот компонент предназначен для последних версий Discourse, поддерживающих уровень API плагинов Discourse 1.14+ (как указано в инициализаторах).
  • Если вы используете групповую видимость, сначала убедитесь, что группы и членство в них настроены.

Предупреждение: Пожалуйста, тестируйте с осторожностью, так как я не программист, а TC был создан и протестирован полностью с помощью ИИ.

Спасибо Дон за этот отличный компонент — это прекрасное дополнение к UX/UI Discourse! :heart:

3 лайка