Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/web/templates/compose.hbs

113 lines
7.3 KiB
Handlebars
Raw Normal View History

layout: Introduce a #compose-content div. This should make it more intuitive to add new elements to the compose box (such as banners), and it also makes it a bit more clear for styling purposes that the same geometry happens whether the compose box is open or the buttons are visible. I lifted the #compose_container div into the server template. It's not totally clear to me why we need both #compose and #compose_container, but there are some scary comments about 1400px that made me too timid to address that quirk. In passing I removed a clearly redundant click handler.
2021-06-10 16:52:29 +02:00
<div id="compose-content">
message_scroll: Show scroll to bottom button. Show/hide scroll to bottom button when the last message is not visible in the current scroll position. We adjust the bottom offset of the button based on compose box height. Fixes #19862
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. --}}
message_scroll: Use CSS transition for scroll to bottom button. We are abandoning jQuery animation because it build up queue when there is continous switch in animation state. i.e When user goes ↑↓↑↓↑↓… at the bottom. Also added `aria-hidden` to `#scroll-to-bottom-button-container` so that this widget doesn't interfere with screen readers.
2022-07-06 07:05:37 +02:00
<div id="scroll-to-bottom-button-container" aria-hidden="true">
tooltips: Add hotkey hints support to compose related buttons. This commit adds the hotkey hints support to "Cancel compose", "Cancel compose and save draft", "Scroll to bottom" and "Drafts" button.
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">
message_scroll: Show scroll to bottom button. Show/hide scroll to bottom button when the last message is not visible in the current scroll position. We adjust the bottom offset of the button based on compose box height. Fixes #19862
2022-02-14 17:43:32 +01:00
<div id="scroll-to-bottom-button">
<i class="fa fa-chevron-down"></i>
</div>
</div>
</div>
layout: Introduce a #compose-content div. This should make it more intuitive to add new elements to the compose box (such as banners), and it also makes it a bit more clear for styling purposes that the same geometry happens whether the compose box is open or the buttons are visible. I lifted the #compose_container div into the server template. It's not totally clear to me why we need both #compose and #compose_container, but there are some scary comments about 1400px that made me too timid to address that quirk. In passing I removed a clearly redundant click handler.
2021-06-10 16:52:29 +02:00
<div id="compose_controls" class="new-style">
compose: Move to `hbs` file and append it to DOM on init. We move compose.html to compose.hbs file while keeping `#compose` still in `home.html` as a hanger where append rest of the elements. This will provide us with two benefits: * We could share common elements between message_edit_form and compose. * We can insert compose directly in any element. We may decide to do it for recent topics.
2021-04-14 13:10:34 +02:00
<div id="compose_buttons">
compose: Present Start new topic button adjacent the reply button. Fixes: #24889. Co-Authored-By: Daniil Fadeev <shameondev@gmail.com>
2023-10-05 18:09:38 +02:00
<div class="new_message_button reply_button_container">
<button type="button" class="button small compose_reply_button"
id="left_bar_compose_reply_button_big"
data-tooltip-template-id="compose_reply_message_button_tooltip_template">
compose: Remove the unused span wrapper for buttons.
2023-06-20 15:08:26 +02:00
{{t 'Compose message' }}
frontend: Change 'reply' button label to reflect selected message. The 'reply' button shows the stream>topic or recipient(s) of the selected message, for better UX. It also expands to fill the remaining horizontal space in the button bar -- this should help make it easier for new users to figure out how to reply. Finally, it uses "Message" instead of "Reply", to better match the compose box. Fixes #17940.
2021-04-15 02:59:34 +02:00
</button>
compose: Present Start new topic button adjacent the reply button. Fixes: #24889. Co-Authored-By: Daniil Fadeev <shameondev@gmail.com>
2023-10-05 18:09:38 +02:00
<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>
frontend: Change 'reply' button label to reflect selected message. The 'reply' button shows the stream>topic or recipient(s) of the selected message, for better UX. It also expands to fill the remaining horizontal space in the button bar -- this should help make it easier for new users to figure out how to reply. Finally, it uses "Message" instead of "Reply", to better match the compose box. Fixes #17940.
2021-04-15 02:59:34 +02:00
<span class="new_message_button mobile_button_container">
compose: Move to `hbs` file and append it to DOM on init. We move compose.html to compose.hbs file while keeping `#compose` still in `home.html` as a hanger where append rest of the elements. This will provide us with two benefits: * We could share common elements between message_edit_form and compose. * We can insert compose directly in any element. We may decide to do it for recent topics.
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"
compose_box: Convert compose_box tooltips to tippyjs tooltips. This commit converts the static tooltips of closed compose box to tippy.js tooltips.
2023-04-13 16:21:35 +02:00
data-tooltip-template-id="left_bar_compose_mobile_button_tooltip_template">
compose: Remove the unused span wrapper for buttons.
2023-06-20 15:08:26 +02:00
+
compose: Move to `hbs` file and append it to DOM on init. We move compose.html to compose.hbs file while keeping `#compose` still in `home.html` as a hanger where append rest of the elements. This will provide us with two benefits: * We could share common elements between message_edit_form and compose. * We can insert compose directly in any element. We may decide to do it for recent topics.
2021-04-14 13:10:34 +02:00
</button>
</span>
{{#unless embedded }}
compose: Make DM identifiers align with new conversations.
2023-10-04 21:06:27 +02:00
<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"
compose_box: Convert compose_box tooltips to tippyjs tooltips. This commit converts the static tooltips of closed compose box to tippy.js tooltips.
2023-04-13 16:21:35 +02:00
data-tooltip-template-id="new_direct_message_button_tooltip_template">
compose: Remove the unused span wrapper for buttons.
2023-06-20 15:08:26 +02:00
{{t 'New direct message' }}
compose: Move to `hbs` file and append it to DOM on init. We move compose.html to compose.hbs file while keeping `#compose` still in `home.html` as a hanger where append rest of the elements. This will provide us with two benefits: * We could share common elements between message_edit_form and compose. * We can insert compose directly in any element. We may decide to do it for recent topics.
2021-04-14 13:10:34 +02:00
</button>
</span>
{{/unless}}
</div>
</div>
layout: Introduce a #compose-content div. This should make it more intuitive to add new elements to the compose box (such as banners), and it also makes it a bit more clear for styling purposes that the same geometry happens whether the compose box is open or the buttons are visible. I lifted the #compose_container div into the server template. It's not totally clear to me why we need both #compose and #compose_container, but there are some scary comments about 1400px that made me too timid to address that quirk. In passing I removed a clearly redundant click handler.
2021-06-10 16:52:29 +02:00
<div class="message_comp">
compose: Fix banners running off the screen. We introduce a scrollable region, with a simplebar scrollbar. Fixes: #25115.
2023-04-21 11:33:13 +02:00
<div id="compose_banners" data-simplebar></div>
compose: Move to `hbs` file and append it to DOM on init. We move compose.html to compose.hbs file while keeping `#compose` still in `home.html` as a hanger where append rest of the elements. This will provide us with two benefits: * We could share common elements between message_edit_form and compose. * We can insert compose directly in any element. We may decide to do it for recent topics.
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">
compose: Use flexbox to align items in compose top right. This will help us align components on compose box top better on small screen sizes. We also center align the compose_top elements.
2022-02-01 14:29:57 +01:00
<div id="compose_top">
compose: Reorder compose_top_right buttons in DOM. User should be able to tab from topic/pm input to textarea and back. Moving `compose_top_right` button before the stream, topic and PM input structurally in DOM but keeping them visually in the same place, allows us to do so.
2022-02-08 04:58:33 +01:00
<div id="compose_top_right" class="order-2">
compose: Make compose box tooltips consitent. We make the tooltips of the button in the top row consistent. This includes - * Removing the bold formatting from the "Go to conversation" tooltip. * Converting the "Expand compose" tooltip to Tippy. Fixes #22132
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>
compose: Fix close icon in top right area. There are two tangled issues addressed here: * We were weirdly using a scaled up copy of fa-angle-up, rather than fa-chevron-up, for a chevron up, for the expand/collapse widget. * We were previously using &times; for the close icon, which had visual and scaling issues next to the fa-angle icon. Fixes #20403.
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>
tooltips: Add hotkey hints support to compose related buttons. This commit adds the hotkey hints support to "Cancel compose", "Cancel compose and save draft", "Scroll to bottom" and "Drafts" 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>
compose: Reorder compose_top_right buttons in DOM. User should be able to tab from topic/pm input to textarea and back. Moving `compose_top_right` button before the stream, topic and PM input structurally in DOM but keeping them visually in the same place, allows us to do so.
2022-02-08 04:58:33 +01:00
</div>
compose: Add ability to switch to PM in stream dropdown. Fixes #3409
2023-04-15 03:35:23 +02:00
<div id="compose-recipient" class="order-1">
compose_box: Maintain consistent dropdown height. This commit keeps the height of the dropdown consistent, even when it's adjacent a multiline collection of pills in a group DM. It also keeps the righthand buttons and narrows top-aligned, too. Additional markup and CSS ensures that the < marker always stays vertically centered with respect to the dropdown.
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>
dropdown_widget: Refactor to use Class.
2023-07-19 16:09:53 +02:00
{{> dropdown_widget_with_stream_colorblock
widget_name="compose_select_recipient"}}
compose_box: Maintain consistent dropdown height. This commit keeps the height of the dropdown consistent, even when it's adjacent a multiline collection of pills in a group DM. It also keeps the righthand buttons and narrows top-aligned, too. Additional markup and CSS ensures that the < marker always stays vertically centered with respect to the dropdown.
2023-05-25 21:49:18 +02:00
<div class="topic-marker-container">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
compose: Add button to clear topic box. Fixes part of #24889. Co-Authored-By: Daniil Fadeev <shameondev@gmail.com>
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>
compose: Add ability to switch to PM in stream dropdown. Fixes #3409
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>
compose: Move to `hbs` file and append it to DOM on init. We move compose.html to compose.hbs file while keeping `#compose` still in `home.html` as a hanger where append rest of the elements. This will provide us with two benefits: * We could share common elements between message_edit_form and compose. * We can insert compose directly in any element. We may decide to do it for recent topics.
2021-04-14 13:10:34 +02:00
</div>
</div>
</div>
compose: Add support for full size compose box. This commit makes a working toggler in compose_actions that adds the compose-fullscreen class to the compose that removes the max-height from the compose textarea and adds flex elements above so that the height automatically adjust with the device height. This results in making the compose box full screen sized. The compose_height.js maintains the state of the height of the compose box. Also, when the compose box is closed, the compose box is reset to it's default behaviour and original height. So, everytime user need not toggle off the compose full size and only for specific message it is used. It also adds destroy autosize on compose_height state change. It destroys the autosize of textarea when the full screen sized compose box is toggled on. And everytime when it is turned off, it reinitialises the autosize. This also adds a condition in autosize_textarea to only autosize when composebox is not in full height state. Fixes #17660
2021-05-17 13:15:11 +02:00
<div class="messagebox-wrapper">
compose: Move to `hbs` file and append it to DOM on init. We move compose.html to compose.hbs file while keeping `#compose` still in `home.html` as a hanger where append rest of the elements. This will provide us with two benefits: * We could share common elements between message_edit_form and compose. * We can insert compose directly in any element. We may decide to do it for recent topics.
2021-04-14 13:10:34 +02:00
<div class="messagebox">
compose_area: Fix compose_area pasted message bigger than max_length. Fix a bug where the compose box cut the message without warning the user the message pasted was longer than the allowed. It was fixed by stopping cutting the message off and showing an indicator whenever the limit exceeds and removing the indicator as soon as message gets less than that. The cut off for showing the indicator is set as 90% of the limit. Fixes #15909 Co-authored-by: João Maurício <carvalho.joaomauricio@gmail.com>
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>
compose_box: Handle compose and preview expansion.
2023-11-01 21:40:50 +01:00
<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>
compose: Move to `hbs` file and append it to DOM on init. We move compose.html to compose.hbs file while keeping `#compose` still in `home.html` as a hanger where append rest of the elements. This will provide us with two benefits: * We could share common elements between message_edit_form and compose. * We can insert compose directly in any element. We may decide to do it for recent topics.
2021-04-14 13:10:34 +02:00
</div>
<div class="drag"></div>
compose_box: Prepare redesign send and draft structures.
2023-11-01 17:53:17 +01:00
compose_box: Improve structures around send controls.
2023-11-01 18:16:47 +01:00
<div id="message-send-controls-container">
compose_box: Rename message-control-button to send-control-button.
2023-11-14 15:46:37 +01:00
<a id="compose-drafts-button" role="button" class="compose_control_button send-control-button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip_template">
compose_box: Prepare redesign send and draft structures.
2023-11-01 17:53:17 +01:00
{{t 'Drafts' }}
</a>
compose_box: Improve structures around compose buttons.
2023-11-01 18:43:48 +01:00
<span id="compose-limit-indicator"></span>
compose_box: Improve structures around send controls.
2023-11-01 18:16:47 +01:00
<div class="message-send-controls">
compose_box: Implement redesigned send-button styles.
2023-11-02 16:26:32 +01:00
<button type="submit" id="compose-send-button" class="send_message compose-submit-button compose-send-or-save-button" aria-label="{{t 'Send' }}">
compose_box: Improve structures around send controls.
2023-11-01 18:16:47 +01:00
<img class="loader" alt="" src="" />
compose_box: Implement redesigned send-button styles.
2023-11-02 16:26:32 +01:00
<i class="zulip-icon zulip-icon-send"></i>
compose_box: Improve structures around send controls.
2023-11-01 18:16:47 +01:00
</button>
compose_box: Rename message-control-button to send-control-button.
2023-11-14 15:46:37 +01:00
<button class="send-control-button send-related-action-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send options' }}">
compose_box: Improve structures around send controls.
2023-11-01 18:16:47 +01:00
<i class="zulip-icon zulip-icon-more-vertical"></i>
</button>
</div>
compose_box: Prepare redesign send and draft structures.
2023-11-01 17:53:17 +01:00
</div>
compose_box: Improve structures around compose buttons.
2023-11-01 18:43:48 +01:00
<div id="message-formatting-controls-container">
{{> compose_control_buttons }}
compose: Move to `hbs` file and append it to DOM on init. We move compose.html to compose.hbs file while keeping `#compose` still in `home.html` as a hanger where append rest of the elements. This will provide us with two benefits: * We could share common elements between message_edit_form and compose. * We can insert compose directly in any element. We may decide to do it for recent topics.
2021-04-14 13:10:34 +02:00
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>