mirror of
https://github.com/zulip/zulip.git
synced 2025-11-10 00:46:03 +00:00
message_row: Pull .messagebox-content out of .message_row stack.
This commit is contained in:
Karl Stolley
Tim Abbott
@@ -53,7 +53,113 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.messagebox-content {
|
&.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;
|
display: grid;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
@@ -97,17 +203,13 @@
|
|||||||
var(--message-box-avatar-column-width) minmax(0, 1fr) calc(
|
var(--message-box-avatar-column-width) minmax(0, 1fr) calc(
|
||||||
2 * var(--message-box-icon-width)
|
2 * var(--message-box-icon-width)
|
||||||
)
|
)
|
||||||
8px minmax(
|
8px minmax(var(--message-box-timestamp-column-width), max-content);
|
||||||
var(--message-box-timestamp-column-width),
|
|
||||||
max-content
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.message_controls {
|
.message_controls {
|
||||||
grid-area: controls;
|
grid-area: controls;
|
||||||
|
|
||||||
@media (width < $sm_min),
|
@media (width < $sm_min), ((width >= $md_min) and (width < $mc_min)) {
|
||||||
((width >= $md_min) and (width < $mc_min)) {
|
|
||||||
/* This is intended to target the first message_controls child
|
/* This is intended to target the first message_controls child
|
||||||
when there are 3 displayed. 4 = 3 + hidden message_failed element. */
|
when there are 3 displayed. 4 = 3 + hidden message_failed element. */
|
||||||
.message_control_button:nth-last-child(4) {
|
.message_control_button:nth-last-child(4) {
|
||||||
@@ -218,9 +320,9 @@
|
|||||||
This works for condensed messages, too. */
|
This works for condensed messages, too. */
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.include-sender {
|
.include-sender {
|
||||||
.messagebox-content {
|
.messagebox-content {
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"avatar sender controls . time"
|
"avatar sender controls . time"
|
||||||
@@ -366,112 +468,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 {
|
.unread_marker {
|
||||||
|
|||||||
Reference in New Issue
Block a user