チャットサイドバー

テーマコンポーネント
1
:information_source: 概要 スペースがある限り、チャットをサイドバーのように自動的に開き、高さを活用します
:hammer_and_wrench: リポジトリ GitHub - Arkshine/discourse-chat-sidebar
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマ初心者ですか？ Discourseテーマの使用に関する初心者ガイド

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

クレジット: @Alon1 (スポンサー付きリクエスト)[1]

このテーマコンポーネントは、スペースがある限りチャットをサイドバーのように自動的に開き、高さを活用することを目的としています。

  • ウィンドウリサイズ対応
  • コンポーザー対応
  • コンテンツまたはウィンドウのどちらか一方に、両方のサイドに固定可能
  • ユーザーが位置を選択可能（ブラウザのローカルストレージに保存）
  • 以前に開いていた場合、元のチャット状態に戻すことが可能
  • チャットの元のユーザー設定は変更されません
  • 部分的なテーマサポート（ほとんどの人気テーマ）

ほとんどのテーマで動作するはずです。
オプションが不足していたり、テーマで何か問題が発生した場合はお知らせください！ :smile:

設定

名前 デフォルト 説明
breakpoint auto チャットサイドバーが表示されるpx単位のブレークポイント。
デフォルトのサイドバーとコンテンツの幅を自然なブレークポイントとして使用するには auto に設定してください（推奨）。
width 400px チャットサイドバーの幅。
position [2] right チャットサイドバーの位置。

left: コンテンツの左側に固定
right: コンテンツの右側に固定
outside-left: ウィンドウの左側に固定
outside-right: ウィンドウの右側に固定
theme_style 可能であれば、これらの chat sidebar position で現在のテーマスタイルを使用します。
ほとんどの人気テーマでのみ利用可能です。
これは信頼性の低い設定です（テーマ名は変更される可能性があります）。
デフォルトのテーマスタイルを使用するには無効にしてください。
allow_user_preference[3] ユーザーがチャットサイドバーの設定を行えるようにします。
注：これはユーザーのブラウザのローカルストレージに保存されます。

利用可能な値：
position: ユーザーがチャットサイドバーの位置を設定できるようにする

未実装

  • テスト
  • よりスムーズなトランジション
  • より多くのユーザー設定？

開発者ノート

当初、ChatDrawer コンポーネントを別のコンセントに挿入して、操作しやすく、フロー内に維持しようとしました。残念ながら、元のコンポーネントを完全に抑制することはできません（イベントのことを考えています）。少なくとも、それを上書きする方法は見つかりませんでした。

CPU負荷が少し高くなりますが、より侵襲性の低い（ただし手動リサイズは時々しか発生しません）ハードJSの方法に従うしかありませんでした。

  1. 興味のある方は、Alonのユースケースはこちらをご覧ください here。 ↩︎

  2. ページをリフレッシュしてください。 ↩︎

  3. 重要：この設定は最新のAPIを使用してヘッダーにアイコンを表示し、最新のDiscourseバージョンが必要です。 ↩︎

「いいね！」 24
2

よくできました！ :clap: :slight_smile:

3

Discourse Bars 🍻 🍸 (a sidebar framework) に対応していますか？他のサイドバーウィジェットと組み合わせることができれば便利です。

「いいね！」 7
4

現時点ではDiscourse Barsに対応できません。

このコンポーネントは元のチャットドロワーを使用しており、配置は手動で行われています。
元の<ChatDrawer />コンポーネントを好きな場所に移動させることができない限り、難しいと思います。しかし、そうできれば素晴らしいですね！:slight_smile:

少なくともバーのサイドバーと並べて表示することはできます

私のコンポーネントは #main-outlet-wrapper 要素を参照しているため、その中のものはすべて正常に機能します。

image
image1997×897 88.9 KB

「いいね！」 4
5

OMG、これは素晴らしいです！

「いいね！」 3
6

サイドバーが折りたたまれている場合にのみ機能しますか？サイドバーを折りたたまない場合、チャットサイドバーが表示されないことに気づきました。

「いいね！」 1
7

この現在のバージョンでは、チャットサイドバーを配置するのに十分なスペースがない場合、メインコンテンツを強制的に縮小しません。これは設計によるものです。

これは便利な状況があるかもしれません。これを行うユーザーオプションを追加することに問題はありません。:thinking:

「いいね！」 1
8

わかりました、ありがとうございます。コンポーネントはうまく機能します。

「いいね！」 1
9

3.6.0.beta2-latest以降、このコンポーネントは機能しなくなっていると思いますか？ 何を選んでも、ストックエクスペリエンスのように常に右側にあります…誰か動作していますか？

このコンポーネントは現在、期待どおりに動作しています！ ほとんどの時間、MacBookのユーザー画面でテストしていましたが、コンポーネントに十分なスペースがない場合、何も表示されないため、混乱したのだと思います。これは現在完全に機能しています。

「いいね！」 2
10

まだテストしていませんが、報告ありがとうございます。すぐに確認します！

「いいね！」 2
11

素晴らしいコンポーネントです :+1: とても良いアイデアです

12

Deprecationsを修正するPRを作成しました。:+1:

テストしてくれた@DevTeVeさんに感謝します！

「いいね！」 4
13

ご協力いただき、誠にありがとうございました :heart:！

オフラインで@Arkshineさんとお話ししていたのですが、いくつか提案があったので、こちらで共有することにしました！

  1. チャットウィンドウのサイズ変更（幅と高さ）
  2. 画面上のテキストを覆っていても、フローティング状態を維持できるようにする。
  3. 幅も自動調整されると素晴らしいです。そうすれば、たとえ小さく見えても常に収まる方法を見つけ、設定（デフォルトではない）で「最小px」のようなものと、「設定した場合、チャットは少なくともxxxの値でないとストックに戻ります」という警告を表示できるようにします。
「いいね！」 2