mirror of
https://github.com/zulip/zulip.git
synced 2025-11-01 20:44:04 +00:00
1ba3cda229
This is a prep commit for moving the narrow to compose recipients button before the input, and also aids in the overall compose area redesign.
116 lines
7.6 KiB
Handlebars
116 lines
7.6 KiB
Handlebars
<div id="compose-content">
|
|
{{!-- 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. --}}
|
|
<div id="scroll-to-bottom-button-container" aria-hidden="true">
|
|
<div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip-template">
|
|
<div id="scroll-to-bottom-button">
|
|
<i class="fa fa-chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="compose_controls" class="new-style">
|
|
<div id="compose_buttons">
|
|
<div class="new_message_button reply_button_container">
|
|
<div class="compose-reply-button-wrapper" data-reply-button-type="selected_message">
|
|
<button type="button" class="button small compose_reply_button"
|
|
id="left_bar_compose_reply_button_big">
|
|
{{t 'Compose message' }}
|
|
</button>
|
|
</div>
|
|
<button type="button" class="button compose_new_conversation_button"
|
|
id="new_conversation_button"
|
|
data-tooltip-template-id="new_stream_message_button_tooltip_template">
|
|
{{t 'Start new conversation' }}
|
|
</button>
|
|
</div>
|
|
<span class="new_message_button mobile_button_container">
|
|
<button type="button" class="button small rounded compose_mobile_button"
|
|
id="left_bar_compose_mobile_button_big"
|
|
data-tooltip-template-id="left_bar_compose_mobile_button_tooltip_template">
|
|
+
|
|
</button>
|
|
</span>
|
|
{{#unless embedded }}
|
|
<span class="new_message_button new_direct_message_button_container">
|
|
<button type="button" class="button small rounded compose_new_direct_message_button"
|
|
id="new_direct_message_button"
|
|
data-tooltip-template-id="new_direct_message_button_tooltip_template">
|
|
{{t 'New direct message' }}
|
|
</button>
|
|
</span>
|
|
{{/unless}}
|
|
</div>
|
|
</div>
|
|
<div class="message_comp">
|
|
<div id="compose_banners" data-simplebar></div>
|
|
<div class="composition-area">
|
|
<form id="send_message_form" action="/json/messages" method="post">
|
|
<div class="compose_table">
|
|
<div id="compose_top">
|
|
<div id="compose_top_right" class="order-2">
|
|
<button type="button" class="expand_composebox_button fa fa-chevron-up" aria-label="{{t 'Expand compose' }}" data-tippy-content="{{t 'Expand compose' }}"></button>
|
|
<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_template"></button>
|
|
</div>
|
|
<div id="compose-recipient" class="order-1">
|
|
<div class="topic-marker-container order-1">
|
|
<a role="button" class="narrow_to_compose_recipients zulip-icon zulip-icon-arrow-left-circle" data-tooltip-template-id="narrow_to_compose_recipients_tooltip"></a>
|
|
</div>
|
|
{{> dropdown_widget_wrapper
|
|
widget_name="compose_select_recipient"}}
|
|
<div class="topic-marker-container">
|
|
<i class="zulip-icon zulip-icon-chevron-right" aria-hidden="true"></i>
|
|
</div>
|
|
<div id="compose_recipient_box">
|
|
<input type="text" 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' }}" />
|
|
<button type="button" id="recipient_box_clear_topic_button" class="button tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1">
|
|
<i class="zulip-icon zulip-icon-close"></i>
|
|
</button>
|
|
</div>
|
|
<div id="compose-direct-recipient" data-before="{{t 'You and' }}">
|
|
<div class="pill-container">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="messagebox-wrapper">
|
|
<div class="messagebox">
|
|
<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>
|
|
<div id="preview-message-area-container">
|
|
<div class="scrolling_list preview_message_area" data-simplebar id="preview_message_area" style="display:none;">
|
|
<div class="markdown_preview_spinner"></div>
|
|
<div class="preview_content rendered_markdown"></div>
|
|
</div>
|
|
</div>
|
|
<div class="drag"></div>
|
|
|
|
<div id="message-send-controls-container">
|
|
<a id="compose-drafts-button" role="button" class="send-control-button hide-sm" tabindex=0 href="#drafts">
|
|
<span class="compose-drafts-text">{{t 'Drafts' }}</span><span class="compose-drafts-count-container">(<span class="compose-drafts-count"></span>)</span>
|
|
</a>
|
|
<span id="compose-limit-indicator" class="tippy-zulip-tooltip" data-tippy-content="{{t 'Maximum message length: {max_message_length} characters' }}"></span>
|
|
<div class="message-send-controls">
|
|
<button type="submit" id="compose-send-button" class="send_message compose-submit-button compose-send-or-save-button" aria-label="{{t 'Send' }}">
|
|
<img class="loader" alt="" src="" />
|
|
<i class="zulip-icon zulip-icon-send"></i>
|
|
</button>
|
|
<button class="send-control-button send-related-action-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send options' }}">
|
|
<i class="zulip-icon zulip-icon-more-vertical"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="message-formatting-controls-container">
|
|
{{> compose_control_buttons }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|