zulip/web/templates/compose.hbs

177 lines
11 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>
<template id="scroll-to-bottom-button-tooltip-template">
{{t 'Scroll to bottom' }}
{{tooltip_hotkey_hints "End"}}
</template>
</div>
<div id="compose_controls" class="new-style">
<div id="compose_buttons">
<span class="new_message_button reply_button_container" data-tooltip-template-id="compose_reply_message_button_tooltip_template">
<button type="button" class="button small rounded compose_reply_button"
id="left_bar_compose_reply_button_big">
<span class="compose_reply_button_label">{{t 'Compose message' }}</span>
</button>
<template id="compose_reply_message_button_tooltip_template">
{{t 'Reply to selected message' }}
{{tooltip_hotkey_hints "R"}}
</template>
<template id="compose_reply_selected_topic_button_tooltip_template">
{{t 'Reply to selected conversation' }}
{{tooltip_hotkey_hints "R"}}
</template>
<template id="compose_reply_button_disabled_tooltip_template">
{{t 'You are not allowed to send direct messages in this organization.' }}
</template>
</span>
<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">
<span>+</span>
</button>
<template id="left_bar_compose_mobile_button_tooltip_template">
{{t 'New message' }}
{{tooltip_hotkey_hints "C"}}
</template>
</span>
<span class="new_message_button stream_button_container">
<button type="button" class="button small rounded compose_stream_button"
id="left_bar_compose_stream_button_big"
data-tooltip-template-id="new_topic_message_button_tooltip_template">
<span class="compose_stream_button_label">{{t 'New topic' }}</span>
</button>
<template id="new_topic_message_button_tooltip_template">
{{t 'New topic' }}
{{tooltip_hotkey_hints "C"}}
</template>
<template id="new_stream_message_button_tooltip_template">
{{t 'New stream message' }}
{{tooltip_hotkey_hints "C"}}
</template>
</span>
{{#unless embedded }}
<span class="new_message_button private_button_container">
<button type="button" class="button small rounded compose_private_button"
id="left_bar_compose_private_button_big"
data-tooltip-template-id="new_direct_message_button_tooltip_template">
<span class="compose_private_button_label">{{t 'New direct message' }}</span>
</button>
<template id="new_direct_message_button_tooltip_template">
{{t 'New direct message' }}
{{tooltip_hotkey_hints "X"}}
</template>
</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>
<template id="compose_close_tooltip_template">
{{t 'Cancel compose' }}
{{tooltip_hotkey_hints "Esc"}}
</template>
<template id="compose_close_and_save_tooltip_template">
{{t 'Cancel compose and save draft' }}
{{tooltip_hotkey_hints "Esc"}}
</template>
</div>
<div id="compose-recipient" class="order-1">
<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>
<div id="compose_recipient_selection_dropdown" class="new-style">
<div class="stream_header_colorblock"></div>
{{> settings/dropdown_list_widget
widget_name="compose_select_recipient"
list_placeholder=(t 'Filter')}}
</div>
<i class="fa fa-angle-right" aria-hidden="true"></i>
<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' }}" />
<div id="compose-direct-recipient" 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>
</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 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 class="drag"></div>
<div id="below-compose-content">
<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 compose-submit-button animated-purple-button">
<img class="loader" alt="" src="" />
<span>{{t 'Send' }}</span>
</button>
<button id="compose-schedule-confirm-button" class="button small compose-submit-button hide animated-purple-button" tabindex=0>
<img class="loader" alt="" src="" />
<span>{{t 'Schedule' }}</span>
</button>
<button class="animated-purple-button message-control-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send later' }}">
<i class="zulip-icon zulip-icon-ellipsis-v-solid"></i>
</button>
<template id="send-enter-tooltip-template">
{{t 'Send' }}
{{tooltip_hotkey_hints "Enter"}}
</template>
<template id="send-ctrl-enter-tooltip-template">
{{t 'Send' }}
{{tooltip_hotkey_hints "Ctrl" "Enter"}}
</template>
</div>
{{> compose_control_buttons }}
</div>
<div class="compose_bottom_bottom_container">
<span id="compose_limit_indicator"></span>
<div class="open_enter_sends_dialog">
<span class="enter_sends_true">
{{#tr}}
<z-shortcut></z-shortcut> to send
{{#*inline "z-shortcut"}}<kbd>Enter</kbd>{{/inline}}
{{/tr}}
</span>
<span class="enter_sends_false">
{{#tr}}
<z-shortcut></z-shortcut> to send
{{#*inline "z-shortcut"}}<kbd>Ctrl</kbd>+<kbd>Enter</kbd>{{/inline}}
{{/tr}}
</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<template id="add-global-time-tooltip">
<div>
<span>{{t "Add global time" }}</span><br/>
<span class="tooltip-inner-content italic">{{t "Everyone sees global times in their own time zone." }}</span>
</div>
</template>