TrakJSを使用してAirbnbに似たメッセージング受信トレイを構築する

あなたは非常に独自の市場スタートアップを開始している想像してください.Airbnbの線に沿った何か.あなたのユーザーがお互いに話をすることができますリアルタイムチャットが必要になります.Airbnbは非常にシンプルで簡単にチャットのインターフェイスに従うことがあります.なぜAirbnBのチャットのルックアップを使用してTalkJS Chat API ? The Theme Editor ちょうど我々はAirbnbのチャットのほぼ同然を達成するために使用するいくつかの追加機能を追加しました.始めましょう!

…する

いつものように、あなたは基本的な受信トレイをセットアップするガイドを始めるに従う必要があります.ガイドは自己説明であり、あなたは時間がないと実行する必要があります.一度それが設定されてチャットをスタイリングを開始することができます.以下の変更を行う必要があります.

ヘッダの色を白に変更する

ヘッダーからアバターを削除する

ヘッダーの底に弱い灰色の境界線を加えてください

受信トレイリストパネルヘッダーからデスクトップ通知トグルを削除し、その色を白に変更します

チャット内のアバターの近くにユーザーの名前を追加する

ユーザ名の横にタイムスタンプを追加する

パネルフッターの白に背景を変更する

メッセージフィールドをより丸くする

システムメッセージの追加

あなたのTalkJJSアカウントにログインし、新しいテーマを作成する';airbnb ';.次に、Navbarから'ロール'オプションを選択し、あなたが持っている役割のいずれかにこのテーマを適用します.ここではデフォルトの役割に適用しました.

チャーダー

我々が編集する最初のコンポーネントは、chatheaderです.38 - 40行を削除する.これはヘッダー上のアバターを取り除くでしょう.今すぐ下にスクロール.header クラスと変更background-color to #FFF を追加し、border-bottom of 1px solid #F5F5F5 . その後、margin-left of 10px のために.content クラス.

トランザクション

このコンポーネントでは、最初に利用可能なトグルを削除する必要があります.そのために行番号15を削除する.さて、行16で、内容を「メッセージ」に変えてください.に移動.toggle-label クラスを追加し、次のスタイルを追加します.

font-weight: bold;
font-size: 16px;
margin-left: 10px;

ユーザメッセージ

いつものように、ほとんどの変更はusermessageコンポーネントについてです.テーマエディタでコンポーネントを開き、次の行67 - 71を置き換えます.

<div t:if="{{ conversation.others.length > 0 }}" class="message-author"
    style="color: black; font-size: 14px">
   {{ sender.name }} <span class = "time-sent"> {{ timestamp |  date: "%H:%m %p"}}</span>
</div>

その後、下に下にスクロール.message-row クラスを追加margin-left とmargin-right of 30px それぞれ.削除する.message-row.by-me 同じ方向にすべてのメッセージを整列するクラス.ユーザー名の近くのタイムスタンプについては、次のコード行を追加します.

.time-sent{
    font-weight: 100;
    font-size: 10px;
    color: #71717A;
}

さて、.message このように見えるクラス.

.message {
    white-space: normal;
    overflow: hidden;
    word-wrap: break-word;
    position: relative;
    display: inline-block;
    max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
    background-color: #FFF;
    color: #000;
}

のために.by-me .message クラス、変更background-color to #FFF とcolor to #000 . 削除することができますborder-color プロパティも同様です.

システムメッセージ

ユーザーが住宅所有者と潜在的なプロパティを議論するとき、Airbnbチャットはこれらのようなメッセージを表示します.幸いなことに、TalkOSには、システムメッセージコンポーネントがあります.この例では、我々のシステムメッセージにAirbnbロゴのSVGを入れますが、これを任意のロゴで置き換えることができます.SVGを行52に追加し、既存の52行目の52行目を移動する.
SVGでは、ロゴと呼ばれるクラスを追加します.次に、次の変更を行います.logo クラスと.message クラス.

.logo{
    margin: 10px;
    float: left;
}
.message {
    white-space: pre-wrap;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 20rem;
    padding: 5px;
    overflow: hidden;    
    background-color: #F7F7F7;
    color: #717171;
    font-size: 11px;
    font-weight: bold;
}

一旦これらの変更がなされるならば、あなたはAirbnbの上のものとまったく同じように見えるシステムメッセージを持つべきです.しかし、待って?どのように、あなたはシステムメッセージを表示しますか?そのためには、私たちはscript.js ファイルと会話に属性を追加します.The welcomeMessages 属性は、あなたのTalkJJ会話でシステムメッセージを表示するのに用いられます.文字列の配列でユーザーに表示するメッセージを追加できます.

conversation.setAttributes({
    welcomeMessages: ["To protect your payment, always communicate and pay through the Airbnb website or app", "Hosts can’t see your profile photo until after your booking is confirmed."]
})

レイアウト

グローバル

グローバルサブセクションを選択し、フォントファミリーを“helvetica”、“オープンサン”、サンセリフに変更します.次に、fontSize to 15px .

リストボックス

受信トレイの会話リストパネルのサブセクションに頭を100 %に幅を変更します.両方を変えるmaxWidth and minWidth プロパティ300px それぞれ.その後変更borderColor to #F5F5F5 .

チャットパネル

設定するmarginLeft プロパティを空白にし、width and maxWidth to 785px .

パネルヘッダー

パネルヘッダーでbackgroundColor to #FFF .

メッセージフィールド

もう終わりです.メッセージフィールドのサブセクションを選択し、border-radius of 30px . 変更するborderColor to #71717A and color to #000 (黒).

ハイライト

最後に、ハイライトサブセクションを開き、backgroundColor to #F7F7F7 and color to #000 .

ラッピング

これらの変更のすべてで、あなたの受信トレイはこのように見えるはずです.あなたがAirbnbのチャットの最初のスクリーンショットを見た場合は、私たちのlooklikeはほとんどそれと同じであることに気づくでしょう.テーマエディタは、継続的に機能を成長させ、私たちのtalkjsチャットのテーマを微調整する私たちより多くのオプションを与えている.

今、同じチャットのモバイルビューをしたい場合は、すべてを行う必要があるtalkjsのチャットボックスに受信トレイを変更し、減少width の380px . それはこのように見えるでしょう.

それはこれです.あなたが素晴らしい時間TalkJjsチャットAPIとテーマエディタを使用してAirbnbルックアップをコーディングしていた希望.次の1つまで、ハッピーコーディング!