2021-06-10 16:52:29 +02:00
<div id="compose-content">
2022-02-14 17:43:32 +01:00
{{ ! - - scroll to bottom button is not part of compose but
helps us align it at various screens sizes with
minimal css and no JS. We keep it `position: absolute` to prevent
it changing compose box layout in any way. --}}
2022-07-06 07:05:37 +02:00
<div id="scroll-to-bottom-button-container" aria-hidden="true">
2022-03-02 23:06:33 +01:00
<div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip">
2022-02-14 17:43:32 +01:00
<div id="scroll-to-bottom-button">
<i class="fa fa-chevron-down"></i>
</div>
</div>
2022-03-02 23:06:33 +01:00
<template id="scroll-to-bottom-button-tooltip"> {{ t 'Scroll to bottom' }} <span class="hotkey-hint">( {{{ scroll_to_bottom_key_html }}} )</span></template>
2022-02-14 17:43:32 +01:00
</div>
2021-06-10 16:52:29 +02:00
<div id="compose_controls" class="new-style">
2021-04-14 13:10:34 +02:00
<div id="compose_buttons">
2022-04-29 20:30:30 +02:00
<span class="new_message_button reply_button_container ">
2021-05-10 21:52:57 +02:00
<button type="button" class="button small rounded compose_reply_button"
2021-04-15 02:59:34 +02:00
id="left_bar_compose_reply_button_big"
2021-06-04 17:49:50 +02:00
title=" {{ t 'Reply to selected message' }} (r)">
2021-05-10 17:21:20 +02:00
<span class="compose_reply_button_label"> {{ t 'Compose message' }} </span>
2021-04-15 02:59:34 +02:00
</button>
</span>
<span class="new_message_button mobile_button_container">
2021-04-14 13:10:34 +02:00
<button type="button" class="button small rounded compose_mobile_button"
id="left_bar_compose_mobile_button_big"
title=" {{ t 'New message' }} (c)">
<span>+</span>
</button>
</span>
2021-04-15 02:59:34 +02:00
<span class="new_message_button stream_button_container">
2021-04-14 13:10:34 +02:00
<button type="button" class="button small rounded compose_stream_button"
id="left_bar_compose_stream_button_big"
title=" {{ t 'New topic' }} (c)">
<span class="compose_stream_button_label"> {{ t 'New topic' }} </span>
</button>
</span>
{{ # unless embedded }}
2021-04-15 02:59:34 +02:00
<span class="new_message_button private_button_container">
2021-04-14 13:10:34 +02:00
<button type="button" class="button small rounded compose_private_button"
id="left_bar_compose_private_button_big"
title=" {{ t 'New private message' }} (x)">
<span class="compose_private_button_label"> {{ t 'New private message' }} </span>
</button>
</span>
{{ / unless }}
</div>
</div>
2021-06-10 16:52:29 +02:00
<div class="message_comp">
2022-08-19 21:36:33 +02:00
<div id="compose_banners"></div>
2021-04-14 13:10:34 +02:00
<div class="alert" id="compose-send-status">
<span class="compose-send-status-close">×</span>
<span id="compose-error-msg"></span>
</div>
<div id="out-of-view-notification" class="notification-alert"></div>
<div class="composition-area">
<form id="send_message_form" action="/json/messages" method="post">
{{ csrf_input }}
<div class="compose_table">
2022-02-01 14:29:57 +01:00
<div id="compose_top">
2022-02-08 04:58:33 +01:00
<div id="compose_top_right" class="order-2">
2022-05-27 13:21:15 +02:00
<button type="button" class="expand_composebox_button fa fa-chevron-up" aria-label=" {{ t 'Expand compose' }} " data-tippy-content=" {{ t 'Expand compose' }} "></button>
2022-04-19 17:31:49 +02:00
<button type="button" class="collapse_composebox_button fa fa-chevron-down" aria-label=" {{ t 'Collapse compose' }} " data-tippy-content=" {{ t 'Collapse compose' }} "></button>
<button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip"></button>
2022-03-02 23:06:33 +01:00
<template id="compose_close_tooltip"> {{ t 'Cancel compose' }} <span class="hotkey-hint">(Esc)</span></template>
2022-07-29 14:30:39 +02:00
<template id="compose_close_and_save_tooltip"> {{ t 'Cancel compose and save draft' }} <span class="hotkey-hint">(Esc)</span></template>
2022-02-08 04:58:33 +01:00
</div>
<div id="stream-message" class="order-1">
2022-02-08 05:01:55 +01:00
<div class="stream-selection-header-colorblock message_header_stream left_part" tab-index="-1"></div>
2022-02-01 14:29:57 +01:00
<div class="right_part">
<span id="compose-lock-icon">
<i class="fa fa-lock" title=" {{ t 'This is a private stream' }} " aria-hidden="true"></i>
</span>
<span id="compose-globe-icon">
2022-03-01 11:25:40 +01:00
<i class="zulip-icon zulip-icon-globe" title=" {{ t 'This is a web-public stream' }} " aria-hidden="true"></i>
2022-02-01 14:29:57 +01:00
</span>
2021-08-16 17:10:43 +02:00
<a role="button" class="narrow_to_compose_recipients zulip-icon zulip-icon-arrow-left-circle order-1" data-tooltip-template-id="narrow_to_compose_recipients_tooltip" tabindex="0">
</a>
2022-07-15 03:01:24 +02:00
<input type="text" class="recipient_box" name="stream_message_recipient_stream" id="stream_message_recipient_stream" maxlength=" {{ max_stream_name_length }} " value="" placeholder=" {{ t 'Stream' }} " autocomplete="off" tabindex="0" aria-label=" {{ t 'Stream' }} " />
2022-02-01 14:29:57 +01:00
<i class="fa fa-angle-right" aria-hidden="true"></i>
2022-07-15 03:01:24 +02:00
<input type="text" class="recipient_box" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength=" {{ max_topic_length }} " value="" placeholder=" {{ t 'Topic' }} " autocomplete="off" tabindex="0" aria-label=" {{ t 'Topic' }} " />
2022-02-01 14:29:57 +01:00
</div>
2021-04-14 13:10:34 +02:00
</div>
2022-02-08 04:58:33 +01:00
<div id="private-message" class="order-1">
2022-02-01 14:29:57 +01:00
<div class="to_text">
<span> {{ t 'To' }} :</span>
</div>
<div class="right_part">
<div class="pm_recipient">
2022-09-26 21:01:43 +02:00
<a role="button" class="narrow_to_compose_recipients zulip-icon zulip-icon-arrow-left-circle order-1" data-tooltip-template-id="narrow_to_compose_recipients_tooltip" tabindex="0"></a>
2022-02-01 14:29:57 +01:00
<div class="pill-container" data-before=" {{ t 'You and' }} ">
<div class="input" contenteditable="true" id="private_message_recipient" data-no-recipients-text=" {{ t 'Add one or more users' }} " data-some-recipients-text=" {{ t 'Add another user...' }} "></div>
</div>
2021-04-14 13:10:34 +02:00
</div>
</div>
</div>
</div>
2021-05-17 13:15:11 +02:00
<div class="messagebox-wrapper">
2021-04-14 13:10:34 +02:00
<div class="messagebox">
2021-07-07 12:13:19 +02:00
<textarea class="new_message_textarea" name="content" id='compose-textarea' placeholder=" {{ t 'Compose your message here' }} " tabindex="0" aria-label=" {{ t 'Compose your message here...' }} "></textarea>
2021-04-14 13:10:34 +02:00
<div class="scrolling_list preview_message_area" data-simplebar id="preview_message_area" style="display:none;">
2021-04-20 19:50:01 +02:00
<div class="markdown_preview_spinner"></div>
<div class="preview_content rendered_markdown"></div>
2021-04-14 13:10:34 +02:00
</div>
<div class="drag"></div>
<div id="below-compose-content">
2021-11-30 06:29:59 +01:00
<div class="compose_bottom_top_container">
<div class="compose_right_float_container order-3">
<button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title=" {{ t 'Send' }} (Ctrl + Enter)">
<img class="loader" alt="" src="" />
<span> {{ t 'Send' }} </span>
</button>
</div>
{{ > compose_control_buttons }}
</div>
<div class="compose_bottom_bottom_container">
<span id="compose_limit_indicator"></span>
<div class="enter_sends">
2021-12-10 09:07:42 +01:00
<span class="enter_sends_true">
{{ # tr }}
2022-01-07 22:30:59 +01:00
<z-shortcut></z-shortcut> to send
{{ #*inline "z-shortcut" }} <kbd>Enter</kbd> {{ / inline }}
2021-12-10 09:07:42 +01:00
{{ / tr }}
</span>
<span class="enter_sends_false">
{{ # tr }}
2022-01-07 22:30:59 +01:00
<z-shortcut></z-shortcut> to send
{{ #*inline "z-shortcut" }} <kbd>Ctrl</kbd>+<kbd>Enter</kbd> {{ / inline }}
2021-12-10 09:07:42 +01:00
{{ / tr }}
</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
2021-11-25 10:00:04 +01:00
</div>
2021-11-12 06:29:37 +01:00
</div>
2021-04-14 13:10:34 +02:00
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
2022-03-02 23:06:33 +01:00
<template id="add-global-time-tooltip"> {{ # tr }} Add global time<br />Everyone sees global times in their own time zone. {{ / tr }} </template>