mirror of
https://github.com/zulip/zulip.git
synced 2025-11-02 21:13:36 +00:00
9bc1eb4bb9
Apart from the normal (collapsed) and full screen sizes, a new expanded state with the same size as the maximum a normal compose box can stretch to when full (40% of the screen height) is now available. Now a user can expand the compose box without it covering the full screen with a click. The vertical resize icon in the bottom right corner of the compose box is rendered useless so has been removed. All three states can be cycled through by clicking the compose resize button in the order: collapsed -> 40% of the screen -> full screen. When a message naturally causes the compose box in its normal state to expand up to 40% of the screen, clicking the resize button will take it to full screen state. Fixes: #29966.
114 lines
7.6 KiB
Handlebars
114 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 data-simplebar-tab-index="-1"></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-recipient">
|
|
{{> dropdown_widget_wrapper
|
|
widget_name="compose_select_recipient"}}
|
|
<div class="topic-marker-container">
|
|
<a role="button" class="conversation-arrow zulip-icon zulip-icon-chevron-right"></a>
|
|
</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">
|
|
<div id="message-content-container" class="surround-formatting-buttons-row">
|
|
<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 data-simplebar-tab-index="-1" id="preview_message_area" style="display:none;">
|
|
<div class="markdown_preview_spinner"></div>
|
|
<div class="preview_content rendered_markdown"></div>
|
|
</div>
|
|
</div>
|
|
<div class="composebox-buttons">
|
|
<button type="button" class="maximize-composebox-button zulip-icon zulip-icon-maximize-diagonal" aria-label="{{t 'Maximize compose box' }}" data-tippy-content="{{t 'Maximize compose box' }}"></button>
|
|
<button type="button" class="expand-composebox-button zulip-icon zulip-icon-expand-diagonal" aria-label="{{t 'Expand compose box' }}" data-tippy-content="{{t 'Expand compose box' }}"></button>
|
|
<button type="button" class="collapse-composebox-button zulip-icon zulip-icon-collapse-diagonal" aria-label="{{t 'Collapse compose box' }}" data-tippy-content="{{t 'Collapse compose box' }}"></button>
|
|
</div>
|
|
<div class="drag"></div>
|
|
</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>
|
|
</form>
|
|
</div>
|
|
<button type="button" class="close zulip-icon zulip-icon-close" id='compose_close' data-tooltip-template-id="compose_close_tooltip_template"></button>
|
|
</div>
|
|
</div>
|