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

116 lines
7.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">
<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">
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 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}}
compose: Show login and hide drafts for spectators.
2021-05-19 13:50:52 +02:00
<span class="new_message_button hide only-visible-for-spectators">
<a class="no-underline button small rounded float-left" href="/login">
{{t 'Log in to send messages' }}
</a>
</span>
<span class="new_message_button hidden-for-spectators">
compose: Move drafts button to right end of bottom row. This avoids it breaking up the list of buttons that start a message, a state introduced when we moved the Reply button from right to left.
2021-05-11 22:52:44 +02:00
<a class="drafts-link no-underline button small rounded compose_drafts_button" href="#drafts" title="{{t 'Drafts' }} (d)">
{{t 'Drafts' }}
</a>
</span>
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>
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>
<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">
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 id="compose_top_right">
<button type="button" class="expand_composebox_button fa fa-angle-up" aria-label="{{t 'Expand compose' }}" tabindex=0 title="{{t 'Expand compose' }}"></button>
<button type="button" class="collapse_composebox_button fa fa-angle-down" aria-label="{{t 'Collapse compose' }}" tabindex=0 title="{{t 'Collapse compose' }}"></button>
<button type="button" class="close" id='compose_close' title="{{t 'Cancel compose' }} (Esc)">&times;</button>
</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
<form id="send_message_form" action="/json/messages" method="post">
{{ csrf_input }}
<div class="compose_table">
<div id="stream-message">
<div class="stream-selection-header-colorblock message_header_stream left_part"></div>
<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>
<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>
</div>
<div id="private-message">
<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>
</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: Restyle compose send button with logo colours. Previous sea-green colour didn't meet the WCAG AA standard guidelines for color contrast. This changes meets WCAG AAA standard.
2021-06-24 11:59:35 +02:00
<button type="submit" id="compose-send-button" class="button small send_message animated-purple-button" title="{{t 'Send' }} (Ctrl + Enter)">{{t 'Send' }}</button>
compose: Move control buttons into a file of their own. These buttons are common with message_edit_form.hbs, we will be sharing this file among compose and message_edit_form.
2021-04-14 21:31:56 +02:00
{{> 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
<span id="sending-indicator"></span>
<div id="send_controls" class="new-style">
<label id="enter-sends-label" class="compose_checkbox_label checkbox">
<input type="checkbox" id="enter_sends" />
<span></span>{{t 'Press Enter to send' }}
</label>
</div>
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
<span id="compose_limit_indicator"></span>
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>