mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-29 12:58:53 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix read receipts group position on TimelineCard in compact modern/group layout (#8971)

Browse source
This commit is contained in:
Suguru Hirahara 2022-07-03 00:51:57 +09:00 committed by GitHub
parent 9328dca3fd
commit 37d8cfbc50
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
res/css/views/right_panel/_TimelineCard.scss
View file

@ -50,6 +50,8 @@ limitations under the License.
&[data-layout=irc], &[data-layout=irc],
&[data-layout=group] { &[data-layout=group] {
--TimelineCard_ReadReceiptGroup-inset-block-start: -6px;
&.mx_EventTile_info .mx_EventTile_line, &.mx_EventTile_info .mx_EventTile_line,
.mx_EventTile_line { .mx_EventTile_line {
padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline); padding: var(--BaseCard_EventTile_line-padding-block) var(--BaseCard_EventTile-spacing-inline);
@ -97,6 +99,10 @@ limitations under the License.
margin-inline-end: $spacing-8; // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.scss margin-inline-end: $spacing-8; // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.scss
} }
.mx_ReadReceiptGroup {
top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
}
.mx_ThreadSummary { .mx_ThreadSummary {
margin-inline-end: 0; margin-inline-end: 0;
max-width: min(calc(100% - 36px), 600px); max-width: min(calc(100% - 36px), 600px);
@ -110,6 +116,15 @@ limitations under the License.
} }
} }
&[data-layout=group] {
// Read receipt group on compact modern layout
// This is required because mx_TimelineCard is a child element wrapped by mx_MatrixChat_useCompactLayout,
// which specifies the default position of mx_ReadReceiptGroup on compact modern layout.
.mx_MatrixChat_useCompactLayout & .mx_ReadReceiptGroup {
top: var(--TimelineCard_ReadReceiptGroup-inset-block-start);
}
}
&[data-layout=bubble] { &[data-layout=bubble] {
&::before { &::before {
z-index: auto; // enable background color on hover z-index: auto; // enable background color on hover
@ -141,10 +156,6 @@ limitations under the License.
} }
} }
.mx_ReadReceiptGroup {
top: -6px;
}
.mx_WhoIsTypingTile { .mx_WhoIsTypingTile {
margin-left: -12px; // undo padding on the message list margin-left: -12px; // undo padding on the message list
} }