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

:information_source: Сводка F NAV - Мобильные вкладки навигации
:eyeglasses: Предпросмотр Theme Creator
:hammer_and_wrench: Репозиторий GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub
:heart: Полезно? > ./support --coffee
:question: Гид по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Начальное руководство по использованию тем Discourse

Установить этот компонент темы

Привет :wave:

Ранее я создал Development тему для него как концепцию компонента темы, и теперь он готов стать Customization > Theme component.

:warning: Убедитесь, что протестировали его перед использованием в боевом режиме.

Немного информации о компоненте: F NAV - Theme component concept


О компоненте темы. Я прочитал множество постов о том, что было бы здорово сделать Discourse Tab Bar for Mobile более динамичной и добавить возможность управления, например, уведомлениями и т.д… F-NAV может сделать это и многое другое…

Шапка

Она скрывает гамбургер, меню пользователя, поиск и чат и добавляет кнопку меню профиля (аватар), которая содержит содержимое вкладки профиля по умолчанию из меню пользователя.

Настройки

Также здесь есть настройка, позволяющая добавлять пользовательские элементы перед пунктом «Выйти».
Там есть три поля, в которые можно легко добавить пользовательские элементы.

Есть несколько настроек для показа/скрытия иконок шапки по умолчанию, что полезно, если вы не хотите размещать конкретную вкладку в F NAV, чтобы она отображалась в шапке.

Вкладки

Возможно связать разные функции с вкладками. Эти функции позволяют каждой вкладке динамически изменяться.

Screenshot 2024-12-13 at 13.06.14

Такие изменения включают:

Функции

home

  • переключает иконку вкладки «Домой» на левую стрелку на маршрутах темы, добавляя функцию «назад»
    Screenshot 2024-12-13 at 12.29.33
  • добавляет индикатор-точку для новых или непрочитанных тем
    Screenshot 2024-12-13 at 12.30.52

hamburger (открывает гамбургер-меню)


multi

multi tab

Вкладка «multi» автоматически меняется на вкладку сообщений, если чат не включен или пользователь отключил его в
настройках пользователя.

Пузырь уведомлений меняется в зависимости от срочности.

Срочные уведомления вкладки «multi» зеленые и выглядят так. :arrow_down_small:


Раскрыто

Личные сообщения всегда зеленые, но чат может быть синим, как в оригинале, например, для уведомления о непрочитанном сообщении в канале.

Раскрыто

Одно уведомление


message

  • добавляет кнопку сообщений с уведомлениями, и при нажатии на нее открывается модальное окно сообщений для быстрого просмотра

chat

  • добавляет кнопку чата с его функциями

notificationToRoute

  • если активен режим «Не беспокоить», иконка колокольчика меняется на иконку «колокольчик со слэшем», и появляется время окончания режима «Не беспокоить»
    Screenshot 2024-12-13 at 13.02.35

  • перенаправляет на страницу уведомлений профиля, минуя меню уведомлений

    • если есть уведомления, перенаправляет на /notifications?filter=unread
    • если уведомлений нет, перенаправляет на /notifications
    • если есть контент для проверки, появляется красный флаг и перенаправление на /review

notificationMenu

  • если активен режим «Не беспокоить», иконка колокольчика меняется на иконку «колокольчик со слэшем», и появляется время окончания режима «Не беспокоить»
    Screenshot 2024-12-13 at 13.02.35

  • открывает меню уведомлений


search

  • перенаправляет на контекстную страницу /search

Настройки

Я старался сделать настройки максимально простыми.
В них будет четыре поля.

  • name: Это просто для более легкого определения вкладки в настройках.
  • icon: Добавляет иконку на вкладку. Примечание: Если вы выберете функцию, могут быть иконки, которые нельзя переопределить с помощью этой настройки.
  • destination: Добавляет назначение для вашей пользовательской вкладки. Примечание: Если вы выберете функцию, она будет обрабатывать назначение, поэтому вы можете оставить это поле пустым. Компонент автоматически преобразует назначения /my/... в /u/username/..., чтобы статус активности вкладок мог добавляться правильно.
  • function: Выберите функцию для вкладки.

Администраторы могут просто создавать/удалять/изменять вкладки и выбирать одну из функций или добавлять пользовательское назначение для вкладки.
Функции :arrow_down_small:

Например, добавление вкладки создания темы будет выглядеть просто так.


Screenshot 2024-12-12 at 18.55.50


Кредиты: Discourse Tab Bar for Mobile и спасибо всем за обратную связь в теме F NAV - Theme component concept. :heart:

22 лайка

Это отлично, и это действительно должно быть по умолчанию — так я буду реже тянуться к самому верху экрана своего :mobile_phone:.

Мне не нравится заметный переключатель «Онлайн», так как, думаю, большинству людей не нужно часто менять эту настройку. Скорее всего, большинство пользователей один раз навсегда отключают своё присутствие в сети, поэтому непонятно, зачем постоянно напоминать о существовании этой опции.

Вы, очевидно, создали множество очень полезных компонентов темы для модификации навигации. Я бы хотел использовать некоторые из них, но насколько вы видите себя поддерживающим всё это в долгосрочной перспективе? Я склонен использовать только официальные компоненты темы, чтобы обеспечить надёжность.

Я не нашёл официальный компонент темы для оригинальной панели вкладок, поэтому изучу его.

7 лайков

Спасибо за компонент, @don. Я здесь уже давно, вы действительно проделываете отличную работу.

3 лайка

Это должно быть ошибкой.

2 лайка

Спасибо, это связано с темой FKB. Я обновлю тему.

3 лайка

Вот исправление: Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub
Пожалуйста, обновите тему FKB и включите этот новый параметр.
Скриншот 14.12.2024 в 9.17.02

3 лайка

Привет, @don, как использовать иконки fa-regular, как на картинке? Я провел небольшое исследование, но не смог найти никакой информации о том, как это сделать после перехода на Fontawesome 6.

3 лайка

Привет :waving_hand: Это должно работать с far-bell. Я планировал сделать иконку регулярной, а затем закрашенной при активной вкладке. Проверю это, но, если я правильно помню, иконка дома доступна только в закрашенном виде в бесплатной версии. :thinking:

1 лайк

Спасибо, я решил свою проблему. @Don

1 лайк

Значок «Домой», который превращается в кнопку «Назад» при открытии темы. Зачем? Ведь можно использовать свайп (как при возврате на главный экран Хабба :smirking_face:). Мои пользователи довольно сильно жаловались на это, потому что теперь им приходится тянуться к логотипу (проблема первой страны, я знаю :joy:)

2 лайка

Думаю, мы можем добавить это в функцию, которую я только что придумал. Нужно лишь решить, где её разместить. Это может быть отдельная вкладка, которую можно добавить в навигацию, отображаемую только в DiscourseHub.

1 лайк

На самом деле DiscourseHub отлично работает с жестом свайпа вниз. Я просто не знал об этом.

Вопрос с кнопкой «Домой/Назад» более важен, так как мне приходится объяснять это другим.

3 лайка

Кнопка «Назад» активна только в темах, чтобы упростить навигацию между ними. Она связана с функцией «Домой», которую можно отключить; в этом случае останется пункт назначения «Домой».

Настройки пока нельзя переставлять, и если у вас уже есть выбранное значение, его нельзя очистить. Однако я добавил новую функцию none, которая ведёт себя так же, как если бы поле функции осталось пустым. Таким образом, вам не придётся воссоздавать все вкладки навигации заново.

Вот как это должно выглядеть, если вы хотите отключить кнопку «Назад» и везде оставить «Домой».

3 лайка

Всегда фантастика. Я должен согласиться, основываясь на быстром предварительном просмотре в конструкторе тем. Это действительно должно быть включено в ядро с переключателем для классической мобильной версии и улучшенной мобильной версии.

Я вижу, как это открывает возможности, такие как более длинный баннер с логотипом сайта. Более чистый вариант для дополнительных элементов в заголовке, таких как локальный селектор и многое другое. Очень-очень приятно, как всегда, Дон!

3 лайка

Значок карандаша и разделы навигации сворачиваются вместе с панелью навигации.

1 лайк
4 лайка

Привет, Дон. Спасибо за твою отличную работу. Мне нравится.
У меня есть вопрос. После нажатия на «гамбургер» или значок уведомлений иногда мне не нужно предпринимать никаких дополнительных действий. В таком случае мне нужно вернуться к списку статей. Однако закрыть меню «гамбургер» или уведомления можно только кликнув по пустому пространству. Это может привести к случайному нажатию на аватар или кнопку ответа.

Вот ещё один простой пример: когда я нахожусь на странице чата и хочу вернуться на главную, мне приходится нажимать кнопку «Назад» в левом верхнем углу, что на мобильных устройствах не очень удобно.

Так вот, возможно ли сделать так, чтобы меню всегда оставалось вверху?

Надеюсь, моё описание понятно.

2 лайка

Привет, Макс :wave:

Можешь сделать скриншот или записать экран с проблемой?

На странице /chat мы скрываем навигацию и используем стандартный заголовок чата. Я не уверен, что стоит отображать навигацию на странице чата, так как это может вызвать проблемы в разных браузерах, но я проверю это.

1 лайк

Привет, Дон :smiley:
Спасибо за ваш ответ.
Пожалуйста, ознакомьтесь со скриншотами ниже. Первые два скриншота показывают, что при попытке закрыть «гамбургер» или уведомления можно нажать только на желтую область. Проблема в том, что легко случайно нажать на статью или аватар.

Третий скриншот показывает, что мне приходится нажимать кнопку «Назад» в левом верхнем углу, чтобы выйти из интерфейса чата.



1 лайк

Спасибо за уточнение :blush:

Да, я понял. Проблема возникает не из-за компонента, а из-за системной настройки: если на устройстве включена опция «Уменьшение движения». У вас она включена?

Когда «Уменьшение движения» отключено, элемент header-cloak (тёмная область за меню) блокирует клики.

Когда я включаю эту настройку на своём устройстве, она больше не блокирует клики пользователя.

Если это ваш случай, вы также можете безопасно закрывать меню с помощью свайпов.

Кажется, я где-то создавал тему по этой проблеме :thinking:

Это стандартный заголовок чата.

Я проверю, можно ли там тоже включить навигацию.

3 лайка