Быстрое меню ссылок профиля

:information_source: Краткое описание Меню быстрых ссылок профиля
:eyeglasses: Предпросмотр Theme Creator
:hammer_and_wrench: Репозиторий GitHub - VaperinaDEV/quick-profile-links-menu · GitHub
:question: Руководство по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Начинающее руководство по использованию тем Discourse

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

Привет :wave:

Навигация по настройкам пользователя может быть немного сложной, особенно для новых пользователей. Этот компонент темы позволяет добавить несколько важных ссылок на настройки на страницах пользователей и добавить вкладку пользовательского меню профиля…

Ссылки меню на страницах пользователя

Эта кнопка меню размещается в разделе кнопок управления профилем пользователя.



При нажатии на элемент меню происходит перенаправление на нужное поле. Для этого я добавил атрибут id для каждого поля, значение которого совпадает со значением атрибута [data-setting-name]. Теперь мы можем использовать это как якорь. Например: /u/username/preferences/profile#user-bio

Вы можете проверить это, щелкнув правой кнопкой мыши заголовок настройки и проверив id. В данном случае значение setting должно быть user-username. Эта настройка является необязательным полем, поэтому оставление его пустым приведет к перенаправлению на страницу, а не на настройку.


Настройка ссылок меню на страницах пользователя

С помощью настройки profile links вы можете добавить эти быстрые ссылки.

  1. иконка (иконка fontawesome) обязательно
  2. метка (текст ссылки) обязательно
  3. страница (на какую страницу вы хотите перейти)
    • account
    • security
    • profile
    • emails
    • notifications
    • tracking
    • users
    • interface
  4. настройка (на какое поле настройки вы хотите перейти) необязательно
Вот некоторые поля настроек, которые можно использовать.
  • account

    • user-username
    • user-avatar
    • user-email
    • user-associated-accounts
    • user-name
    • user-title
    • user-flair
    • user-data-export
  • profile

    • user-bio
    • user-timezone
    • user-location
    • user-website
    • user-profile-bg
    • user-card-bg
    • user-featured-topic
  • interface

    • user-theme
    • user-color-scheme
    • user-text-size
    • user-locale
    • user-home
    • user-other-settings

Пользовательская вкладка профиля в меню пользователя

С помощью настройки enabled user menu tab вы можете включить эту пользовательскую вкладку профиля. Эта вкладка является воссозданием вкладки профиля по умолчанию.

Что это делает?

  • скрывает вкладку профиля по умолчанию в меню пользователя
  • добавляет пользовательскую вкладку профиля в меню пользователя в верхней части
    • иконку вкладки можно изменить с помощью настройки user menu tab icon
  • добавляет пользовательские элементы под кнопкой настроек
    • эти элементы можно изменить с помощью настройки profile menu preference items
  • добавляет пользовательские дополнительные элементы перед кнопкой выхода
    • эти элементы можно изменить с помощью настройки profile menu extra items

Настройки пользовательской вкладки профиля

Для элементов настроек (которые находятся под кнопкой «Настройки») с помощью profile_menu_preference_items вы можете добавлять/удалять…

  1. иконка (иконка fontawesome) необязательно
  2. метка (текст ссылки) обязательно
  3. страница (на какую страницу вы хотите перейти)
    • account
    • security
    • profile
    • emails
    • notifications
    • tracking
    • users
    • interface
  4. настройка (на какое поле настройки вы хотите перейти) необязательно
Вот некоторые поля настроек, которые можно использовать.
  • account

    • user-username
    • user-avatar
    • user-email
    • user-associated-accounts
    • user-name
    • user-title
    • user-flair
    • user-data-export
  • profile

    • user-bio
    • user-timezone
    • user-location
    • user-website
    • user-profile-bg
    • user-card-bg
    • user-featured-topic
  • interface

    • user-theme
    • user-color-scheme
    • user-text-size
    • user-locale
    • user-home
    • user-other-settings

Дополнительные элементы можно разместить над кнопкой «Выйти» с помощью настройки profile menu extra items.

  1. иконка (иконка fontawesome) необязательно
  2. метка (текст ссылки) обязательно
  3. url (на какой URL вы хотите перейти) обязательно
17 лайков

Аллилуйя!!! Наконец-то кто-то взялся за это — на мой взгляд, это одна из самых больших проблем для новых пользователей Discourse.

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

5 лайков

Привет, @nathank :wave: Я считаю, что идея найти более быстрый путь отличная. Я добавил его во вкладку меню пользователя.

4 лайка

Вау! Отличная работа!

Но, я думаю, мы могли бы пойти дальше, изменив основную концепцию меню аватара: вместо Уведомлений (с профилем как второстепенной опцией) сделать акцент на Профиле + Уведомлениях (как, на мой взгляд, должно быть). У нас уже есть вкладка «Профиль», но она не очень заметна:

Вот как это можно реализовать:

  1. Использовать существующую вкладку «Профиль» в меню аватара.
  2. Переместить эту вкладку наверх (туда, где сейчас находится значок редактирования для быстрых ссылок профиля).
  3. Дать администратору возможность настраивать меню вкладки «Профиль».

Кажется, самый простой способ — просто скрыть существующую вкладку «Профиль» и воссоздать её с помощью TC. Кнопка «Выйти» — единственный сложный момент, и, возможно, потребуется немного кода (для этого уже существует TC). Разделы «Онлайн» и «Приостановить уведомления» тоже выглядят немного сложно.

Возможно, будет проще просто переставить вкладку и добавить/удалить из неё элементы. Что вы думаете?

4 лайка

Вау, отличная работа, Дон. Это отличное дополнение. Спасибо! :slight_smile: :clap:

2 лайка

У меня есть концепция чего-то подобного.
Кажется, хорошей идеей будет разделить настройки.

  1. Переместить профиль наверх
  2. Скрыть «Настройки»
  3. Убрать верхнюю границу

  1. По умолчанию изменить иконку вкладки «Настройки» на шестерёнку
  2. Добавить нижнюю границу для разделения с уведомлениями
  3. Добавить кнопку «Посмотреть все настройки» внизу (перенаправление на /my/preferences/account)

Что вы думаете?

4 лайка

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

2 лайка

Компоненты, которые вы разрабатываете, — это зрелище, от которого не оторвать взгляд каждый раз, ха-ха

5 лайков

Как найти правильное значение для setting?

Это действительно отличный способ всё организовать! Так всё остаётся чистым и простым.

Однако я (довольно настойчиво) предпочёл бы, чтобы всё было объединено в одной вкладке «Профиль», поскольку «Сводка» и «Активность» тоже являются ссылками, относящимися к профилю. В текущем виде это излишне разделяет ссылки, связанные с пользователем, на две вкладки.

Возможно ли интегрировать это в вкладку «Профиль»?

3 лайка

Вы можете найти его в исходном сообщении (OP), а также проверить, нажав правой кнопкой мыши на заголовок настройки и посмотрев здесь id. В данном случае значение setting должно быть user-username, но я думаю, что сделаю это необязательным полем, чтобы можно было перенаправлять на страницу без добавления настройки.


Небольшое обновление здесь:

Я согласен с вами.

  1. Я воссоздал вкладку «Профиль» и добавил туда быстрые ссылки.
  2. Скрыл стандартную вкладку «Профиль».
  3. Изменил иконку пользовательской вкладки на иконку пользователя.

Вот как это выглядит сейчас.


Я включил предпросмотр этого в конструкторе тем: https://discourse.theme-creator.io/theme/Don/quick-profile-links-test

4 лайка

Мне нравится этот план страницы, потому что я его использую. Ну а аватарка — это уже другая история.

Я боялся того самого «правой кнопки мыши» :joy: Просто я работаю почти исключительно с текстом, поэтому, полагаю, не открывал ноутбук с мая. Но ничего не поделать — это мой собственный выбор. У меня, правда, есть консоль на iPad. Я просто не знал, что именно искать. Теперь знаю. Спасибо!

2 лайка

Это будет довольно тесно, не так ли? Потому что в реальной жизни это выглядит так:

1 лайк

Я изменил отступы кнопок, уменьшил размер шрифта для подпунктов настроек и т.д., поэтому элементы теперь занимают меньше высоты, чем раньше. Также я добавил прокрутку для содержимого этой вкладки. Сейчас я объединю это с некоторыми обновлениями…

2 лайка

Обновление :tada:
Я также обновил исходный пост.

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

Пользовательская вкладка «Профиль» в меню пользователя

Управляется настройкой enabled_user_menu_tab.

  • Скрывает вкладку «Профиль» по умолчанию в меню пользователя.
  • Добавляет пользовательскую вкладку «Профиль» в меню пользователя в начало списка.
    • Иконку вкладки можно изменить с помощью настройки user_menu_tab_icon.
  • Добавляет пользовательские элементы под кнопкой «Настройки».
    • Эти элементы настраиваются через параметр profile_menu_preference_items.
  • Добавляет пользовательские дополнительные элементы перед кнопкой «Выйти».
    • Эти элементы настраиваются через параметр profile_menu_extra_items.

Настройки

  • Поле icon для profile_menu_preference_items и profile_menu_extra_items теперь является необязательным.
  • Поле setting для profile_links и profile_menu_preference_items теперь является необязательным, что означает возможность добавления ссылок для перенаправления на страницу, а не на настройки.


3 лайка

Это создаст огромную проблему с UX на мобильных устройствах и всех сенсорных экранах :man_shrugging:

Не хочу этого говорить, но тогда направление ведёт к версии только для десктопов.

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

3 лайка

Но что должно происходить при отключении вкладки «enabled user menu tab»? Я думал, что появится предыдущая вкладка с карандашом, но нет.

2 лайка

Полностью функция пользовательского меню с кастомным профилем. Если её отключить, то меню пользователя не будет ничего делать.

2 лайка

Да, когда включено. Но если отключено, это практически то же самое, что и отключение всего компонента :thinking:

Нет, если вы отключили это, то появится только меню быстрых ссылок на странице пользователей.

2 лайка