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-09-28 19:29:17 +02:00
<div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip-template">
2022-02-14 17:43:32 +01:00
<div id="scroll-to-bottom-button">
<i class="fa fa-chevron-down"></i>
</div>
</div>
</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">
compose_box: Convert dynamic closed compose box tooltips to tippyjs.
This commit converts the dynamic closed_compose_box
tooltip to template-based tippy.js tooltips. The functions in
the compose_closed_ui.js file are refactored to dynamically change
the 'data-tooltip-template-id' attribute according to the situation.
The title parameter is removed from the functions in
compose_closed_ui.js so that we can change the tooltip within the
caller functions themselves, according to the situation. Since there
is no way to match the title in existing functions with different
languages to change the tooltip attribute dynamically, it is better
to change the tooltip attribute within the caller function according
to the situation, rather than passing the title as a parameter.
In the case of the reply button, we disable it when direct messages
are not allowed. However, tippy.js tooltips do not appear in the
case of disabled elements, so we have to use the container element
around it to show the tooltip. This approach is used in the case of
the reply button, where the span element wraps the button.
We used to have two titles for the reply button: one is the usual
'Reply to selected message', and the other is for the disabled state.
However, in the case of recent conversations, it makes more sense
to have a new tooltip title: 'Reply to selected conversation'.
To ensure that the tooltip content changes dynamically, it is
required to destroy the tooltip instance and then reinitialize it
every time.
Fixes: #25096
2023-04-13 16:22:02 +02:00
<span class="new_message_button reply_button_container" data-tooltip-template-id="compose_reply_message_button_tooltip_template">
2021-05-10 21:52:57 +02:00
<button type="button" class="button small rounded compose_reply_button"
compose_box: Convert dynamic closed compose box tooltips to tippyjs.
This commit converts the dynamic closed_compose_box
tooltip to template-based tippy.js tooltips. The functions in
the compose_closed_ui.js file are refactored to dynamically change
the 'data-tooltip-template-id' attribute according to the situation.
The title parameter is removed from the functions in
compose_closed_ui.js so that we can change the tooltip within the
caller functions themselves, according to the situation. Since there
is no way to match the title in existing functions with different
languages to change the tooltip attribute dynamically, it is better
to change the tooltip attribute within the caller function according
to the situation, rather than passing the title as a parameter.
In the case of the reply button, we disable it when direct messages
are not allowed. However, tippy.js tooltips do not appear in the
case of disabled elements, so we have to use the container element
around it to show the tooltip. This approach is used in the case of
the reply button, where the span element wraps the button.
We used to have two titles for the reply button: one is the usual
'Reply to selected message', and the other is for the disabled state.
However, in the case of recent conversations, it makes more sense
to have a new tooltip title: 'Reply to selected conversation'.
To ensure that the tooltip content changes dynamically, it is
required to destroy the tooltip instance and then reinitialize it
every time.
Fixes: #25096
2023-04-13 16:22:02 +02:00
id="left_bar_compose_reply_button_big">
2023-06-20 15:08:26 +02:00
{{ t 'Compose message' }}
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"
2023-04-13 16:21:35 +02:00
data-tooltip-template-id="left_bar_compose_mobile_button_tooltip_template">
2023-06-20 15:08:26 +02:00
+
2021-04-14 13:10:34 +02:00
</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"
compose_box: Convert dynamic closed compose box tooltips to tippyjs.
This commit converts the dynamic closed_compose_box
tooltip to template-based tippy.js tooltips. The functions in
the compose_closed_ui.js file are refactored to dynamically change
the 'data-tooltip-template-id' attribute according to the situation.
The title parameter is removed from the functions in
compose_closed_ui.js so that we can change the tooltip within the
caller functions themselves, according to the situation. Since there
is no way to match the title in existing functions with different
languages to change the tooltip attribute dynamically, it is better
to change the tooltip attribute within the caller function according
to the situation, rather than passing the title as a parameter.
In the case of the reply button, we disable it when direct messages
are not allowed. However, tippy.js tooltips do not appear in the
case of disabled elements, so we have to use the container element
around it to show the tooltip. This approach is used in the case of
the reply button, where the span element wraps the button.
We used to have two titles for the reply button: one is the usual
'Reply to selected message', and the other is for the disabled state.
However, in the case of recent conversations, it makes more sense
to have a new tooltip title: 'Reply to selected conversation'.
To ensure that the tooltip content changes dynamically, it is
required to destroy the tooltip instance and then reinitialize it
every time.
Fixes: #25096
2023-04-13 16:22:02 +02:00
data-tooltip-template-id="new_topic_message_button_tooltip_template">
2023-06-20 15:08:26 +02:00
{{ t 'New topic' }}
2021-04-14 13:10:34 +02:00
</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"
2023-04-13 16:21:35 +02:00
data-tooltip-template-id="new_direct_message_button_tooltip_template">
2023-06-20 15:08:26 +02:00
{{ t 'New direct message' }}
2021-04-14 13:10:34 +02:00
</button>
</span>
{{ / unless }}
</div>
</div>
2021-06-10 16:52:29 +02:00
<div class="message_comp">
2023-04-21 11:33:13 +02:00
<div id="compose_banners" data-simplebar></div>
2021-04-14 13:10:34 +02:00
<div class="composition-area">
<form id="send_message_form" action="/json/messages" method="post">
<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>
2022-09-28 19:29:17 +02:00
<button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip_template"></button>
2022-02-08 04:58:33 +01:00
</div>
2023-04-15 03:35:23 +02:00
<div id="compose-recipient" class="order-1">
2023-05-25 21:49:18 +02:00
<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>
2023-07-19 16:09:53 +02:00
{{ > dropdown_widget_with_stream_colorblock
widget_name="compose_select_recipient"}}
2023-05-25 21:49:18 +02:00
<div class="topic-marker-container">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
2023-10-03 18:18:55 +02:00
<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>
2023-04-15 03:35:23 +02:00
<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>
2021-04-14 13:10:34 +02:00
</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">
2023-04-25 10:02:12 +02:00
<button type="submit" id="compose-send-button" class="button small send_message compose-submit-button animated-purple-button">
2021-11-30 06:29:59 +01:00
<img class="loader" alt="" src="" />
<span> {{ t 'Send' }} </span>
</button>
2023-04-18 23:51:24 +02:00
<button class="animated-purple-button message-control-button" id="send_later" tabindex=0 type="button" data-tippy-content=" {{ t 'Send later' }} ">
2023-05-02 19:04:39 +02:00
<div class="separator-line"></div>
2023-09-01 19:51:02 +02:00
<i class="zulip-icon zulip-icon-more-vertical"></i>
2023-04-14 21:34:41 +02:00
</button>
2021-11-30 06:29:59 +01:00
</div>
{{ > compose_control_buttons }}
</div>
<div class="compose_bottom_bottom_container">
<span id="compose_limit_indicator"></span>
2023-04-01 19:20:19 +02:00
<div class="open_enter_sends_dialog">
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>