カラフルなカテゴリー

:discourse2: 概要 Colorful Categories は、カテゴリのトピック一覧ページやトピック内において、各カテゴリの色をより多くの場所で使用します。
:eyeglasses: プレビュー Discourse Theme Creator でプレビュー
:hammer_and_wrench: リポジトリリンク https://github.com/discourse/discourse-colorful-categories
:open_book: Discourse テーマは初めて? Discourse テーマの利用に関する初心者ガイド

このテーマコンポーネントをインストール

機能

Colorful Categories は、カテゴリのトピック一覧ページやトピック内において、各カテゴリの色をより多くの場所で使用します。具体的には、ヘッダー、返信/作成ボタン、トピックタイムライン、およびコンポーザーです。

コンポーザーの色は、選択されたカテゴリに基づいて変更されます。

Kapture 2021-10-27 at 11.47.15

設定

上記の色の変更は、すべてテーマの設定から無効にできます。

名前 説明
use category color in composer 無効にすると、デフォルトのコンポーザーの色を使用します
use category color in header 無効にすると、デフォルトのヘッダーの色を使用します
use category color in timeline 無効にすると、デフォルトのトピックタイムラインの色を使用します
use category color in buttons 無効にすると、デフォルトのボタンの色を使用します

開発ノート

カテゴリの色を 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 プランで利用可能です。

「いいね!」 41

このテーマコンポーネントは、自分がどのカテゴリにいるのかを非常に明確にするので、とても気に入っています。このテーマコンポーネントをインストールすると、一部のボタンの間隔がずれるようです。

テーマコンポーネントあり:

テーマコンポーネントなし:

「いいね!」 2

@awesomerobot これは本当にクールなコンポーネントで、今はあまり注目されていないようです!

昨日、Discourse for Teams インスタンスでこのようなものが役立つ可能性のある状況に遭遇しました。(Discourse for Teams…チーム…もし聞いていたら、このテーマコンポーネントを追加してください!)

  • 特定のグループにのみアクセスが制限されているカテゴリがいくつかあります
  • 機密情報が共有される可能性がある
  • 不注意な場合、間違ったカテゴリを選択してしまい、あまり制限のないカテゴリに気づかずに投稿してしまう可能性があります
    • さらに悪いことに、Slackへの自動投稿トリガーなどがある場合、投稿を移動する機会があまりないうちにコンテンツが流出してしまう可能性があります
      • はい、これは私たちにも起こりました

コンテンツがどこへ行くのかについての強力な視覚的インジケーターがあれば、非常に役立ちます。

さらに進んで、このプラグイン(またはその別のバージョン)を「カテゴリコンテキスト」に関するものにすることを提案するかもしれません。たとえば、カテゴリ名がアクションボタンにも追加されるという追加機能も考えられます。以下を参照してください。

「いいね!」 2

この隠れた名品をありがとうございます。今のところ気に入っています @awesomerobot

しかし、メニューヘッダーに小さな問題があります。新しいトピックを作成する カテゴリの色と同じように、ヘッダーの色が変わってしまいます。異なるテーマを試しましたが、すべて同じ問題が発生しました。

カテゴリの色だけを変更し、メニューヘッダーの色はそのままにしておく方法はありますか?
Link

「いいね!」 1

カテゴリの色が一部のカテゴリで取得されなかった(コンソールに記録された)インスタンスで作業しました。共通の原因を見つけるのにしばらく時間がかかりましたが、カテゴリ設定ページの設定 no subcategoriesall topics の代わりに設定されていたことが原因のようです。

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

この設定を選択すると、カテゴリのURLに /none が追加されます。これが色の選択に干渉しているようです。

本日追加されたもので、とても良い感じです:smiley:

しかし、トピックをクリックするたびに、カテゴリ名の横に白い四角が表示され続けました。その後、それがカテゴリの色であることがわかりましたが、ヘッダー全体にカテゴリの色が表示されている場合、この四角が表示されても無意味に思えます。

TCなし image
TCあり image

(TC = テーマコンポーネント)

「いいね!」 2

皆さん、おはようございます。今日のアップデートの後、カテゴリ+トピック表示でカテゴリの境界線の色が壊れてしまいました。誰か確認してもらえますか?

image

「いいね!」 1

こちらもマテリアルテーマで体験しています。

これはこのコンポーネントとは無関係であり、修正されました。

カテゴリピッカーの追加はどうですか?

いくつか購読済みのもの(信頼レベルでも達成可能)で有効にしたいです :slight_smile:

メッセージで、トピックへの返信ボタンの kbd の色とタイムラインハンドルが背景と同じ色になっていることに気づきました。どちらも白地に白です。

コンソールにも非推奨の通知があります。

[THEME 5601 ‘Colorful categories’] 非推奨通知: discourse-common/lib/get-owner から getOwner をインポートすることは非推奨です。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