From 49c6d10ddb3f71ee344ede4dd2d15ac814ef3aff Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 12 Jul 2022 21:30:59 +0000 Subject: [PATCH] Manage style rules of ReadReceiptGroup position on one file (#8993) * Specify positon of RR on IRC layout on _EventTile.scss Signed-off-by: Suguru Hirahara * Manage a declaration for position of RR on modern/group layout on _EventTile.scss, instead of applying it as a default one Signed-off-by: Suguru Hirahara * Use logical properties Signed-off-by: Suguru Hirahara * Include mx_ReadReceiptGroup in mx_EventTile_msgOption to prevent a regression Signed-off-by: Suguru Hirahara * Manage style blocks of mx_ReadReceiptGroup for every layout on one file Signed-off-by: Suguru Hirahara * Use logical properties Signed-off-by: Suguru Hirahara * Include mx_ReadReceiptGroup in mx_EventTile_msgOption for bubble layout same as the other layouts Signed-off-by: Suguru Hirahara * Include mx_ReadReceiptGroup in mx_EventTile_msgOption on TimelineCard Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 8 ++-- res/css/views/rooms/_EventBubbleTile.scss | 12 ------ res/css/views/rooms/_EventTile.scss | 39 +++++++++++++++++--- res/css/views/rooms/_IRCLayout.scss | 4 -- res/css/views/rooms/_ReadReceiptGroup.scss | 4 -- 5 files changed, 38 insertions(+), 29 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 35692ec240..6380a64526 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -74,6 +74,10 @@ limitations under the License. .mx_EventTile_msgOption { margin-inline-end: 0; + + .mx_ReadReceiptGroup { + top: var(--TimelineCard_ReadReceiptGroup-inset-block-start); + } } .mx_DisambiguatedProfile, @@ -100,10 +104,6 @@ limitations under the License. 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 { margin-inline-end: 0; max-width: min(calc(100% - 36px), 600px); diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 9e87412ca5..939d2ddcd5 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -527,18 +527,6 @@ limitations under the License. } } - .mx_ReadReceiptGroup { - position: absolute; - - // as close to right gutter without clipping as possible - inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end)); - - // (EventTileLine.line-height - ReadReceiptGroup.height) / 2 - // this centers the ReadReceiptGroup if we’ve got a single line - bottom: calc(($font-18px - 24px) / 2); - top: auto; - } - .mx_MTextBody { max-width: 100%; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index d7cc99c7c5..29e73ee6e7 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -250,6 +250,12 @@ $left-gutter: 64px; &[data-layout=irc] { --EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width)); + .mx_EventTile_msgOption { + .mx_ReadReceiptGroup { + inset-block-start: -0.3rem; // ($irc-line-height - avatar height) / 2 + } + } + .mx_MessageTimestamp { text-align: right; } @@ -303,7 +309,14 @@ $left-gutter: 64px; } .mx_EventTile_msgOption { - margin-right: 10px; + margin-inline-end: 10px; + + .mx_ReadReceiptGroup { + // This aligns the avatar with the last line of the + // message. We want to move it one line up + // See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss + inset-block-start: calc(-$font-22px - 3px); + } } .mx_MessageTimestamp { @@ -390,6 +403,20 @@ $left-gutter: 64px; } &[data-layout=bubble] { + .mx_EventTile_msgOption { + .mx_ReadReceiptGroup { + position: absolute; + inset-block-start: auto; + + // as close to right gutter without clipping as possible + inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end)); + + // (EventTileLine.line-height - ReadReceiptGroup.height) / 2 + // this centers the ReadReceiptGroup if we’ve got a single line + inset-block-end: calc(($font-18px - 24px) / 2); + } + } + .mx_EventTileBubble { // Timestamps are inside the tile, so the width can be less constrained max-width: 600px; @@ -1221,10 +1248,12 @@ $left-gutter: 64px; font-size: $font-13px; } - .mx_ReadReceiptGroup { - // This aligns the avatar with the last line of the - // message. We want to move it one line up - 2rem - top: -2rem; + .mx_EventTile_msgOption { + .mx_ReadReceiptGroup { + // This aligns the avatar with the last line of the + // message. We want to move it one line up - 2rem + inset-block-start: -2rem; + } } .mx_EventTile_content .markdown-body { diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index cc358d212e..cad8d8d6c0 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -44,10 +44,6 @@ $irc-line-height: $font-18px; .mx_EventTile_msgOption { order: 5; flex-shrink: 0; - - .mx_ReadReceiptGroup { - top: -0.3rem; // ($irc-line-height - avatar height) / 2 - } } .mx_EventTile_line, diff --git a/res/css/views/rooms/_ReadReceiptGroup.scss b/res/css/views/rooms/_ReadReceiptGroup.scss index 815ef566b4..87932cb993 100644 --- a/res/css/views/rooms/_ReadReceiptGroup.scss +++ b/res/css/views/rooms/_ReadReceiptGroup.scss @@ -19,10 +19,6 @@ limitations under the License. position: relative; display: inline-block; - // This aligns the avatar with the last line of the - // message. We want to move it one line up - // See .mx_EventTile[data-layout=group] .mx_EventTile_line in _EventTile.scss - top: calc(-$font-22px - 3px); user-select: none; z-index: 1;