mirror of https://github.com/zulip/zulip.git
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.
This commit is contained in:
Aman Agrawal
Tim Abbott
parent
953277bdae
commit
26011c98fd
|
|
@ -32,6 +32,7 @@ import "../../styles/components.css";
|
|||
import "../../styles/app_components.css";
|
||||
import "../../styles/rendered_markdown.css";
|
||||
import "../../styles/zulip.css";
|
||||
import "../../styles/message_row.css";
|
||||
import "../../styles/modal.css";
|
||||
import "../../styles/settings.css";
|
||||
import "../../styles/image_upload_widget.css";
|
||||
|
|
|
|||
|
|
@ -396,7 +396,7 @@ function edit_message($row, raw_content) {
|
|||
$row.find(".message_reactions").hide();
|
||||
condense.hide_message_expander($row);
|
||||
condense.hide_message_condenser($row);
|
||||
const content_top = $row.find(".message_top_line")[0].getBoundingClientRect().top;
|
||||
const content_top = $row.find(".message_controls")[0].getBoundingClientRect().top;
|
||||
|
||||
const message = message_lists.current.get(rows.id($row));
|
||||
|
||||
|
|
|
|||
|
|
@ -102,7 +102,17 @@
|
|||
}
|
||||
|
||||
.messagebox-content {
|
||||
padding: 4px 10px 1px;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto max-content;
|
||||
padding: 10px;
|
||||
|
||||
.message_content {
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
|
||||
.message_top_line {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.messagebox {
|
||||
|
|
@ -110,18 +120,8 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.message_content {
|
||||
line-height: 1;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-right: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.draft_controls {
|
||||
display: inline-block;
|
||||
padding-top: 10px;
|
||||
float: right;
|
||||
font-size: 0.9em;
|
||||
|
||||
[data-tippy-root] {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
#message-edit-history {
|
||||
.message_top_line {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.message_time {
|
||||
position: static;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,240 @@
|
|||
$avatar_column_width: 46px;
|
||||
$distance_of_text_elements_from_message_box_top: 10px;
|
||||
$distance_of_non_text_elements_from_message_box_top: 6px;
|
||||
$sender_name_distance_below_flex_center: 3px;
|
||||
|
||||
.message_row {
|
||||
.messagebox .messagebox-content {
|
||||
/* Total 868px
|
||||
1 56px 2 697px 3 55px 4 60px 5
|
||||
1 |‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾|
|
||||
| : TEXT : + ⋮ ☆ : 10:00 AM |
|
||||
| : TEXT : : |
|
||||
| EDITED : TEXT : : |
|
||||
| : TEXT : : |
|
||||
| : TEXT : : |
|
||||
2,3 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
||||
| : : : |
|
||||
| : [EXPAND / COLLAPSE] : : |
|
||||
4 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
||||
| : : : |
|
||||
| : [Message Reactions] : : |
|
||||
5 |___________:____________________________________________________________________________________________________:______________:____________|
|
||||
*/
|
||||
display: grid;
|
||||
align-items: start;
|
||||
padding-left: 10px;
|
||||
grid-template-rows: repeat(4, auto);
|
||||
|
||||
grid-template-columns: $avatar_column_width auto 55px 60px;
|
||||
|
||||
@media (width < $sm_min) {
|
||||
grid-template-columns: $avatar_column_width auto max-content 60px;
|
||||
}
|
||||
|
||||
.message_controls {
|
||||
grid-row-start: 1;
|
||||
grid-column-start: 3;
|
||||
line-height: 1;
|
||||
justify-self: end;
|
||||
/* We need to position it from top and not vertically centered since we want it
|
||||
to have the same position from top when user is editing the message. */
|
||||
position: relative;
|
||||
top: $distance_of_non_text_elements_from_message_box_top;
|
||||
padding: 0;
|
||||
|
||||
@media (width < $sm_min) {
|
||||
padding: 0 4px;
|
||||
|
||||
/* This is intended to target the first message_controls child
|
||||
when there are 3 displayed. 4 = 3 + hidden message_failed element. */
|
||||
.message_control_button:nth-last-child(4) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message_edit_notice {
|
||||
grid-row-start: 1;
|
||||
position: relative;
|
||||
top: $distance_of_text_elements_from_message_box_top;
|
||||
}
|
||||
|
||||
.message_time {
|
||||
line-height: 1;
|
||||
justify-self: end;
|
||||
padding-right: 10px;
|
||||
grid-row-start: 1;
|
||||
grid-column-start: 4;
|
||||
position: relative;
|
||||
top: $distance_of_text_elements_from_message_box_top;
|
||||
|
||||
&.notvisible {
|
||||
/* This happens when message failed to send. We don't want to
|
||||
display time but still want it to occupy space. */
|
||||
width: 45px !important;
|
||||
position: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
.message_content {
|
||||
grid-row-start: 1;
|
||||
grid-column-start: 2;
|
||||
padding: 4px 0 1px;
|
||||
}
|
||||
|
||||
.message_reactions {
|
||||
grid-row-start: 4;
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.message_edit {
|
||||
grid-row-start: 2;
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.alert-msg {
|
||||
grid-row-start: 1;
|
||||
grid-column: 3 / 5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.message_length_controller {
|
||||
grid-row-start: 3;
|
||||
grid-column-start: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.include-sender {
|
||||
/*
|
||||
1 2 3 4 5
|
||||
1 |‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾|
|
||||
| ((((\\\ : Sender Name EDITED : + ⋮ ☆ : 10:00 AM |
|
||||
2 | 9_9 3)) :_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
||||
| \= (( : TEXT : : |
|
||||
| : TEXT : : |
|
||||
| : TEXT : : |
|
||||
| : TEXT : : |
|
||||
| : TEXT : : |
|
||||
3 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
||||
| : : : |
|
||||
| : [EXPAND / COLLAPSE] : : |
|
||||
4 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
||||
| : : : |
|
||||
| : [Message Reactions] : : |
|
||||
5 |___________:____________________________________________________________________________________________________:______________:____________|
|
||||
*/
|
||||
.messagebox .messagebox-content {
|
||||
grid-template-rows: 25px repeat(3, auto);
|
||||
padding-top: 2px;
|
||||
|
||||
.message_content {
|
||||
padding-top: 0;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.message_time {
|
||||
align-self: center;
|
||||
position: unset;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.message_edit_notice {
|
||||
align-self: center;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.message_controls {
|
||||
align-self: center;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.message_sender {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
|
||||
.zulip-icon.zulip-icon-bot {
|
||||
align-self: center;
|
||||
padding: $sender_name_distance_below_flex_center 0 0 5px;
|
||||
}
|
||||
|
||||
&.is_me_message {
|
||||
/*
|
||||
1 2 3 4 5
|
||||
1,2 |‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾‾‾:‾‾‾‾‾‾‾‾‾‾‾‾|
|
||||
| ((((\\\ : : : |
|
||||
| 9_9 3)) : Sender Name is excited to write this multiline message that goes to the next line and takes the : + ⋮ ☆ : 10:00 AM |
|
||||
| \= (( : edit status with it to the next line. EDITED : : |
|
||||
3 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
||||
| : : : |
|
||||
| : [EXPAND / COLLAPSE] : : |
|
||||
4 |_ _ _ _ _ _:_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ : _ _ _ _ _ _ _:_ _ _ _ _ _ |
|
||||
| : : : |
|
||||
| : [Message Reactions] : : |
|
||||
5 |___________:____________________________________________________________________________________________________:______________:____________|
|
||||
*/
|
||||
min-height: $avatar_column_width;
|
||||
grid-row: 1 / 3;
|
||||
display: grid;
|
||||
grid-template-columns: $avatar_column_width auto;
|
||||
grid-template-rows: auto;
|
||||
|
||||
& ~ .alert-msg,
|
||||
& ~ .message_time,
|
||||
& ~ .message_controls {
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
.sender-status {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
margin-top: 13px;
|
||||
|
||||
.message_edit_notice {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.inline_profile_picture {
|
||||
flex-shrink: 0;
|
||||
/* Let user profile picture take extra height without
|
||||
having any affect on height of the container. */
|
||||
position: absolute;
|
||||
margin-top: $distance_of_non_text_elements_from_message_box_top;
|
||||
}
|
||||
|
||||
.sender_name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
/* It is important to use line-height `normal` here since user's name can
|
||||
be in any language and `line-height: 1` doesn't work to accommodate text
|
||||
from start and end vertically in all languages. */
|
||||
line-height: normal;
|
||||
/* Add padding to align user name with the content */
|
||||
padding-left: $avatar_column_width;
|
||||
outline: none;
|
||||
margin-top: $sender_name_distance_below_flex_center;
|
||||
}
|
||||
}
|
||||
|
||||
&.content_edit_mode {
|
||||
.is_me_message {
|
||||
& ~ .alert-msg,
|
||||
& ~ .message_time,
|
||||
& ~ .message_controls {
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
.message_reactions {
|
||||
padding-left: 46px;
|
||||
overflow: hidden;
|
||||
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -933,30 +933,6 @@ td.pointer {
|
|||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.message_time {
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.alert-msg {
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.message_controls {
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.message_top_line {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.message_content:not(:empty) {
|
||||
margin-top: -18px;
|
||||
}
|
||||
|
||||
.message_edit {
|
||||
margin-top: -14px;
|
||||
}
|
||||
}
|
||||
|
||||
.sender-status {
|
||||
|
|
@ -989,13 +965,6 @@ td.pointer {
|
|||
.message_edit_notice {
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
line-height: 0px;
|
||||
text-align: right;
|
||||
padding-left: 5px;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 16px;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -1006,12 +975,7 @@ td.pointer {
|
|||
display: block;
|
||||
font-size: 12px;
|
||||
opacity: 0.4;
|
||||
padding: 1px;
|
||||
font-weight: 400;
|
||||
position: absolute;
|
||||
right: -105px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
/* Disable blue link styling for the message timestamp link. */
|
||||
color: hsl(0, 0%, 20%);
|
||||
transition: background-color 1.5s ease-in, color 1.5s ease-in;
|
||||
|
|
@ -1025,13 +989,9 @@ td.pointer {
|
|||
z-index is kinda hacky, and requires some annoying color-matching,
|
||||
but it works. */
|
||||
.alert-msg {
|
||||
position: absolute;
|
||||
right: -110px;
|
||||
color: hsl(170, 48%, 54%);
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
z-index: 999;
|
||||
padding-left: 20px;
|
||||
padding-right: 40px;
|
||||
font-weight: 400;
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1042,11 +1002,6 @@ td.pointer {
|
|||
|
||||
.message_controls {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -56px;
|
||||
width: 54px;
|
||||
height: 22px;
|
||||
z-index: 1;
|
||||
|
||||
/* This is a bit tricky; we need to reserve space for the message
|
||||
|
|
@ -1116,11 +1071,10 @@ td.pointer {
|
|||
opacity: 1 !important;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
/* error icon width is 11px, gap between icons equals 28px - 2*11px = 6px */
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
padding-left: 2px;
|
||||
|
||||
.rotating {
|
||||
display: inline-block;
|
||||
|
|
@ -1132,6 +1086,7 @@ td.pointer {
|
|||
opacity: 1 !important;
|
||||
color: hsl(0, 100%, 50%);
|
||||
font-weight: bold;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.message_control_button {
|
||||
|
|
@ -1177,10 +1132,6 @@ td.pointer {
|
|||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.message_top_line {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.message_header {
|
||||
|
|
@ -1448,16 +1399,6 @@ td.pointer {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.last_message {
|
||||
.unread_marker {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.messagebox-content {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.unread .unread_marker {
|
||||
transition: all 0.3s ease-out;
|
||||
opacity: 1;
|
||||
|
|
@ -1476,10 +1417,6 @@ td.pointer {
|
|||
}
|
||||
|
||||
.message_sender {
|
||||
height: 0;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
i.zulip-icon.zulip-icon-bot {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -1488,8 +1425,6 @@ td.pointer {
|
|||
.sender_name {
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
vertical-align: top;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.sender_name-in-status {
|
||||
|
|
@ -1562,10 +1497,6 @@ a.dark_background:hover,
|
|||
color: hsl(200, 99%, 60%);
|
||||
}
|
||||
|
||||
.message_top_line {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
@ -1610,7 +1541,6 @@ div.focused_table {
|
|||
.message_content {
|
||||
line-height: 1.214;
|
||||
min-height: 17px;
|
||||
margin-left: 46px;
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
|
@ -1768,9 +1698,6 @@ div.focused_table {
|
|||
text-align: center;
|
||||
color: hsl(200, 100%, 40%);
|
||||
|
||||
/* to match .message_content */
|
||||
margin-left: 5px;
|
||||
margin-right: 35px;
|
||||
/* to make message-uncollapse easier */
|
||||
margin-top: 10px;
|
||||
|
||||
|
|
@ -1779,10 +1706,6 @@ div.focused_table {
|
|||
}
|
||||
}
|
||||
|
||||
.messagebox-content {
|
||||
padding: 4px 115px 1px 10px;
|
||||
}
|
||||
|
||||
.bookend {
|
||||
margin-top: 10px;
|
||||
background-color: transparent;
|
||||
|
|
@ -2737,9 +2660,6 @@ textarea.invitee_emails {
|
|||
|
||||
.message_edit {
|
||||
display: none;
|
||||
margin-top: 5px;
|
||||
margin-left: 47px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Reduce some of the heavy padding from Bootstrap. */
|
||||
|
|
@ -3170,30 +3090,12 @@ textarea.invitee_emails {
|
|||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* In mobile views we place it just to the right of the time element */
|
||||
.message_controls {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.include-sender .message_controls {
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.message_time {
|
||||
left: auto;
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
.sender_name {
|
||||
max-width: 250px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
#floating_recipient_bar {
|
||||
top: 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<span class="message_sender no-select">
|
||||
<span class="message_sender no-select is_me_message">
|
||||
<span class="sender_info_hover">
|
||||
<span title="{{t 'View user card' }} (u)">
|
||||
{{> message_avatar}}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,34 @@
|
|||
<div class="message_top_line">
|
||||
{{#unless status_message}}
|
||||
<span class="message_sender sender_info_hover no-select">
|
||||
{{#if include_sender}}
|
||||
<span title="{{t 'View user card' }} (u)">
|
||||
{{> message_avatar ~}}
|
||||
<span class="sender_name auto-select" role="button" tabindex="0">{{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}}</span>
|
||||
{{#if sender_is_bot}}
|
||||
<i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
|
||||
{{/if}}
|
||||
</span>
|
||||
{{#unless status_message}}
|
||||
<span class="message_sender sender_info_hover no-select">
|
||||
{{#if include_sender}}
|
||||
<span title="{{t 'View user card' }} (u)">
|
||||
{{> message_avatar ~}}
|
||||
<span class="sender_name auto-select" role="button" tabindex="0">{{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}}</span>
|
||||
{{#if sender_is_bot}}
|
||||
<i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
|
||||
{{/if}}
|
||||
{{#if edited_alongside_sender}}
|
||||
{{> edited_notice}}
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{#if status_message}}
|
||||
{{> me_message}}
|
||||
{{/if}}
|
||||
|
||||
<span class="alert-msg"></span>
|
||||
|
||||
<a href="{{ msg/url }}" class="message_time{{#if msg.locally_echoed}} notvisible{{/if}}{{#if status_message}} status-time{{/if}}">
|
||||
{{#unless include_sender}}
|
||||
<span class="copy-paste-text"> </span>
|
||||
{{/unless}}
|
||||
{{timestr}}
|
||||
</a>
|
||||
|
||||
{{#if status_message}}
|
||||
{{> me_message}}
|
||||
{{/if}}
|
||||
|
||||
<span class="alert-msg pull-right"></span>
|
||||
|
||||
<a href="{{ msg/url }}" class="message_time{{#if msg.locally_echoed}} notvisible{{/if}}{{#if status_message}} status-time{{/if}}">
|
||||
{{#unless include_sender}}
|
||||
<span class="copy-paste-text"> </span>
|
||||
{{/unless}}
|
||||
{{timestr}}
|
||||
</a>
|
||||
|
||||
{{#if edited_alongside_sender}}
|
||||
{{> edited_notice}}
|
||||
{{/if}}
|
||||
|
||||
{{> message_controls}}
|
||||
|
||||
</div>
|
||||
{{> message_controls}}
|
||||
|
||||
{{#unless status_message}}
|
||||
{{#unless is_hidden}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue