Управление видимостью уведомлений в сообщениях

:information_source: Краткое описание Настройка видимости и стиля уведомлений о сообщениях в зависимости от типа и возраста
:hammer_and_wrench: Репозиторий GitHub - moin-Jana/post-notice-visibility-control: Customize visibility and style of post notices by type and age · GitHub
:question: Руководство по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

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

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

На скриншотах показаны примеры того, как разные типы уведомлений могут выглядеть в новых сообщениях (слева) и старых сообщениях (справа):

Пример конфигурации 1
"custom_new": "highlighted"
"custom_old": "highlighted"
"custom_highlight_color": "var(--danger-low-mid)"

"new_user_new": "highlighted"
"new_user_old": "visible"
"new_user_highlight_color": "var(--success-low)"

"returning_user_new": "highlighted"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--primary-200)"

Пример конфигурации 2
"custom_new": "highlighted"
"custom_old": "visible"
"custom_highlight_color": "var(--gold)"

"new_user_new": "visible"
"new_user_old": "hidden"
"new_user_highlight_color": "var(--tertiary-low)"

"returning_user_new": "visible"
"returning_user_old": "hidden"
"returning_user_highlight_color": "var(--tertiary-low)"

Для каждой комбинации типа уведомления и его возраста вы можете выбрать, должно ли уведомление быть выделено, видимым (без выделения) или скрытым. Если вы выберете «выделено», вы можете дополнительно задать пользовательский цвет фона.

Рекомендуется использовать переменную цвета, например var(--quaternary-low). Эти переменные ссылаются на цвета из активной палитры, поэтому они автоматически адаптируются при переключении пользователя между разными палитрами (например, светлой и тёмной темой). Это делает их более гибким вариантом, чем жёстко заданные цвета. Хотя большинство палитр показывают лишь несколько базовых цветов, Discourse генерирует оттенки этих цветов, которые также можно использовать. Вы можете изучить множество доступных переменных цвета с помощью стилевого руководства, которое можно включить через настройку сайта styleguide enabled. Альтернативно, вы можете проверить свой сайт в браузере — откройте инструменты разработчика, перейдите на вкладку «Стили» и прокрутите вниз, чтобы увидеть все доступные переменные цвета.

Также можно использовать шестнадцатеричные значения, например #EE8888, значения RGB, например rgb(255, 200, 200), или имена цветов, например red.

Если цвет не указан, компонент использует значение по умолчанию var(--tertiary-low). Настройки по умолчанию компонента повторяют стандартное поведение Discourse, поэтому простое включение компонента ничего не изменит, пока вы не настроите его.

Количество дней, после которых уведомление о сообщении считается «старым», определяется настройкой сайта old post notice days. Это применимо ко всем трём типам уведомлений.
:warning: Важно: Возраст определяется по дате создания сообщения, а не по дате добавления уведомления.
Вы можете временно установить значение 0, чтобы легко просмотреть, как уведомления будут выглядеть в их «старом» состоянии.

12 лайков

Уведомления о старых постах больше не отображаются в последней версии Discourse, что означает, что их нельзя стилизовать через CSS. В результате все настройки _old больше не имеют никакого эффекта.

С последними обновлениями Discourse класс old, который компонент использовал для применения разных стилей к новым и старым уведомлениям, был удалён. Уведомления о постах для новых и возвращающихся пользователей теперь автоматически скрываются по истечении срока, заданного в настройке «old post notice days», тогда как официальные уведомления остаются постоянно видимыми и выделенными.

В результате этот компонент стал в значительной степени устаревшим. Единственные оставшиеся возможности настройки связаны с общими цветовыми параметрами для уведомлений о постах. Их можно легко изменить с помощью CSS, как показано ниже:

.post-notice.custom {
    background-color: var(--danger-low-mid);
}
.post-notice.new-user {
    background-color: var(--success-low);
}
.post-notice.returning-user {
    background-color: var(--primary-200);
}

Если вы хотите убрать фоновое выделение для определённого типа уведомления, просто используйте background-color: unset;.

2 лайка