Rhidian
(Rhidian Bramley)
1
このテーマコンポーネントの機能は、バージョン 2.8.0 以降で Discourse コアに追加されました。それ以降のバージョンにアップグレードした後に引き続き使用しても、ほとんど役に立ちません！
プライベートメッセージの投稿を吹き出し風に変更し、トピックと区別しやすくするためのテーマコンポーネントを作成しました。
設定:
- バブルの背景色を、テーマのプライマリー、セカンダリー、ターシャリーカラー、またはその他の一般的な色から選択できます。
- 送信したメッセージと受信したメッセージを区別するために、異なる色を選択できます。
- バブルの背景の透明度を設定できます（パーセンテージが大きいほど色が濃くなります）。
- メッセージバブルにボックスシャドウを表示するかどうかを選択できます。
- トピック返信ボタンと区別するために、メッセージ返信ボタンにテキストを付加するオプションがあります。
さまざまな色から選択するか、テーマに合わせるためにパレットから色を選択できます。また、色や背景に対して相対的にバブルの背景透明度を設定することも可能です。
「いいね！」 70
jord8on
(Jordan)
2
これ、めっちゃかっこいいですね、@Rhidian!!!
プラグインに触れたことがないので、ちょっと気になったことがあって…
システムカラーだけでなく、透明度付きの十六進カラーコード（hex code）も指定できるようにすることは可能でしょうか？もしそれが結構な手間がかかるなら、問題ありません。単に気になっただけです。
影や他の CSS のスタイルを変更したい場合はどうすればよいでしょうか？GitHub の仕組みや、それがどのように動作するかについては詳しくないのですが、テーマコンポーネントにコピーする前に、あなたの .git リポジトリを少し見てみました。CSS の記述はできます。あなたのプラグインをコピーして、CSS ファイルを編集し、希望するスタイルを反映させた新しいテーマコンポーネントとしてアップロードすることはできるでしょうか？
プラグインの修正方法に関する手順を教えていただければ幸いです。あるいは、フロントエンドで CSS オーバーライドを行うことも考えられます。パフォーマンスの観点から、どちらの方が優れているでしょうか？
改めて… 本当にありがとうございます。DM と通常のトピックを区別するための、まさに探していた解決策です！
「いいね！」 4
Rhidian
(Rhidian Bramley)
3
@jord8on さん、ありがとうございます。このようなフィードバックをいただけて大変嬉しいです。
ドロップシャドウをカスタマイズ可能な設定オプションとして実装します。
独自の CSS の作成・編集については簡単です。コンポーネントを読み込んだ後、コンポーネント設定の「Custom CSS/HTML」セクションをクリックしてください。
CSS シートを編集し、保存をクリックするだけです。これらはあなた独自のカスタマイズです。これらを共有して、すべてのユーザーが恩恵を受けられるようにコンポーネントに組み込みたい場合は、Discourse Meta のこのトピックに CSS を投稿するだけでかまいません。あるいは、より大規模な変更を加える場合は、長期的な目標として GitHub でのプルリクエストの方法や、リポジトリのフォーク方法を学ぶことをお勧めします。
「いいね！」 3
jord8on
(Jordan)
4
@Rhidian さん、ありがとうございます！！！
これは、フォーラムの標準トピックとダイレクトメッセージ（DM）を明確に区別するための、とてもシンプルな解決策ですね。
直近でメンバーに感想を聞いてみたところ、とても喜んでくれました。アイデアも実行も素晴らしいと絶賛されていたので、そのお礼を伝えさせてください！！
「いいね！」 6
Rhidian
(Rhidian Bramley)
26
このテーマコンポーネントを更新しました。これで、以下のいずれかを使用して独自の色を入力できるようになりました。
- HTML 色名（black、white、maroon、red、purple、green、lime、olive、yellow、navy、blue、teal、aqua）
- HTML カラーコード（#000000 black、#FFFFFF white など、または短縮コード例：#CCC）
- テーマ色名（primary、secondary、tertiary）
バブル色と対比させるために、メッセージテキストの色も同じ方法で独自に設定できます。
透明度設定により、バブル色を背景色と混ぜ合わせることができ、テーマの色設定（例：ライトテーマとダークテーマ）に応じて色が変わるように調整できます。
この更新は下位互換性があります。この機能を利用するには、テーマ設定にある「更新を確認」ボタンを使用してください。
「いいね！」 9
ggurbet
(Gökhan Gurbetoğlu)
54
カスタム CSS でボーダーを無効にし、わずかな色の変更のみを加えたところ、とても見栄えが良くなりました。ボーダーを調整できるオプションや、オン/オフの切り替え機能があればさらに素晴らしいと思います。
「いいね！」 1
Rhidian
(Rhidian Bramley)
55
@ggurbet さん、こんにちは。スクリーンショットを投稿して、変更した CSS を共有していただけますか？
ggurbet
(Gökhan Gurbetoğlu)
56
@Rhidian さん、境界線が邪魔だったので削除しました。私の色設定は無視してください 
ライトテーマのスクリーンショット：
ダークテーマのスクリーンショット：
これを Common > CSS に追加しました：
// 個人メッセージバブルコンポーネント - 境界線なし
.archetype-private_message .topic-body .contents {
border: none !important;
}
「いいね！」 3
Rhidian
(Rhidian Bramley)
58
とても素敵ですね。気に入りました 
ボーダーを削除するオプションと四級オプションを追加し、三級のスペルを修正しました。
@ggurbet @debryc ありがとうございます。
「いいね！」 7
ggurbet
(Gökhan Gurbetoğlu)
59
お忙しい中、迅速に対応いただきありがとうございます！
ところで、ご覧の通りコンポーネントを2回インストールし、ダークテーマ用には暗い色を、ライトテーマ用には明るい色を設定しました。カスタムCSS色を使用したい場合、これ以外の方法はないと考えています。
また、小さな提案ですが、現在リプライボタンの末尾にテキストを追加できるようになっていますが、トルコ語のように動詞が文の末尾に来る言語では、先頭に追加する方がより自然です。
Rhidian
(Rhidian Bramley)
60
はい、それは良い回避策ですね。Discourseでテーマやコンポーネントのローカル変更機能を廃止する予定の変更が、あなたの実装に影響を与えることはありますか？ここでの有用性は明らかです。
「いいね！」 1
ggurbet
(Gökhan Gurbetoğlu)
61
いいえ、そうではありません。ほんの少しの CSS 修正で済みます。
Rhidian
(Rhidian Bramley)
62
これはベータ版リリースに関するお知らせを指しています。CSS は引き続き変更可能ですが、Git リポジトリとリンクされていない新しいテーマコンポーネントを作成し、すべてのコードをコピーする必要があります。あなたはそれをしましたか？それとも、コンポーネント内の CSS を直接編集するという簡単な方法を選びましたか？
これは私にとって問題のように思えます。テーマをその場で編集できる機能を維持したいと考えています。それは間違いなくテーマやコンポーネントの開発に役立ちます。
「いいね！」 1
ggurbet
(Gökhan Gurbetoğlu)
63
「common sub-theme」というローカルコンポーネントがあり、そこで他のコンポーネント向けの編集を行っています。このサブテーマ内で、他のコンポーネントのクラスや要素などをターゲットにしています。コンポーネント作成者がクラス名やIDなどを変更しない限り、問題なく動作します。ちなみに、現在は境界線の削除も含まれているため、Personal Message Bubbles コンポーネントについてはサブテーマでの変更は不要になりました。
「いいね！」 1
downey
(Michael Downey)
64
こんにちは、この楽しいテーマコンポーネントを提供していただきありがとうございます。
潜在的なバグ: 「末尾に追加する」テキストオプションは、メッセージトピックの下部にある文字列の前にスペースを含んでいますが、エディタウィンドウにはそのスペースが含まれていません。以下をご参照ください：
「いいね！」 2
ggurbet
(Gökhan Gurbetoğlu)
65
@Rhidian、返信ボタンにテキストを先頭に追加するオプションも追加していただけますか？いくつかの言語（トルコ語など）では、動詞の頭に何らかのテキストを追加することが理にかなっています。
「いいね！」 1
Mohammad1
(Mohammad)
66
素晴らしいコンポーネントですね！トピック内の実際の投稿でも同様のものがありますか？つまり、投稿をメッセージバブルのように見せるコンポーネントのことです！
Rhidian
(Rhidian Bramley)
67
返信ボタンの前にテキストを追加するオプションを追加しました。これにより、返信テキストの前にある SVG の返信矢印も非表示になります。
「いいね！」 1
