パーソナルメッセージバブル

[Rhidian (Rhidian Bramley)]

このテーマコンポーネントの機能は、バージョン 2.8.0 以降で Discourse コアに追加されました。それ以降のバージョンにアップグレードした後に引き続き使用しても、ほとんど役に立ちません！

プライベートメッセージの投稿を吹き出し風に変更し、トピックと区別しやすくするためのテーマコンポーネントを作成しました。

設定:

• バブルの背景色を、テーマのプライマリー、セカンダリー、ターシャリーカラー、またはその他の一般的な色から選択できます。
• 送信したメッセージと受信したメッセージを区別するために、異なる色を選択できます。
• バブルの背景の透明度を設定できます（パーセンテージが大きいほど色が濃くなります）。
• メッセージバブルにボックスシャドウを表示するかどうかを選択できます。
• トピック返信ボタンと区別するために、メッセージ返信ボタンにテキストを付加するオプションがあります。

さまざまな色から選択するか、テーマに合わせるためにパレットから色を選択できます。また、色や背景に対して相対的にバブルの背景透明度を設定することも可能です。

	リポジトリ	github.com/naidihr/discourse-message-bubbles
	Discourse テーマ初心者向け	Discourse テーマの利用に関する初心者ガイド

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

[jord8on (Jordan)]

This is soooooo cool, @Rhidian!!!

I’m curious about something because I’ve never messed with plugins before…

Is it possible to allow a hex code with opacity, instead of just allowing system colors? No problem if that’s a bunch of extra work. Just curious.

What if I wanted to change the styling? of the shadow or other CSS. I’m not super savvy with Github and how all of that works, but I looked in your .git repository before copying it into my theme components. I do know how to write CSS. Can I make a copy of your plugin and then tweak the CSS file that you have and then upload this a new theme component with the styling that I want?

If you could point me to any instruction on how to modify a plugin that would be awesome. Or, I suppose I could just do a CSS override, on the front end. Is one option better than the other in terms of performance?

Again… Thank you so much for this… it’s just the solution I was looking for to differentiate DM’s from regular topics!

[Rhidian (Rhidian Bramley)]

Thank you @jord8on . It’s great to get feedback like this.

I’ll make Drop shadow customisable as a setting option.

Regarding creating/editing you own CSS it’s easy. Load the component then click the Custom CSS/HTML section on the component settings.

Simplly edit the CSS sheet and click save. These are your own customisations. If you want to share them and incorporate them into the component for everyone to benefit you can simply post up the CSS to this topic in discourse meta - or as a longer term objective learn how to do pull requests in Github and/or fork the repository if you are making making more substantial changes.

[jord8on (Jordan)]

Thank you @Rhidian!!!

This is such a simple solution to make DM’s significantly distinguished from the standard topics on our forum.

I just asked a member what they thought of it and they were soooo happy to have it. They complimented the idea and the execution, so I’m just passing that along to you!!

[Rhidian (Rhidian Bramley)]

I have updated this theme component so you can now enter your own colors using either

• html color names ( black, white, maroon, red, purple, green, lime, olive, yellow, navy, blue, teal, aqua)
• html color codes (#000000 black, #FFFFFF white etc. or short codes e.g. #CCC)
• theme color names (primary, secondary, tertiary)

You can also enter your own message text colors in the same way to contrast with the bubble color.

The opacity setting allows you to blend the bubble color with the background, so that the color will change with your theme color settings - e.g. for Light and Dark themes.

This update is backwards compatible. To access this feature use the Check for Updates button on your theme settings.

[jord8on (Jordan)]

Fantastic work on this @Rhidian!

[ggurbet (Gökhan Gurbetoğlu)]

カスタム CSS でボーダーを無効にし、わずかな色の変更のみを加えたところ、とても見栄えが良くなりました。ボーダーを調整できるオプションや、オン/オフの切り替え機能があればさらに素晴らしいと思います。

[Rhidian (Rhidian Bramley)]

@ggurbet さん、こんにちは。スクリーンショットを投稿して、変更した CSS を共有していただけますか？

[ggurbet (Gökhan Gurbetoğlu)]

@Rhidian さん、境界線が邪魔だったので削除しました。私の色設定は無視してください

ライトテーマのスクリーンショット：

ダークテーマのスクリーンショット：

これを Common > CSS に追加しました：

// 個人メッセージバブルコンポーネント - 境界線なし
.archetype-private_message .topic-body .contents {
    border: none !important;
}

[debryc (Deborah Chang)]

素晴らしいですね！

ご要望

• 四元色も利用可能にしていただけませんか？
• 手順に綴りの間違いを見つけました。Tertiary が teriary と表記されています。

[Rhidian (Rhidian Bramley)]

とても素敵ですね。気に入りました

ボーダーを削除するオプションと四級オプションを追加し、三級のスペルを修正しました。

@ggurbet @debryc ありがとうございます。

[ggurbet (Gökhan Gurbetoğlu)]

お忙しい中、迅速に対応いただきありがとうございます！

ところで、ご覧の通りコンポーネントを2回インストールし、ダークテーマ用には暗い色を、ライトテーマ用には明るい色を設定しました。カスタムCSS色を使用したい場合、これ以外の方法はないと考えています。

また、小さな提案ですが、現在リプライボタンの末尾にテキストを追加できるようになっていますが、トルコ語のように動詞が文の末尾に来る言語では、先頭に追加する方がより自然です。

[Rhidian (Rhidian Bramley)]

@ggurbet

余談ですが、ご覧の通りコンポーネントを2回インストールし、ダークテーマにはダークカラー、ライトテーマにはライトカラーを設定しています。カスタムCSSカラーを使用したい場合、他に方法はないと思います。

はい、それは良い回避策ですね。Discourseでテーマやコンポーネントのローカル変更機能を廃止する予定の変更が、あなたの実装に影響を与えることはありますか？ここでの有用性は明らかです。

[ggurbet (Gökhan Gurbetoğlu)]

いいえ、そうではありません。ほんの少しの CSS 修正で済みます。

[Rhidian (Rhidian Bramley)]

これはベータ版リリースに関するお知らせを指しています。CSS は引き続き変更可能ですが、Git リポジトリとリンクされていない新しいテーマコンポーネントを作成し、すべてのコードをコピーする必要があります。あなたはそれをしましたか？それとも、コンポーネント内の CSS を直接編集するという簡単な方法を選びましたか？

これは私にとって問題のように思えます。テーマをその場で編集できる機能を維持したいと考えています。それは間違いなくテーマやコンポーネントの開発に役立ちます。

Restrict editing of remote themes

For quite a while, best practice has been to avoid editing themes installed from a remote Git repository locally on Discourse. Any changes to theme code or uploads get wiped out when updating the theme from the remote repo. In this commit, we’ve removed the ability to locally edit a remote theme and are now enforcing this best practice in Discourse. What happens if I have a remote theme with local changes? Nothing at this point. Your theme stays as is until you remove it or update it from re…

[ggurbet (Gökhan Gurbetoğlu)]

「common sub-theme」というローカルコンポーネントがあり、そこで他のコンポーネント向けの編集を行っています。このサブテーマ内で、他のコンポーネントのクラスや要素などをターゲットにしています。コンポーネント作成者がクラス名やIDなどを変更しない限り、問題なく動作します。ちなみに、現在は境界線の削除も含まれているため、Personal Message Bubbles コンポーネントについてはサブテーマでの変更は不要になりました。

[downey (Michael Downey)]

こんにちは、この楽しいテーマコンポーネントを提供していただきありがとうございます。

潜在的なバグ: 「末尾に追加する」テキストオプションは、メッセージトピックの下部にある文字列の前にスペースを含んでいますが、エディタウィンドウにはそのスペースが含まれていません。以下をご参照ください：

[ggurbet (Gökhan Gurbetoğlu)]

@Rhidian、返信ボタンにテキストを先頭に追加するオプションも追加していただけますか？いくつかの言語（トルコ語など）では、動詞の頭に何らかのテキストを追加することが理にかなっています。

[Mohammad1 (Mohammad)]

素晴らしいコンポーネントですね！トピック内の実際の投稿でも同様のものがありますか？つまり、投稿をメッセージバブルのように見せるコンポーネントのことです！

[Rhidian (Rhidian Bramley)]

返信ボタンの前にテキストを追加するオプションを追加しました。これにより、返信テキストの前にある SVG の返信矢印も非表示になります。