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

114 lines
7.6 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">
compose_tooltips: Improve tooltip logic for compose_reply_button. Change compose_reply_button tooltip logic to show the correct tooltip. Earlier in organizations where DMs were disabled, a stale tooltip was being displayed. Earlier if the user hovered over the compose_reply_button when it was disabled and switched to a stream in which it was enabled before waiting for the tooltip delay, the next time the user hovers over the compose_reply_button the stale disabled tooltip is displayed instead of the enabled one. This is fixed by checking if the compose_reply_button is enabled on the fly while rendering the tooltip via instance.setContent(). Fixes #29238.
2024-04-09 07:56:36 +02:00
<div class="compose-reply-button-wrapper" data-reply-button-type="selected_message">
compose: Remove unnecessary `.small` class for compose buttons. For buttons in the compose box using `.small`, all properties except min-width were already being overriden in compose.css. So we added `min-width: inherit` to compose.css and remove the `small` class. Preparatory commit for #30895.
2024-07-15 08:37:24 +02:00
<button type="button" class="button compose_reply_button"
compose_tooltips: Fix tooltips for disabled conversation button. In the situation where the DMs are disabled in an organization, we disable the new conversation button. But due to this, the tooltip hinting towards the same, was also being disabled because it was attached to a disabled element which does not fire any events. This commit fixes this bug, by wrapping the new conversation button inside a div, and attaching the tooltip to this wrapper instead.
2023-12-20 04:08:58 +01:00
id="left_bar_compose_reply_button_big">
{{t 'Compose message' }}
</button>
</div>
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: Remove unnecessary `.small` class for compose buttons. For buttons in the compose box using `.small`, all properties except min-width were already being overriden in compose.css. So we added `min-width: inherit` to compose.css and remove the `small` class. Preparatory commit for #30895.
2024-07-15 08:37:24 +02:00
<button type="button" class="button rounded compose_mobile_button"
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
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">
compose: Remove unnecessary `.small` class for compose buttons. For buttons in the compose box using `.small`, all properties except min-width were already being overriden in compose.css. So we added `min-width: inherit` to compose.css and remove the `small` class. Preparatory commit for #30895.
2024-07-15 08:37:24 +02:00
<button type="button" class="button rounded compose_new_direct_message_button"
compose: Make DM identifiers align with new conversations.
2023-10-04 21:06:27 +02:00
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">
scroll: Set tabIndex to -1 for simplebar content wrapper. Fixes #30403. Having tabIndex set to 0 led to keyboard focus being put on a scrollbar container, which led to users having to tab twice to skip a container. This commit also removes instances of tabIndex being set to -1 programatically for certain cases, since it is -1 by default now. This commit also removes `outline: none` for simplebar since that property is not needed anymore because the wrapper is not focusable anymore.
2024-06-16 13:46:37 +02:00
<div id="compose_banners" data-simplebar data-simplebar-tab-index="-1"></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: Rework alignment of upper elements, and redesign close icon. We now right align recipient input (even at very narrow widths) and banners to the textbox, and move the close button to the absolute top right corner of the compose box, updating the icon to be slimmer, bigger and purplish, and adding a background highlight on hover. This involved refactoring the send control area width into a responsive css variable, and simplifying the html structure of the compose box. Fixes: #28792.
2024-06-12 14:29:41 +02:00
<div id="compose-recipient">
stream picker: Remove stream colorblock. To achive this the `stream_header_colorblock` div was removed from `dropdown_widget_with_stream_colorblock.hbs` template. this change made the file name irelevenet so it was necessary to rename the file to `dropdown_widget_wrapper.hbs`. After removing the html strcuture for colorblock from templates the css for colorblock was also removed. followed by the javascript which was used to add colorblock to the stream picker. After removing javascript tests were updated. Fixes: #28796.
2024-02-04 18:55:46 +01:00
{{> dropdown_widget_wrapper
dropdown_widget: Refactor to use Class.
2023-07-19 16:09:53 +02:00
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">
compose: Make conversation arrow double as a go-to-conversation button. The chevron arrow icon before the topic / dm user field now also acts as a go to conversation button. Whenever the functionality is available, the plain icon changes to look and behave like a button. The old go to conversation button on the right of the field is removed. Fixes: #28697.
2024-05-09 04:50:53 +02:00
<a role="button" class="conversation-arrow zulip-icon zulip-icon-chevron-right"></a>
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>
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: Refactor recipient area to use grid layout instead of flexbox. This is a prep commit for moving the narrow to compose recipients button before the input, and also aids in the overall compose area redesign.
2024-02-16 10:00:54 +01:00
<div id="compose-direct-recipient" data-before="{{t 'You and' }}">
<div class="pill-container">
<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>
compose: Fix bug causing layout shift on expanding compose box. The messagebox-wrapper div is removed, and it's only style `flex: 1` is applied to the messagebox div. The `height: 100%` and `margin-top: 5px` styles on the messagebox div were earlier causing it to move 5px down, outside the messagebox-wrapper div, when the compose box was expanded.
2024-06-13 23:08:53 +02:00
<div class="messagebox">
compose: Redesign control buttons row and textbox to look like 1 unit. The row of buttons is placed using CSS grid template areas so that visually it is now inside the bottom edge of the textbox. The color of the buttons row and individual buttons is changed to match the color of the textbox. All textbox border / box shadow properties are now applied to its parent instead which is extended under the buttons' row, so that its border snuggly fits around the buttons row too. Notable side effects: - In dark mode the textbox in focused state now has a light border which does not match the recipient input's current border which doesn't change when focused. Likely, the recipient input should be updated to match the textbox's border color. - The dividers in the formatting buttons row are not vertically centered now. This should be figured out soon. Fixes: #28702.
2024-05-18 10:30:24 +02:00
<div id="message-content-container" class="surround-formatting-buttons-row">
compose: Fix bug causing layout shift on expanding compose box. The messagebox-wrapper div is removed, and it's only style `flex: 1` is applied to the messagebox div. The `height: 100%` and `margin-top: 5px` styles on the messagebox div were earlier causing it to move 5px down, outside the messagebox-wrapper div, when the compose box was expanded.
2024-06-13 23:08:53 +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>
<div id="preview-message-area-container">
scroll: Set tabIndex to -1 for simplebar content wrapper. Fixes #30403. Having tabIndex set to 0 led to keyboard focus being put on a scrollbar container, which led to users having to tab twice to skip a container. This commit also removes instances of tabIndex being set to -1 programatically for certain cases, since it is -1 by default now. This commit also removes `outline: none` for simplebar since that property is not needed anymore because the wrapper is not focusable anymore.
2024-06-16 13:46:37 +02:00
<div class="scrolling_list preview_message_area" data-simplebar data-simplebar-tab-index="-1" id="preview_message_area" style="display:none;">
compose: Fix bug causing layout shift on expanding compose box. The messagebox-wrapper div is removed, and it's only style `flex: 1` is applied to the messagebox div. The `height: 100%` and `margin-top: 5px` styles on the messagebox div were earlier causing it to move 5px down, outside the messagebox-wrapper div, when the compose box was expanded.
2024-06-13 23:08:53 +02:00
<div class="markdown_preview_spinner"></div>
<div class="preview_content rendered_markdown"></div>
compose_box: Handle compose and preview expansion.
2023-11-01 21:40:50 +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>
compose: Fix bug causing layout shift on expanding compose box. The messagebox-wrapper div is removed, and it's only style `flex: 1` is applied to the messagebox div. The `height: 100%` and `margin-top: 5px` styles on the messagebox div were earlier causing it to move 5px down, outside the messagebox-wrapper div, when the compose box was expanded.
2024-06-13 23:08:53 +02:00
<div class="composebox-buttons">
compose: Allow 3-way compose box resizing with new fixed expanded state. Apart from the normal (collapsed) and full screen sizes, a new expanded state with the same size as the maximum a normal compose box can stretch to when full (40% of the screen height) is now available. Now a user can expand the compose box without it covering the full screen with a click. The vertical resize icon in the bottom right corner of the compose box is rendered useless so has been removed. All three states can be cycled through by clicking the compose resize button in the order: collapsed -> 40% of the screen -> full screen. When a message naturally causes the compose box in its normal state to expand up to 40% of the screen, clicking the resize button will take it to full screen state. Fixes: #29966.
2024-06-10 18:18:28 +02:00
<button type="button" class="maximize-composebox-button zulip-icon zulip-icon-maximize-diagonal" aria-label="{{t 'Maximize compose box' }}" data-tippy-content="{{t 'Maximize compose box' }}"></button>
compose: Fix bug causing layout shift on expanding compose box. The messagebox-wrapper div is removed, and it's only style `flex: 1` is applied to the messagebox div. The `height: 100%` and `margin-top: 5px` styles on the messagebox div were earlier causing it to move 5px down, outside the messagebox-wrapper div, when the compose box was expanded.
2024-06-13 23:08:53 +02:00
<button type="button" class="expand-composebox-button zulip-icon zulip-icon-expand-diagonal" aria-label="{{t 'Expand compose box' }}" data-tippy-content="{{t 'Expand compose box' }}"></button>
<button type="button" class="collapse-composebox-button zulip-icon zulip-icon-collapse-diagonal" aria-label="{{t 'Collapse compose box' }}" data-tippy-content="{{t 'Collapse compose box' }}"></button>
compose_box: Prepare redesign send and draft structures.
2023-11-01 17:53:17 +01:00
</div>
compose: Fix bug causing layout shift on expanding compose box. The messagebox-wrapper div is removed, and it's only style `flex: 1` is applied to the messagebox div. The `height: 100%` and `margin-top: 5px` styles on the messagebox div were earlier causing it to move 5px down, outside the messagebox-wrapper div, when the compose box was expanded.
2024-06-13 23:08:53 +02:00
<div class="drag"></div>
</div>
compose_box: Prepare redesign send and draft structures.
2023-11-01 17:53:17 +01:00
compose: Fix bug causing layout shift on expanding compose box. The messagebox-wrapper div is removed, and it's only style `flex: 1` is applied to the messagebox div. The `height: 100%` and `margin-top: 5px` styles on the messagebox div were earlier causing it to move 5px down, outside the messagebox-wrapper div, when the compose box was expanded.
2024-06-13 23:08:53 +02:00
<div id="message-send-controls-container">
<a id="compose-drafts-button" role="button" class="send-control-button hide-sm" tabindex=0 href="#drafts">
<span class="compose-drafts-text">{{t 'Drafts' }}</span><span class="compose-drafts-count-container">(<span class="compose-drafts-count"></span>)</span>
</a>
<span id="compose-limit-indicator" class="tippy-zulip-tooltip" data-tippy-content="{{t 'Maximum message length: {max_message_length} characters' }}"></span>
<div class="message-send-controls">
<button type="submit" id="compose-send-button" class="send_message compose-submit-button compose-send-or-save-button" aria-label="{{t 'Send' }}">
<img class="loader" alt="" src="" />
<i class="zulip-icon zulip-icon-send"></i>
</button>
<button class="send-control-button send-related-action-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send options' }}">
<i class="zulip-icon zulip-icon-more-vertical"></i>
</button>
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>
compose: Fix bug causing layout shift on expanding compose box. The messagebox-wrapper div is removed, and it's only style `flex: 1` is applied to the messagebox div. The `height: 100%` and `margin-top: 5px` styles on the messagebox div were earlier causing it to move 5px down, outside the messagebox-wrapper div, when the compose box was expanded.
2024-06-13 23:08:53 +02:00
<div id="message-formatting-controls-container">
{{> compose_control_buttons }}
</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>
</form>
</div>
compose: Rework alignment of upper elements, and redesign close icon. We now right align recipient input (even at very narrow widths) and banners to the textbox, and move the close button to the absolute top right corner of the compose box, updating the icon to be slimmer, bigger and purplish, and adding a background highlight on hover. This involved refactoring the send control area width into a responsive css variable, and simplifying the html structure of the compose box. Fixes: #28792.
2024-06-12 14:29:41 +02:00
<button type="button" class="close zulip-icon zulip-icon-close" id='compose_close' data-tooltip-template-id="compose_close_tooltip_template"></button>
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>