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

76 lines
2.5 KiB
Handlebars
Raw Normal View History

message_grid: Let the avatar participate in CSS Grid. This also ensures that sender info flexes and participates in the grid's baseline group.
2023-06-14 21:03:37 +02:00
{{#if include_sender}}
{{> message_avatar ~}}
{{/if}}
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_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_grid: Share same message grid with me-messages.
2023-06-14 20:40:08 +02:00
<span class="view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template">
{{msg/sender_full_name}}
{{#unless status_message}}
{{> status_emoji msg/status_emoji_info}}
{{/unless}}
</span>
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>
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}}
message_grid: Share same message grid with me-messages.
2023-06-14 20:40:08 +02:00
{{#if status_message}}
<span class="rendered_markdown status-message auto-select">{{rendered_markdown status_message}}</span>
{{#if edited_status_msg}}
{{> edited_notice}}
{{/if}}
{{/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
{{#if edited_alongside_sender}}
message_grid: Share same message grid with me-messages.
2023-06-14 20:40:08 +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}}
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>
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>
UI redesign: more-less message interaction. This commit encompasses the following changes: * Replace the [More...] link with a button titled "Show more". * Replace the [Show Less...] link with a button titled "Show less". * Add various on-hover interactions to the buttons. * In the condensed view, add fading to the bottom of the message to visually communicate that the message is truncated. * Update /help/ description. Fixes #22801. Co-authored-by: Evy Kassirer <evy.kassirer@gmail.com>
2023-04-08 15:19:10 +02:00
<div class="message_length_controller">
<button type="button" class="message_expander message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-expander-tooltip-template">{{t "Show more" }}</button>
<button type="button" class="message_condenser message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-condenser-tooltip-template">{{t "Show less" }}</button>
</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 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}}