zulip/static/templates/message.handlebars

{{! Client-side Mustache template for rendering messages.}}

{{! Because we use table-layout: fixed for the Message table,
    all the column widths are computed from the first row;
    these CSS classes specify the widths for that first,
    collapsed row. (Otherwise, colspan breaks everything).}}
{{#include_layout_row}}
<tr class="ztable_layout_row">
  <td class="ztable_col1"></td>
  <td class="ztable_col2"></td>
</tr>
{{/include_layout_row}}

{{#each messages}}
{{#with this}}
{{#include_bookend}}
<tr class="bookend_tr">
<td colspan="2" class="bookend{{#if subscribed}} sub-unsub-message{{/if}}{{#if unsubscribed}} sub-unsub-message{{/if}}">
{{#if subscribed}}
<span>--- Subscribed to stream {{subscribed}} ---</span>
{{/if}}
{{#if unsubscribed}}
<span>--- Unsubscribed from stream {{unsubscribed}} ---</span>
{{/if}}
</td>
</tr>
{{/include_bookend}}

{{#if show_date}}
<tr class="date_row" data-zid="{{id}}"><td colspan="4">{{{show_date}}}</td></tr>
{{/if}}

{{#if is_summary}}
  <tr zid="{{first_message_id}}" data-messages="{{message_ids}}" class="summary_row selectable_row{{#include_footer}} last_message{{/include_footer}}{{^is_stream}} summary_row_private_message{{/is_stream}}">
    <td class="summary_colorblock" style="background-color: {{background_color}};">
      <span class="pointer_icon"><i class="icon-vector-caret-right"></i></span>
    </td>
    <td class="message_header message_header_stream right_part">

      {{! [+] }}
      <i class="messages-expand icon-vector-expand-alt"></i>

      {{#if is_stream}}

        {{! invite-only lock icon }}
        {{#if invite_only}}
          <i class="icon-vector-lock" title="This is an invite-only stream"></i>
        {{/if}}

        {{! stream }}
        <a class="message_label_clickable narrows_by_recipient stream_label"
              href="{{stream_url}}"
              title="Narrow to stream &quot;{{display_recipient}}&quot;">{{display_recipient}}
        </a>

        {{! > }}
        &nbsp;
        <i class="icon-vector-narrow icon-vector-small"></i>
        <span class="copy-paste-text">&gt;</span>&nbsp;

        {{! topic }}
        <span class="stream_topic">
          <a class="message_label_clickable narrows_by_subject"
                href="{{topic_url}}"
                title="Narrow to stream &quot;{{display_recipient}}&quot;, topic &quot;{{subject}}&quot;">
            {{subject}}
          </a>

          {{! exterior links (e.g. to a trac ticket) }}
          {{#each subject_links}}
            <a href="{{this}}" target="_blank">
              <i class="icon-vector-external-link-sign"></i>
            </a>
          {{/each}}
        </span>

      {{else}}

        {{! You and Somebody Else, links to PM narrow}}
        <a class="message_label_clickable narrows_by_recipient"
               href="{{pm_with_url}}"
               title="Narrow to your private messages with {{display_reply_to}}">
          You and {{display_reply_to}}
        </a>

      {{/if}}

      {{! "(5 read)" or something similar}}
      ({{count}} {{summary_adjective}})

    </td>
  </tr>
{{else}}

{{#include_recipient}}
<tr zid="{{id}}" class="recipient_row" data-messages="{{message_ids}}">
{{#if is_stream}}
    {{! color strip on the left }}
    <td class="message_header_colorblock" style="background-color: {{background_color}};">
    </td>

    <td class="message_header message_header_stream right_part">
      {{! [-] }}
      {{#if collapsible}}
        <i class="messages-collapse icon-vector-collapse-alt"></i>
      {{/if}}

      {{! invite only lock }}
      {{#if invite_only}}
        <i class="icon-vector-lock" title="This is an invite-only stream"></i>
      {{/if}}

      {{! stream link }}
      <a class="message_label_clickable narrows_by_recipient stream_label"
            href="{{stream_url}}"
            title="Narrow to stream &quot;{{display_recipient}}&quot;">
        {{display_recipient}}
      </a>

      {{! > (narrowing icon) }}
      &nbsp;
      <i class="icon-vector-narrow icon-vector-small"></i>
      <span class="copy-paste-text">&gt;</span>
      &nbsp;

      {{! topic stuff }}
      <span class="stream_topic">
        {{! topic link }}
        <a class="message_label_clickable narrows_by_subject"
              href="{{topic_url}}"
              title="Narrow to stream &quot;{{display_recipient}}&quot;, topic &quot;{{subject}}&quot;">
          {{#if ../../../../../use_match_properties}}
            {{{match_subject}}}
          {{else}}
            {{subject}}
          {{/if}}
        </a>

        {{! edit subject pencil icon }}
        {{#if empty_subject}}
          <i class="icon-vector-pencil edit_subject"></i>
        {{/if}}

        {{! exterior links (e.g. to a trac ticket) }}
        {{#each subject_links}}
          <a href="{{this}}" target="_blank">
            <i class="icon-vector-external-link-sign"></i>
          </a>
        {{/each}}
      </span>

      <span class="topic_edit">
          <span class="topic_edit_form" id="{{id}}"></span>
      </span>
    </td>
{{else}}
    <td class="message_header_colorblock message_header_private_message" style="background-color: {{background_color}};"></td>
    <td class="message_header message_header_private_message right_part dark_background">
        {{#if collapsible}}
          <i class="messages-collapse icon-vector-collapse-alt"></i>
        {{/if}}
        <a class="message_label_clickable narrows_by_recipient"
               href="{{pm_with_url}}"
               title="Narrow to your private messages with {{display_reply_to}}">
        You and {{display_reply_to}}
        </a>
    </td>
{{/if}}
</tr>
{{/include_recipient}}
<tr zid="{{id}}" id="{{dom_id}}"
    class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}{{#contains_mention}} mention{{/contains_mention}}{{#include_footer}} last_message{{/include_footer}}{{#unread}} unread{{/unread}} selectable_row">
    <td class="messagebox_colorblock{{^is_stream}} message_header_private_message{{/is_stream}}" style="background-color: {{background_color}};"><span class="pointer_icon"><i class="icon-vector-caret-right"></i></span></td>
    <td class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} private-message{{/is_stream}}">
        <div class="message_top_line">
        <div class="unread_marker"></div>
        {{#include_sender}}
        <span class="message_sender sender_info_hover">
            {{! See ../js/notifications.js for another user of avatar_url. }}
            <div class="inline_profile_picture"
                 style="background-image: url('{{small_avatar_url}}');"/>
            <span class="sender_name {{#if status_message}}sender-status{{/if}}">
              {{sender_full_name}}
            </span>
            {{#if status_message}}
            <span class="sender-status">
                {{{ status_message }}}
            </span>
            {{/if}}
        </span>
        {{/include_sender}}
        <span class="message_time">{{timestr}}</span>
        <div class="message_controls">
          <div class="star">
            <span class="message_star {{#if starred}}icon-vector-star{{else}}icon-vector-star empty-star{{/if}}"
               title="{{#if starred}}Unstar{{else}}Star{{/if}} this message"></span>
          </div>
          <div class="info actions_hover">
            <i class="icon-vector-chevron-down"></i>
          </div>
        </div>
        </div>
        <div class="message_content">{{#unless status_message}}{{#if ../../../use_match_properties}}{{{match_content}}}{{else}}{{{content}}}{{/if}}{{/unless}}</div>
        <div class="message_edit">
            <div class="message_edit_form" id="{{id}}"></div>
        </div>
        <div class="message_expander message_length_controller" title="See the rest of this message">[More...]</div>
        <div class="message_condenser message_length_controller" title="Make this message take up less space on the screen">[Condense this message]</div>
        {{#if last_edit_timestr}}
        <div class="message_edit_notice">Last edited: {{{last_edit_timestr}}}</div>
        {{/if}}
    </td>
</tr>

{{/if}}
{{/with}}
{{/each}}

{{#if trailing_bookend}}
<tr id="trailing_bookend" class="bookend_tr">
  <td colspan="2" class="bookend">
    <center>{{trailing_bookend}}</center>
    <span class="tiny"><p></p></span>
  </td>
</tr>
{{/if}}