chapoi
1
チャットはまだ開発中のため、このコンポーネントは不安定でベータ版である可能性が高いです。フィードバックやバグレポートを歓迎します。
<!- 「repoName」と「repoURL」を自動インストールボタンに入力してください - →
プレビューの手順
- 必ず小さい画面で表示してください。
- 正しい表示を得るために、URLに
?mobile_view=1 を追加することを忘れないでください。
- チャットにアクセスするにはログインしてください。
説明
<!- このテーマ/コンポーネントを1〜2文で説明してください - →
バブルメッセージスタイルで、モバイルのみに適用されます。
<!- 詳細や設定の説明（該当する場合）を追加してください - →
設定
このコンポーネントには、上記に示した埋め込み背景が含まれています。これは設定で変更できます。SVGパターンを使用することをお勧めします。このウェブサイトには無料のものがあります。
バブルの色やパターンの背景色を選択したり、パターンを完全に無効にすることもできます。
ライトまたはダークの設定のいずれかを空にした場合、バブルはデフォルトで secondary と tertiary-low になります。背景色を空にした場合、デフォルトで primary-high になります。
背景として画像全体を使用することもできますが、モバイルビューポートに最適化されたサイズであることを確認する必要があります。
ダークモード
ダークモード用に異なる背景色とバブル色を選択できます。
背景パターンを変更する必要がないように、ダークモードでは背景ブレンドを使用しています。
最良の結果を得るには、ライトモードでうまく機能する明るい色のパターンを選択してください。そうすれば、ダークモードでも自動的にミュートされるはずです（ただし、すべてのデバイスでそうなるわけではありません。以下を参照）。
既知の問題
- 自分のメッセージのタイムスタンプは、他の人のメッセージとは異なる場所に配置されます。
ダークモードがない（まだ）- ダークモードは一部のデバイスで奇妙に動作します。
- スレッディングが有効になっているとうまく機能しません。
「いいね！」 22
fbpbdmin
(deepblue)
3
これはとても良いですね！
提案が1つあります。
全員が自分の背景画像を変更できるようにすることは可能ですか？
また、デフォルトの回路SVGは、iPhoneとAndroidのダークテーマで異なるようにレンダリングされます。
iPhoneでは、線の明るさがドキュメント投稿の例よりも明るく見えます。理由がわかりません…
「いいね！」 2
Jagster
(Jakke Lehtonen)
4
背景パターンを完全に無効にすることはできますか？
それは非常に難しいだろうと推測しますが、もし可能だとしてもプラグインが必要になるでしょう。しかし、ユーザーがそのようなことを調整できるオプションを提供するプラグインは記憶にありません。それは良いことですが、設定があちこちにあるとUXの悪夢につながる可能性もあります。
ユーザーはコンポーザーのツールボックスさえ調整できないのに、それは重要な機能になるでしょう。
chapoi
5
はい、残念ながらそれは全く別のレベルの話です。このスキン全体への関心が十分にあれば、これを拡張したいと思いますが、今のところそれは実現しません。
ああ、それは十分に簡単です。それに対応するアップデートを作成できます。
「いいね！」 3
fbpbdmin
(deepblue)
6
@chapoi iPhoneのダークテーマを試していただけますか。ほとんどのパターンがそこで奇妙にレンダリングされています。
たとえば、iPhoneのダークテーマのデフォルトでは、リンクが白く、非常に目立ちます。
ただし、Androidのダークテーマでは問題なく表示されます。
ありがとうございます。
「いいね！」 1
chapoi
7
おお、すごい！ありがとうございます。週末にダークモードを見てみます。
「いいね！」 2
chapoi
8
パターンを完全に無効にする設定を追加しました。
iPhoneでのダークモードの問題は、Safariのバグが原因で、background-repeatが使用されている場合にbackground-mode-blendプロパティが機能しないことです。非常に厄介で、まだ回避策がありません。
ダークモード/ライトモード用に2つの別々のアップロードに落ち着くかもしれませんが、それはまったくエレガントではありません。
いずれにしても、現時点では、iPhoneでダークモードでデバイスを使用している場合は、パターンなしで使用することをお勧めします。
「いいね！」 5
Falco
(Falco)
9
Maybe an user option to use their existing “User Card Background” image as the chat background?
「いいね！」 4
Roi
10
私も同じです。
しかし、Androidでは見栄えが良いです。
パターンがないと退屈に見えます。今のところ有効にしたままですが、Appleユーザーから苦情が出始めました。
@chapoiさん、チャットの返信アイコンを、d-icon-shareが表示される実際の左向き矢印に変更する方法はありますか？
chapoi
12
ありがとうございます。試してみます。Kodular Community Theme を使用しており、返信したトピックでも同じアイコンが表示されます。これはテーマ固有のものなのか疑問に思っています。今開発者に聞いてみます。
「いいね！」 1
このコンポーネントをありがとうございます。
mobile.scss の 55 行目から 62 行目でマイナーな調整を行いました。
.chat-messages-scroll {
background-color: var(--bubble-bg);
background-image: url(check-empty($background-pattern, $enable_pattern));
background-blend-mode: var(--bubble-bg-mode);
}
.chat-messages-container {
padding: 0;
以前は background が .chat-messages-container に適用されており、スクロールすると background がメッセージと一緒に移動していましたが、この方法では background が背面に固定されます。
モバイルチャットで .chat-messages-container のインスタンスが 2 つあり、background が複製されていたことに気づきました。
「いいね！」 4
chapoi
15
ありがとうございます。うっかり見落としていた点を的確に指摘していただき、修正いたしました。
「いいね！」 2
こんにちは、チャットの背景が表示されなくなっているようです。チャットコンテナにCSSが追加されなくなっています。現在バージョン3.3.0.beta2を使用しています。
chapoi
17
こんにちは！ご報告ありがとうございます。チャットの変更が多く、このコンポーネントを更新する必要があるかもしれません。
近いうちに試してみます！
「いいね！」 6
eisammy
(Sammy)
18
数日前にこのテーマコンポーネントを試しましたが、再度有効にしたいので、エラーのスクリーンショットをここに投稿してもよろしいでしょうか。
「いいね！」 2
eisammy
(Sammy)
19
@chapoi 素晴らしい…エラーはなくなったようです。デスクトップ版への実装計画はありますか？
これをテストしました。素晴らしいですが、他の人が報告したように、背景色やパターンを変更することはできないようです。
デフォルトの明るい背景では、白い泡が背景に溶け込んでしまいます。
