Цветные категории

:discourse2: Краткое описание Colorful Categories использует цвета каждой категории в большем количестве мест, когда вы находитесь в списке тем категории или внутри темы.
:eyeglasses: Предпросмотр Предпросмотр в конструкторе тем Discourse
:hammer_and_wrench: Ссылка на репозиторий https://github.com/discourse/discourse-colorful-categories
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

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

Возможности

Colorful Categories использует цвета каждой категории в большем количестве мест, когда вы находитесь в списке тем категории или внутри темы: в заголовке, кнопках ответа/создания, временной шкале темы и в редакторе.

Цвета редактора будут меняться в зависимости от выбранной категории:

Kapture 2021-10-27 at 11.47.15

Настройки

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

Название Описание
использовать цвет категории в редакторе отключите, чтобы использовать цвета редактора по умолчанию
использовать цвет категории в заголовке отключите, чтобы использовать цвета заголовка по умолчанию
использовать цвет категории во временной шкале отключите, чтобы использовать цвета временной шкалы темы по умолчанию
использовать цвет категории в кнопках отключите, чтобы использовать цвета кнопок по умолчанию

Примечания для разработчиков

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

  --category-color
  --category-text-color

А редактор получит:

  --composer-category-text-color
  --composer-category-color

Их можно использовать где угодно в вашем собственном CSS, например:

body {
  background: var(--category-color); 
}

Существуют некоторые значения по умолчанию, когда категория отсутствует, которые вы можете изменить в своём CSS:

:root {
  --composer-category-text-color: var(--secondary);
  --composer-category-color: var(--tertiary);
  --category-color: var(--secondary);
  --category-text-color: var(--primary-low-mid);
}

:discourse2: Размещено у нас? Компоненты тем доступны для использования в наших тарифах Standard, Business и Enterprise.

42 лайка

Мне очень нравится этот компонент темы, который делает категорию, в которой вы находитесь, предельно ясной. Похоже, что при установке этого компонента темы отступы на некоторых кнопках смещаются.

С компонентом темы:

Без компонента темы:

2 лайка

@awesomerobot Это действительно крутой компонент, и сейчас он, похоже, недооценен!

Вчера мы столкнулись с ситуацией, когда подобные решения могли бы оказаться полезными в нашем экземпляре Discourse for Teams. (Discourse for Teams… команда… если вы это читаете, пожалуйста, добавьте этот компонент темы!)

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

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

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

2 лайка

Спасибо большое за эту скрытую жемчужину. Мне пока очень нравится @awesomerobot

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

Есть ли способ изменить цвет только для категорий, но сохранить цвет заголовка меню?
Ссылка

1 лайк

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

Screenshot from 2022-06-21 23-11-55

Выбор этой настройки добавляет /none в URL категории. И это, похоже, мешает выбору цвета.

Только что добавил это сегодня, выглядит очень хорошо :smiley:

Однако каждый раз, когда я нажимал на тему, рядом с названием категории появлялся белый квадрат. Затем я понял, что это цвет категории, но показывать этот квадрат кажется бессмысленным, если весь цвет категории отображается в заголовке.

Без TCimage
С TC image

(TC = компонент темы)

2 лайка

Доброе утро, друзья! После сегодняшнего обновления что-то сломало цвета границ категорий в представлении «категории + темы». Кто-нибудь может это подтвердить?

image

1 лайк

У меня тоже такая проблема с темой Material.

Это не было связано с данным компонентом и уже исправлено:

А как насчет добавления выбора категорий?

Я хочу включить его для нескольких подписанных (это также можно реализовать через уровни доверия) :slight_smile:

Я заметил в сообщениях, что цвет кнопки ответить на тему и маркера временной шкалы совпадает с фоном. Оба элемента белые на белом.

Также в консоли есть предупреждение об устаревании:

[THEME 5601 ‘Цветные категории’] Предупреждение об устаревании: Импорт getOwner из discourse-common/lib/get-owner устарел. Используйте import { getOwner } from '@ember/application', или если вам всё ещё нужен шим для обратной совместимости, используйте import { getOwnerWithFallback } from 'discourse-common/lib/get-owner';. [устарело в Discourse 3.2] [id устаревания: discourse.get-owner-with-fallback]

Кроме того, переключатель боковой панели не меняет цвет, как иконка поиска.

image

2 лайка

Компонент, вероятно, требует обновления

3 лайка

Думаю, этот вариант подойдет :rocket:

Я работаю над директориями all-the-plugins и all-the-themes, чтобы заранее выявить затронутые темы и плагины. Мы продвигаемся в обновлении официальных версий с нашей стороны, а авторам сторонних плагинов с открытым исходным кодом, которые могут быть затронуты, отправил личные сообщения :writing_hand:

5 лайков