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

125 lines
8.2 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_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">
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"
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">
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>
</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"
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>
compose: Introduce 'Start new conversation' button.
2023-10-04 16:11:48 +02:00
<span class="new_message_button new_conversation_button_container">
<button type="button" class="button small rounded compose_new_conversation_button"
id="new_conversation_button"
data-tooltip-template-id="new_stream_message_button_tooltip_template">
{{t 'Start new conversation' }}
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: 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">
compose_ui: Refactor functions to show and hide loading spinners. This commit refactors show_compose_spinner and hide_compose_spinner functions to use class of the button instead of ID to select the appropriate elements such that we can use the same function to show and hide spinner in "Schedule" button in further commits. For this purpose, we add a new class compose-submit-button to the "Send" button and this class will be added to "Schedule" button as well in the next commit.
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">
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
<img class="loader" alt="" src="" />
<span>{{t 'Send' }}</span>
</button>
compose: Fix send later tooltip being cut by compose box container.
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' }}">
compose: Shorter the separator line between Send and 3-dot buttons. Added a div inside #send_later button with class separator-line, height 70%, width 1px and `background-color: hsl(0deg 0% 100% / 65%)` to make it look like a line also made #send_later a flex with `align-items: center` so that separator line is vertically centered.
2023-05-02 19:04:39 +02:00
<div class="separator-line"></div>
vdots: Place new more-vertical icon in compose box.
2023-09-01 19:51:02 +02:00
<i class="zulip-icon zulip-icon-more-vertical"></i>
compose: Add UI to schedule messages. Fixes #20971
2023-04-14 21:34:41 +02:00
</button>
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>
{{> compose_control_buttons }}
</div>
<div class="compose_bottom_bottom_container">
<span id="compose_limit_indicator"></span>
popover_menus: Change the selector `.enter_sends` for opening tippyjs popover. Changed the `.enter_sends` css selector for launching tippyjs popover from `compose.hbs` because it was colliding with `.enter_sends` selector present in `organization_user_settings_defaults.hbs`. Before this change when an admin tried to change user realm default setting of `enter_sends` it was opening a tippyjs popover despite being a checkbox and it was hitting `/json/settings` endpoint instead of `/json/realm/user_setting_defaults`.
2023-04-01 19:20:19 +02:00
<div class="open_enter_sends_dialog">
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>