zulip/templates/zephyr/home.html

{# Home tab of the app, containing messages. #}

<div class="row">
  <div class="span9" id="top_statusbar">
    <div class="narrowed_to_bar">
      <div id="narrowlabel">
        <div class="close" onclick="narrow.show_all_messages()">&times;</div>
        <span id="currently_narrowed_to"></span>
      </div>
    </div>
    <div class="floating_recipient_bar">
      <table class="floating_recipient">
        <tr id="floating_recipient_layout_row" class="ztable_layout_row">
          <td class="ztable_col1" />
          <td class="ztable_col2" />
          <td class="ztable_col3" />
        </tr>
        <tr style="display: none;" id="current_label_stream" class="recipient_row">
          <td colspan="2" class="message_label_clickable message_header message_header_stream left_part"></td>
          <td class="message_label_clickable message_header message_header_stream right_part"></td>
        </tr>
        <tr style="display: none;" id="current_label_huddle" class="recipient_row">
          <td colspan="2" class="message_label_clickable message_header message_header_huddle left_part"></td>
          <td class="message_label_clickable message_header message_header_huddle right_part"></td>
        </tr>
      </table>
    </div>
  </div>
</div>

<div class="row">
  <div class="span9">
    <div class="message_list" id="main_div">
      <div id="top_whitespace"></div>
      <div id="loading_control">
        <button type="button" class="btn btn-large btn-block" id="load_more"
                onclick="load_more_messages();">Load older messages</button>
        <table id="loading_indicator">
          <tr><td id="loading_spinner"></td><td>Loading...</td></tr>
        </table>
      </div>
      <table class="message_table focused_table" id="zhome">
        <tbody>
        </tbody>
      </table>
      <table class="message_table" id="zfilt">
        <tbody>
        </tbody>
      </table>
      <br/><br/>
      <div id="bottom_whitespace"></div>
    </div>
  </div>
</div>

<div class="row">
  <div class="span9 compose" id="compose">
    <div class="close composebox-close" onclick="compose.cancel()">&times;</div>
    <div class="message_comp">
      <div class="alert" id="send-status"></div>
      <form action="/json/send_message/" method="post" class="zephyr">
        <input type="hidden" name="type" value="stream" id="new_message_type"/>
        <input type="hidden" name="client" value="website" id="client_name"/>
        {% csrf_token %}
        <table class="compose_table">
          <tbody>
            <tr class="ztable_layout_row">
              <td class="ztable_col1" />
              <td class="ztable_col2" />
              <td class="ztable_col3" />
            </tr>
            <tr id="stream-message">
              <td colspan="2" class="message_header message_header_stream left_part">
              </td>
              <td class="message_header message_header_stream right_part">
                <input type="text" class="recipient_box" name="stream" id="stream" onchange="focus_on('subject')" value="" placeholder="Stream" autocomplete="off"/> | <input type="text" class="recipient_box" name="subject" id="subject" onchange="focus_on('new_message_content')" value="" placeholder="Subject" autocomplete="off"/>
              </td>
            </tr>
            <tr id="personal-message">
              <td colspan="2" class="message_header message_header_huddle left_part"></td>
              <td class="message_header message_header_huddle right_part">
                You and <input type="text" class="recipient_box" name="recipient" id="huddle_recipient" onblur="focus_on('new_message_content')" value="" placeholder="one or more people..." autocomplete="off"/>
              </td>
            </tr>
            <tr>
              <td class="message_picture">
                <div id="stream_or_huddle">
                  <ul class="nav nav-pills nav-stacked" id="message-type-tabs">
                    <li class="active"><a href="#stream-message" data-toggle="pill" title="Stream"><i class="icon-bullhorn"></i></a></li>
                    <li><a href="#personal-message" data-toggle="pill" title="Huddle"><i class="icon-user"></i></a></li>
                  </ul>
                </div>
              </td>
              <td class="pointer"></td>
              <td class="messagebox">
                <div class="message_content">
                  <textarea class="new_message_textarea" name="content" id="new_message_content" value="" placeholder="Compose your message here..."></textarea>
                  <input type="submit" value="Send" class="btn send_message"/>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>