mirror of https://github.com/zulip/zulip.git
message_grid: Share same message grid with me-messages.
This commit is contained in:
Karl Stolley
Tim Abbott
parent
fad4429712
commit
b6d072a8d9
|
|
@ -56,7 +56,7 @@ async function test_edit_message_with_slash_me(page: Page): Promise<void> {
|
|||
);
|
||||
await page.waitForSelector(
|
||||
`xpath/${last_message_xpath}//*[${common.has_class_x(
|
||||
"sender_name-in-status",
|
||||
"sender_name",
|
||||
)} and normalize-space()="Desdemona"]`,
|
||||
);
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ async function test_edit_message_with_slash_me(page: Page): Promise<void> {
|
|||
);
|
||||
await page.waitForSelector(
|
||||
`xpath/${last_message_xpath}//*[${common.has_class_x(
|
||||
"sender_name-in-status",
|
||||
"sender_name",
|
||||
)} and normalize-space()="Desdemona"]`,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
$avatar_column_width: 46px;
|
||||
$distance_of_text_elements_from_message_box_top: 8.5px;
|
||||
$distance_of_non_text_elements_from_message_box_top: 6px;
|
||||
$sender_name_distance_below_flex_center: 3px;
|
||||
$distance_of_non_text_elements_from_message_box: 6px;
|
||||
$message_box_margin: 3px;
|
||||
|
||||
/* The time column usually just needs enough space to display the
|
||||
timestamp. The minimum width here is enough for "22:22 PM", which
|
||||
|
|
@ -223,11 +223,53 @@ $time_column_max_width: 150px;
|
|||
". more . . "
|
||||
". reactions . . ";
|
||||
|
||||
&.is-me-message {
|
||||
grid-template-areas:
|
||||
"avatar sender controls time"
|
||||
"avatar sender . . "
|
||||
". more . . "
|
||||
". reactions . . ";
|
||||
|
||||
.message_sender {
|
||||
/* Don't display message sender as flexbox for me-messages. */
|
||||
display: block;
|
||||
/* This preserves a consistent bottom spacing on the me-message
|
||||
grid, which ordinarily benefits from the margin of <p>
|
||||
elements in the markdown--which single-line me-messages do
|
||||
not receive.
|
||||
|
||||
It also ensures a uniform space-relationship between the top: of the avatar and the top of the sender_name line.
|
||||
|
||||
However, this should all arguably be handled from the grid
|
||||
container or the grid definition itself. */
|
||||
margin: $message_box_margin 0;
|
||||
|
||||
/* Set the same line-height as on message content for
|
||||
me-messages. */
|
||||
line-height: var(--message-box-line-height);
|
||||
|
||||
/* Display message components inline, with wrapping white-space,
|
||||
so the sender name and message display as a continuous line
|
||||
of wrapping text. */
|
||||
.sender_name {
|
||||
white-space: normal;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inline_profile_picture {
|
||||
grid-area: avatar;
|
||||
/* The picture should not participate in the baseline group. */
|
||||
align-self: start;
|
||||
margin-top: $distance_of_non_text_elements_from_message_box_top;
|
||||
/* Because the avatar may be the tallest element in a
|
||||
single-line me message, this margin preserves the
|
||||
overall height of the message box. */
|
||||
margin: $distance_of_non_text_elements_from_message_box 0;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.message_content {
|
||||
|
|
@ -269,48 +311,11 @@ $time_column_max_width: 150px;
|
|||
message-box grid's baseline group, too. */
|
||||
align-items: baseline;
|
||||
|
||||
margin-top: $message_box_margin;
|
||||
|
||||
.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,
|
||||
& ~ .slow-send-spinner,
|
||||
& ~ .message_controls {
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
|
||||
.sender-status {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
margin-top: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.sender_name {
|
||||
margin-top: $sender_name_distance_below_flex_center;
|
||||
padding: $message_box_margin 0 0 5px;
|
||||
}
|
||||
|
||||
.sender_name,
|
||||
|
|
|
|||
|
|
@ -82,6 +82,11 @@ body {
|
|||
--left-sidebar-width: 270px;
|
||||
--right-sidebar-width: 250px;
|
||||
|
||||
/*
|
||||
Message box line-height.
|
||||
*/
|
||||
--message-box-line-height: 1.214;
|
||||
|
||||
/*
|
||||
Left position of unread marker. Only needs to be tracked if it is negative so that
|
||||
it doesn't leak through message header.
|
||||
|
|
@ -1667,7 +1672,7 @@ div.focused_table {
|
|||
|
||||
.message_content {
|
||||
color: var(--color-text-message-default);
|
||||
line-height: 1.214;
|
||||
line-height: var(--message-box-line-height);
|
||||
min-height: 17px;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
<span class="message_sender no-select is_me_message">
|
||||
<span>
|
||||
{{> message_avatar}}
|
||||
</span>
|
||||
|
||||
<span class="sender-status">
|
||||
<span class="sender_info_hover sender_name-in-status auto-select" role="button" tabindex="0">
|
||||
<span class="sender_name_padding view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template"></span>
|
||||
<span class="view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template">
|
||||
{{msg/sender_full_name}}
|
||||
</span>
|
||||
</span>
|
||||
{{#if sender_is_bot}}
|
||||
<i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
|
||||
{{/if}}
|
||||
|
||||
<span class="rendered_markdown status-message auto-select">{{rendered_markdown status_message}}</span>
|
||||
|
||||
{{#if edited_status_msg}}
|
||||
{{> edited_notice}}
|
||||
{{/if}}
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -1,25 +1,30 @@
|
|||
{{#unless status_message}}
|
||||
{{#if include_sender}}
|
||||
{{> message_avatar ~}}
|
||||
{{/if}}
|
||||
<span class="message_sender no-select">
|
||||
{{#if include_sender}}
|
||||
<span class="sender_info_hover sender_name auto-select" role="button" tabindex="0">
|
||||
<span class="view_user_card_tooltip" data-tooltip-template-id="view-user-card-tooltip-template">{{msg/sender_full_name}}{{> status_emoji msg/status_emoji_info}}</span>
|
||||
<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>
|
||||
</span>
|
||||
{{#if sender_is_bot}}
|
||||
<i class="zulip-icon zulip-icon-bot" aria-label="{{t 'Bot' }}"></i>
|
||||
{{/if}}
|
||||
{{#if status_message}}
|
||||
<span class="rendered_markdown status-message auto-select">{{rendered_markdown status_message}}</span>
|
||||
{{#if edited_status_msg}}
|
||||
{{> edited_notice}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{#if edited_alongside_sender}}
|
||||
{{> edited_notice}}
|
||||
{{> edited_notice}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/unless}}
|
||||
|
||||
{{#if status_message}}
|
||||
{{> me_message}}
|
||||
{{/if}}
|
||||
|
||||
<span class="alert-msg"></span>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
{{/if}}
|
||||
<div class="unread_marker message_unread_marker"><div class="unread-marker-fill"></div></div>
|
||||
<div class="messagebox">
|
||||
<div class="messagebox-content">
|
||||
<div class="messagebox-content {{#if status_message}}is-me-message{{/if}}">
|
||||
{{> message_body}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue