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

146 lines
9.5 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">
tippyjs: Avoid unsafe allowHTML API in favor of <template> elements. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-02 23:06:33 +01:00
<div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip">
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>
tippyjs: Avoid unsafe allowHTML API in favor of <template> elements. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-02 23:06:33 +01:00
<template id="scroll-to-bottom-button-tooltip">{{t 'Scroll to bottom' }} <span class="hotkey-hint">({{{scroll_to_bottom_key_html}}})</span></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>
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: Remove special button for spectators. After playing with several options, it feels cleanest to just have the closed-compose area look exactly how it would if you were logged in; popping up the login_to_access modal when clicking those buttons feels reasonable. The extra button felt buggy, and this customization helps make the Zulip layout more consistent for spectators. This effectively reverts 5ffc95f6bb03a55cb515ca74135a7d9f8fda8e82.
2022-04-29 20:30:30 +02:00
<span class="new_message_button reply_button_container ">
compose: Revert placeholder styling for bottom reply button. * Revert "frontend: Remove hover effect from small messagebox." This reverts commit 27d964327496f4f6236db2f21fb580e4136e0a83. * Revert "frontend: Use placeholder style for small messagebox text." This reverts commit 8453aac26053cdc0d639095548855de013a6b682. * Revert "frontend: Make "Reply" button look more like a textbox." This reverts commit 9fdd7184c61fbe28d47b8df3585a098b6a1895ea.
2021-05-10 21:52:57 +02:00
<button type="button" class="button small rounded compose_reply_button"
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
id="left_bar_compose_reply_button_big"
compose: Clarify title for wide reply button. This changes the button text from "Reply" to "Reply to selected message". Here's the thinking: * The title "Reply" was a little confusing/inconsistent with the button's label. * If you're hovering over the button, it's because you want more information about what it does -- not just a repeat of the button's label. * The "Message foo > bar" content of the button already cleanly expresses what the button will do if you click it right now. * The hover text "Reply to selected message (r)" explains to you what that button's role is in all situation, not just with the current selection, and thus documents the concept. And it also gives you clarify if you're thinking "but how do I reply to something in Zulip?" and try hovering over the buttons at the bottom to find out.
2021-06-04 17:49:50 +02:00
title="{{t 'Reply to selected message' }} (r)">
compose_closed_ui: Show default label for empty narrows. The default label for empty narrows depends on whether it's a stream/topic narrow or a PMs narrow. We leave some default text in compose.hbs for reply label because it take some time for the js to display the correct label.
2021-05-10 17:21:20 +02:00
<span class="compose_reply_button_label">{{t 'Compose message' }}</span>
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>
</span>
<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"
title="{{t 'New message' }} (c)">
<span>+</span>
</button>
</span>
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 stream_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_stream_button"
id="left_bar_compose_stream_button_big"
title="{{t 'New topic' }} (c)">
<span class="compose_stream_button_label">{{t 'New topic' }}</span>
</button>
</span>
{{#unless embedded }}
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 private_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_private_button"
id="left_bar_compose_private_button_big"
title="{{t 'New private message' }} (x)">
<span class="compose_private_button_label">{{t 'New private message' }}</span>
</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: 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="alert" id="compose-send-status">
<span class="compose-send-status-close">&times;</span>
<span id="compose-error-msg"></span>
</div>
compose: Show warning while composing to a resolved topic. This commit creates the function warn_if_topic_resolved that checks if the topic to which the user is composing is resolved or not. First it checks if the stream exists and then if the topic name starts with the RESOLVED_TOPIC_PREFIX. If the conditions are true, a warning banner is shown to the user. It also shows to the user a button to unresolve the topic, if he has the permission to do so. Fixes #20584.
2021-07-27 21:48:11 +02:00
<div id="compose_resolved_topic" class="alert home-error-bar"></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 id="compose_invite_users" class="alert home-error-bar"></div>
<div id="compose-all-everyone" class="alert home-error-bar"></div>
<div id="compose-announce" class="alert home-error-bar"></div>
<div id="compose_not_subscribed" class="alert home-error-bar"></div>
<div id="compose_private_stream_alert" class="alert home-error-bar"></div>
<div id="out-of-view-notification" class="notification-alert"></div>
<div class="composition-area">
<form id="send_message_form" action="/json/messages" method="post">
{{ csrf_input }}
<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>
<button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip"></button>
tippyjs: Avoid unsafe allowHTML API in favor of <template> elements. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-02 23:06:33 +01:00
<template id="compose_close_tooltip">{{t 'Cancel compose' }} <span class="hotkey-hint">(Esc)</span></template>
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>
<div id="stream-message" class="order-1">
compose: Remove keyboard focus from stream color block. This make `shift-tab` from stream input to `compose_top_right` buttons directly possible.
2022-02-08 05:01:55 +01:00
<div class="stream-selection-header-colorblock message_header_stream left_part" tab-index="-1"></div>
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 class="right_part">
<span id="compose-lock-icon">
<i class="fa fa-lock" title="{{t 'This is a private stream' }}" aria-hidden="true"></i>
</span>
<span id="compose-globe-icon">
icons: Replace fa-globe icon with a custom globe icon.
2022-03-01 11:25:40 +01:00
<i class="zulip-icon zulip-icon-globe" title="{{t 'This is a web-public stream' }}" aria-hidden="true"></i>
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
</span>
compose_box: Add button to go the narrow message is being composed to. This'll be shown only when in a different narrow from what you're composing to. Takes care of updating display of the button on moving from one narrow to another and also on changing inputs. This is what contributes to majority of js code in this commit. We are not displaying this for private messages since we do not have a consistent design for both stream and private compose areas. See https://chat.zulip.org/#narrow/stream/101-design/topic/narrow.20to.20topic.2Fpms.20when.20composing/near/1318548 Thanks to Vlad Korobov for the icon and for proposing various designs.
2021-08-16 17:10:43 +02:00
<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>
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
<input type="text" class="recipient_box" name="stream_message_recipient_stream" id="stream_message_recipient_stream" maxlength="30" value="" placeholder="{{t 'Stream' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Stream' }}" />
<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="60" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
</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>
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="private-message" class="order-1">
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 class="to_text">
<span>{{t 'To' }}:</span>
</div>
<div class="right_part">
<div class="pm_recipient">
<div 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>
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>
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: 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="scrolling_list preview_message_area" data-simplebar id="preview_message_area" style="display:none;">
compose: Use `class` to find `markdown_preview` related elements. We convert the following elements to use a class instead of id for accessing them across the codebase: * markdown_preview * undo_markdown_preview * markdown_preview_spinner * message_edit_content * preview_content Converted them together since changes to one impacted the other in some modules like click_handlers. Also, added a function in rows to get `message_row`.
2021-04-20 19:50:01 +02:00
<div class="markdown_preview_spinner"></div>
<div class="preview_content rendered_markdown"></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>
<div id="below-compose-content">
compose: Rearrange compose bottom to separate out enter sends. * We move enter sends into its own row separate from compose control buttons and send button. This makes sure compose control icons don't wrap on narrow widths. * Move char limit indicator parallel to enter sends button. * Left align character exceeded count at bottom.
2021-11-30 06:29:59 +01:00
<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 animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">
<img class="loader" alt="" src="" />
<span>{{t 'Send' }}</span>
</button>
</div>
{{> compose_control_buttons }}
</div>
<div class="compose_bottom_bottom_container">
<span id="compose_limit_indicator"></span>
<div class="enter_sends">
compose: Change UI which toggles `enter_sends` setting. Use a popover which displays both the options instead of long text. We only use a small text indicating the current state which user can click on to trigger the popover.
2021-12-10 09:07:42 +01:00
<span class="enter_sends_true">
{{#tr}}
compose: Fix Enter to send switch internationalization. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-01-07 22:30:59 +01:00
<z-shortcut></z-shortcut> to send
{{#*inline "z-shortcut"}}<kbd>Enter</kbd>{{/inline}}
compose: Change UI which toggles `enter_sends` setting. Use a popover which displays both the options instead of long text. We only use a small text indicating the current state which user can click on to trigger the popover.
2021-12-10 09:07:42 +01:00
{{/tr}}
</span>
<span class="enter_sends_false">
{{#tr}}
compose: Fix Enter to send switch internationalization. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-01-07 22:30:59 +01:00
<z-shortcut></z-shortcut> to send
{{#*inline "z-shortcut"}}<kbd>Ctrl</kbd>+<kbd>Enter</kbd>{{/inline}}
compose: Change UI which toggles `enter_sends` setting. Use a popover which displays both the options instead of long text. We only use a small text indicating the current state which user can click on to trigger the popover.
2021-12-10 09:07:42 +01:00
{{/tr}}
</span>
<i class="fa fa-caret-down" aria-hidden="true"></i>
compose: Never hide send button. `Press Enter to send` used to hide `Send` button, we remove that behaviour. We show the current state of `Enter` hotkey action via text below `Send` button which can toggle behaviour on click.
2021-11-25 10:00:04 +01:00
</div>
compose: Refactor bottom part of compose box. * We use flexbox instead of `position: relative` to align elements. * Increase clickable area of icons using more padding. * Increase space between elements. * Fix mobile compose box icon alignment.
2021-11-12 06:29:37 +01:00
</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>
</div>
</form>
</div>
</div>
</div>
tippyjs: Avoid unsafe allowHTML API in favor of <template> elements. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-02 23:06:33 +01:00
<template id="add-global-time-tooltip">{{#tr}}Add global time<br />Everyone sees global times in their own time zone.{{/tr}}</template>