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

77 lines
2.3 KiB
Handlebars
Raw Normal View History

css: Use grid layout for messages. Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
2022-12-09 10:13:09 +01:00
{{#unless status_message}}
message_row: Shrink sender_info_hover region. The sender_info_hover region incorrectly filled the full row to the right of the sender's name, resulting in the blue highlight being visible in parts of the message that should be just the message body. Fix this by moving the selectors for it further down in the DOM. Fixes #25276.
2023-04-27 19:52:56 +02:00
<span class="message_sender no-select">
css: Use grid layout for messages. Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
2022-12-09 10:13:09 +01:00
{{#if include_sender}}
message: Keep user card tooltip limited to user name and avatar. We accidentally added tooltip to open user card to a much larger area than intended as a regression from moving the message to use grid. In this, we keep it limited to user name and avatar by adding the tooltip directly to them.
2023-01-20 11:47:07 +01:00
<span>
css: Use grid layout for messages. Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
2022-12-09 10:13:09 +01:00
{{> message_avatar ~}}
message_row: Shrink sender_info_hover region. The sender_info_hover region incorrectly filled the full row to the right of the sender's name, resulting in the blue highlight being visible in parts of the message that should be just the message body. Fix this by moving the selectors for it further down in the DOM. Fixes #25276.
2023-04-27 19:52:56 +02:00
<span class="sender_info_hover sender_name auto-select" role="button" tabindex="0">
message_body: Keep the sender name padding as a different element. This helps us align the tooltip on sender name at the center of it while still having a tooltip in the gap between avatar and sender name.
2023-01-24 10:00:45 +01:00
<span class="sender_name_padding view_user_card_tooltip"></span>
<span class="view_user_card_tooltip">{{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}}</span>
</span>
css: Use grid layout for messages. Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
2022-12-09 10:13:09 +01:00
{{#if sender_is_bot}}
<i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
{{/if}}
{{#if edited_alongside_sender}}
{{> edited_notice}}
refactor: Extract message_body.handlebars. This is the real guts of how we render messages. It only excludes the border effects, which we leave in single_message.handlebars. This is a pure code move, and should remove a lot of nesting that would otherwise clutter one's view.
2019-02-23 16:44:49 +01:00
{{/if}}
</span>
refactor: Move /me complexity out of body template. One goal of this commit is to just make the "happy path" code a lot easier to read. It should be pretty easy to verify that in this diff. And then more stuff is now in me_message. This is a pure code move, and it doesn't fix these structural issues yet: * the "say hi" part of "/me says hi" is inside ".message_sender" (due to legacy positioning issues) * the avatar is outside of .sender-status (again due to legacy positioning issue) * we don't have sender_info_hover on the sender name (which causes it not to launch the user menu)
2019-03-08 18:01:47 +01:00
{{/if}}
css: Use grid layout for messages. Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
2022-12-09 10:13:09 +01:00
</span>
{{/unless}}
refactor: Extract message_body.handlebars. This is the real guts of how we render messages. It only excludes the border effects, which we leave in single_message.handlebars. This is a pure code move, and should remove a lot of nesting that would otherwise clutter one's view.
2019-02-23 16:44:49 +01:00
css: Use grid layout for messages. Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
2022-12-09 10:13:09 +01:00
{{#if status_message}}
{{> me_message}}
{{/if}}
refactor: Extract message_body.handlebars. This is the real guts of how we render messages. It only excludes the border effects, which we leave in single_message.handlebars. This is a pure code move, and should remove a lot of nesting that would otherwise clutter one's view.
2019-02-23 16:44:49 +01:00
css: Use grid layout for messages. Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
2022-12-09 10:13:09 +01:00
<span class="alert-msg"></span>
refactor: Extract message_body.handlebars. This is the real guts of how we render messages. It only excludes the border effects, which we leave in single_message.handlebars. This is a pure code move, and should remove a lot of nesting that would otherwise clutter one's view.
2019-02-23 16:44:49 +01:00
message_body: Remove link from message time when locally echoed. Fixes #25069 Since the locally echoed link of message doesn't work, it is better to remove it.
2023-04-15 14:17:58 +02:00
<a {{#unless msg/locally_echoed}}href="{{ msg/url }}"{{/unless}} class="message_time{{#if status_message}} status-time{{/if}}">
css: Use grid layout for messages. Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
2022-12-09 10:13:09 +01:00
{{#unless include_sender}}
<span class="copy-paste-text">&nbsp;</span>
{{/unless}}
{{timestr}}
</a>
refactor: Extract message_body.handlebars. This is the real guts of how we render messages. It only excludes the border effects, which we leave in single_message.handlebars. This is a pure code move, and should remove a lot of nesting that would otherwise clutter one's view.
2019-02-23 16:44:49 +01:00
messages: Add spinner for messages sent on slow connections. At times, it might get confusing for users who are on slow connections if their messages has not been sent even after 5s. Including a spinner that will only show up after 5 seconds has elapsed will keep user informed about their slow connection. 5s is set as minimum time because showing up a spinner before than might be distracting for users on normal connections. Fixes: #19328.
2023-03-17 19:54:09 +01:00
{{#if msg/locally_echoed}}
<span class="fa fa-circle-o-notch slow-send-spinner hidden"></span>
{{/if}}
css: Use grid layout for messages. Using grid layout moves us away from fixed widths and position for items where possible, which will make it easier to make messagebox changes without breaking formatting. Visual changes expected in this commit: - When the action buttons overlap the message content, it will no longer visually overlap but completely cut off the content — which is good, but means the messages can’t be as wide on narrow width views. There’s a slight improvement to this in an upcoming commit. Also removes the `last_message` CSS, which was busted due to the `last_message` calculation not correctly being updated for new messages arriving, and didn't improve styling.
2022-12-09 10:13:09 +01:00
{{> message_controls}}
refactor: Extract message_body.handlebars. This is the real guts of how we render messages. It only excludes the border effects, which we leave in single_message.handlebars. This is a pure code move, and should remove a lot of nesting that would otherwise clutter one's view.
2019-02-23 16:44:49 +01:00
me messages: Avoid empty "message_content" div. We no longer have an empty message_content div for messages like this: /me gets some coffee This requires a minor change in how we compute the position of the message for editing.
2019-03-07 15:23:57 +01:00
{{#unless status_message}}
message view: Hide messages sent by muted users. * We hide the sender and reactions on messages sent by muted users, and replace the content with a "This message was hidden" dialog. * Ideally, we should collapse a series of consequetive messages sent by muted users into one such dialog, but that could break the cursor behaviour and `near/<message_id` links, so we as of now show one dialog per muted message. * Because we hide the sender, there is a chance of the first hidden message in a group looking like it was sent by the author of the message above it. To tackle this, we intentionally make the hidden message dialog float-left, so that it is clear that this is a special type of message. * For context, we still show the timestamp of the message. * Starring, editing, deleting etc a message still work just like before. A further commit will add the ability to reveal a hidden message.
2021-05-04 09:01:47 +02:00
{{#unless is_hidden}}
linters: Rewrite check-templates. I rewrote most of tools/lib/pretty-printer.py, which was fairly easy due to being able to crib some important details from the previous implementation. The main motivation for the rewrite was that we weren't handling else/elif blocks correctly, and it was difficult to modify the previous code. The else/elif shortcomings were somewhat historical in nature--the original parser didn't recognize them (since they weren't in any Zulip templates at the time), and then the pretty printer was mostly able to hack around that due to the "nudge" strategy. Eventually the nudge strategy became too brittle. The "nudge" strategy was that we would mostly trust the existing templates, and we would just nudge over some lines in cases of obviously faulty indentation. Now we are bit more opinionated and rigorous, and we basically set the indentation explicitly for any line that is not in a code/script block. This leads to this diff touching several templates for mostly minor fix-ups. We aren't completely opinionated, as we respect the author's line wrapping decisions in many cases, and we also allow authors not to indent blocks within the template language's block constructs.
2021-11-20 13:25:41 +01:00
<div class="message_content rendered_markdown">
{{#if use_match_properties}}
{{rendered_markdown msg/match_content}}
{{else}}
{{rendered_markdown msg/content}}
{{/if}}
</div>
message view: Hide messages sent by muted users. * We hide the sender and reactions on messages sent by muted users, and replace the content with a "This message was hidden" dialog. * Ideally, we should collapse a series of consequetive messages sent by muted users into one such dialog, but that could break the cursor behaviour and `near/<message_id` links, so we as of now show one dialog per muted message. * Because we hide the sender, there is a chance of the first hidden message in a group looking like it was sent by the author of the message above it. To tackle this, we intentionally make the hidden message dialog float-left, so that it is clear that this is a special type of message. * For context, we still show the timestamp of the message. * Starring, editing, deleting etc a message still work just like before. A further commit will add the ability to reveal a hidden message.
2021-05-04 09:01:47 +02:00
{{else}}
message_body: Structure hidden message similar to a normal message. Messages sent by muted users are hidden. To make sure they are displayed properly, we provide them a HTML structure similar to that of a normal message so that any CSS applied to a normal message also applied to it. This fixes message controls being misaligned in hidden message.
2023-01-19 09:55:13 +01:00
<div class="message_content rendered_markdown">
{{> message_hidden_dialog}}
</div>
message view: Hide messages sent by muted users. * We hide the sender and reactions on messages sent by muted users, and replace the content with a "This message was hidden" dialog. * Ideally, we should collapse a series of consequetive messages sent by muted users into one such dialog, but that could break the cursor behaviour and `near/<message_id` links, so we as of now show one dialog per muted message. * Because we hide the sender, there is a chance of the first hidden message in a group looking like it was sent by the author of the message above it. To tackle this, we intentionally make the hidden message dialog float-left, so that it is clear that this is a special type of message. * For context, we still show the timestamp of the message. * Starring, editing, deleting etc a message still work just like before. A further commit will add the ability to reveal a hidden message.
2021-05-04 09:01:47 +02:00
{{/unless}}
me messages: Avoid empty "message_content" div. We no longer have an empty message_content div for messages like this: /me gets some coffee This requires a minor change in how we compute the position of the message for editing.
2019-03-07 15:23:57 +01:00
{{/unless}}
refactor: Extract message_body.handlebars. This is the real guts of how we render messages. It only excludes the border effects, which we leave in single_message.handlebars. This is a pure code move, and should remove a lot of nesting that would otherwise clutter one's view.
2019-02-23 16:44:49 +01:00
message_list_view: Move edited position conditionals to JS. This adds three bools to message_container object which calculate bools where the "(EDITED)" label should appear: * `edited_in_left_col` -- when label appears in left column. * `edited_alongside_sender` -- when label appears alongside sender info. * `edited_status_msg` -- when label appears for a "/me" message. We use the new bools and remove the complicated if else statements from the templates for the "(EDITED)" label. This also allows us to add a unit test to verify the logic.
2019-03-15 19:42:24 +01:00
{{#if edited_in_left_col}}
templates: Use upstream Handlebars partials syntax. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-07-11 04:05:28 +02:00
{{> edited_notice}}
refactor: Extract message_body.handlebars. This is the real guts of how we render messages. It only excludes the border effects, which we leave in single_message.handlebars. This is a pure code move, and should remove a lot of nesting that would otherwise clutter one's view.
2019-02-23 16:44:49 +01:00
{{/if}}
<div class="message_edit">
<div class="message_edit_form"></div>
</div>
tooltips: Add tippy tooltip for message expander/condenser. Added tippy tootip for '.message_expander' and '.messsage_condenser' by adding '.tippy-zulip-delayed-tooltip' class, and creating 2 <template> with id equal to crresponding data-tooltip-template-id of the elements. Fixes part of #24311
2023-04-08 22:57:58 +02:00
<div class="message_expander message_length_controller tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-expander-tooltip-template">{{t "[More…]" }}</div>
<div class="message_condenser message_length_controller tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-condenser-tooltip-template">[{{t "Show less" }}]</div>
message view: Hide messages sent by muted users. * We hide the sender and reactions on messages sent by muted users, and replace the content with a "This message was hidden" dialog. * Ideally, we should collapse a series of consequetive messages sent by muted users into one such dialog, but that could break the cursor behaviour and `near/<message_id` links, so we as of now show one dialog per muted message. * Because we hide the sender, there is a chance of the first hidden message in a group looking like it was sent by the author of the message above it. To tackle this, we intentionally make the hidden message dialog float-left, so that it is clear that this is a special type of message. * For context, we still show the timestamp of the message. * Starring, editing, deleting etc a message still work just like before. A further commit will add the ability to reveal a hidden message.
2021-05-04 09:01:47 +02:00
tooltips: Add tippy tooltip for message expander/condenser. Added tippy tootip for '.message_expander' and '.messsage_condenser' by adding '.tippy-zulip-delayed-tooltip' class, and creating 2 <template> with id equal to crresponding data-tooltip-template-id of the elements. Fixes part of #24311
2023-04-08 22:57:58 +02:00
<template id="message-expander-tooltip-template">
{{t 'Show more' }}
{{tooltip_hotkey_hints "-"}}
</template>
<template id="message-condenser-tooltip-template">
{{t 'Show less' }}
{{tooltip_hotkey_hints "-"}}
</template>
message view: Hide messages sent by muted users. * We hide the sender and reactions on messages sent by muted users, and replace the content with a "This message was hidden" dialog. * Ideally, we should collapse a series of consequetive messages sent by muted users into one such dialog, but that could break the cursor behaviour and `near/<message_id` links, so we as of now show one dialog per muted message. * Because we hide the sender, there is a chance of the first hidden message in a group looking like it was sent by the author of the message above it. To tackle this, we intentionally make the hidden message dialog float-left, so that it is clear that this is a special type of message. * For context, we still show the timestamp of the message. * Starring, editing, deleting etc a message still work just like before. A further commit will add the ability to reveal a hidden message.
2021-05-04 09:01:47 +02:00
{{#unless is_hidden}}
templates: Use upstream Handlebars partials syntax. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-07-11 04:05:28 +02:00
<div class="message_reactions">{{> message_reactions }}</div>
message view: Hide messages sent by muted users. * We hide the sender and reactions on messages sent by muted users, and replace the content with a "This message was hidden" dialog. * Ideally, we should collapse a series of consequetive messages sent by muted users into one such dialog, but that could break the cursor behaviour and `near/<message_id` links, so we as of now show one dialog per muted message. * Because we hide the sender, there is a chance of the first hidden message in a group looking like it was sent by the author of the message above it. To tackle this, we intentionally make the hidden message dialog float-left, so that it is clear that this is a special type of message. * For context, we still show the timestamp of the message. * Starring, editing, deleting etc a message still work just like before. A further commit will add the ability to reveal a hidden message.
2021-05-04 09:01:47 +02:00
{{/unless}}