mirror of
https://github.com/zulip/zulip.git
synced 2025-11-03 13:33:24 +00:00
message_row: Pull .messagebox-content out of .message_row stack.
This commit is contained in:
Karl Stolley
Tim Abbott
@@ -53,6 +53,112 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.sender_info_hovered {
|
||||
.sender_name {
|
||||
cursor: pointer;
|
||||
/* TODO: Refactor the teetering nested classes
|
||||
above so that !important can be removed. */
|
||||
color: var(--color-text-sender-name-hover) !important;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* Locally echoed messages. */
|
||||
&.locally-echoed .message-time {
|
||||
opacity: 0;
|
||||
/* Don't show pointer when message-time doesn't have a link. */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Show the spinner only for messages that are still locally echoed. */
|
||||
&.locally-echoed .slow-send-spinner {
|
||||
display: unset !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Message-editing styles */
|
||||
.message-edit-buttons-and-timer {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
/* Allow items to occupy full height.
|
||||
This is especially important for
|
||||
buttons that are flex items. */
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.message-actions-button {
|
||||
box-sizing: border-box;
|
||||
/* Display the actions buttons as
|
||||
flex containers for positioning
|
||||
text and spinners. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.message_edit_save {
|
||||
/* Match Save button's basic colors to
|
||||
the compose box Send button. */
|
||||
color: var(--color-compose-send-button-icon-color);
|
||||
background-color: var(--color-compose-send-button-background);
|
||||
|
||||
&:hover {
|
||||
background-color: var(
|
||||
--color-compose-send-button-background-interactive
|
||||
);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
/* Replicate the `.new-style` disabled values,
|
||||
without any color shifts. */
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.message_edit_cancel,
|
||||
.message_edit_close {
|
||||
color: var(--color-exit-button-text);
|
||||
background: var(--color-exit-button-background);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-exit-button-background-interactive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messagebox {
|
||||
grid-area: messagebox;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
/* The left padding value accounts for a 2px
|
||||
unread marker, ensuring a uniform 5px of
|
||||
padding on either side of the message box. */
|
||||
padding: 0 5px 0 3px;
|
||||
|
||||
&:hover .message_controls,
|
||||
&:hover .message_failed {
|
||||
.empty-star:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> div {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messagebox-content {
|
||||
display: grid;
|
||||
align-items: baseline;
|
||||
@@ -97,17 +203,13 @@
|
||||
var(--message-box-avatar-column-width) minmax(0, 1fr) calc(
|
||||
2 * var(--message-box-icon-width)
|
||||
)
|
||||
8px minmax(
|
||||
var(--message-box-timestamp-column-width),
|
||||
max-content
|
||||
);
|
||||
8px minmax(var(--message-box-timestamp-column-width), max-content);
|
||||
}
|
||||
|
||||
.message_controls {
|
||||
grid-area: controls;
|
||||
|
||||
@media (width < $sm_min),
|
||||
((width >= $md_min) and (width < $mc_min)) {
|
||||
@media (width < $sm_min), ((width >= $md_min) and (width < $mc_min)) {
|
||||
/* 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) {
|
||||
@@ -220,7 +322,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.include-sender {
|
||||
.include-sender {
|
||||
.messagebox-content {
|
||||
grid-template-areas:
|
||||
"avatar sender controls . time"
|
||||
@@ -368,112 +470,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.sender_info_hovered {
|
||||
.sender_name {
|
||||
cursor: pointer;
|
||||
/* TODO: Refactor the teetering nested classes
|
||||
above so that !important can be removed. */
|
||||
color: var(--color-text-sender-name-hover) !important;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* Locally echoed messages. */
|
||||
&.locally-echoed .message-time {
|
||||
opacity: 0;
|
||||
/* Don't show pointer when message-time doesn't have a link. */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Show the spinner only for messages that are still locally echoed. */
|
||||
&.locally-echoed .slow-send-spinner {
|
||||
display: unset !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Message-editing styles */
|
||||
.message-edit-buttons-and-timer {
|
||||
margin-top: 5px;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
/* Allow items to occupy full height.
|
||||
This is especially important for
|
||||
buttons that are flex items. */
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.message-actions-button {
|
||||
box-sizing: border-box;
|
||||
/* Display the actions buttons as
|
||||
flex containers for positioning
|
||||
text and spinners. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.message_edit_save {
|
||||
/* Match Save button's basic colors to
|
||||
the compose box Send button. */
|
||||
color: var(--color-compose-send-button-icon-color);
|
||||
background-color: var(--color-compose-send-button-background);
|
||||
|
||||
&:hover {
|
||||
background-color: var(
|
||||
--color-compose-send-button-background-interactive
|
||||
);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
/* Replicate the `.new-style` disabled values,
|
||||
without any color shifts. */
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.message_edit_cancel,
|
||||
.message_edit_close {
|
||||
color: var(--color-exit-button-text);
|
||||
background: var(--color-exit-button-background);
|
||||
|
||||
&:hover {
|
||||
background: var(--color-exit-button-background-interactive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messagebox {
|
||||
grid-area: messagebox;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
/* The left padding value accounts for a 2px
|
||||
unread marker, ensuring a uniform 5px of
|
||||
padding on either side of the message box. */
|
||||
padding: 0 5px 0 3px;
|
||||
|
||||
&:hover .message_controls,
|
||||
&:hover .message_failed {
|
||||
.empty-star:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> div {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unread_marker {
|
||||
margin-left: var(--unread-marker-left);
|
||||
opacity: 0;
|
||||
|
||||
Reference in New Issue
Block a user