From 1fc80091091a8822bbd0fb466c907fc9eba26d25 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 13 May 2022 18:04:27 +0000 Subject: [PATCH] Fix padding of messages in threads (#8574) * Apply the padding setting of EventTile_line of ThreadView to TimelineCard Set 2px padding-top and padding-bottom property to EventTile_line on IRC/modern layout of TimelineCard. Signed-off-by: Suguru Hirahara f Signed-off-by: Suguru Hirahara * Move position property of mx_EventTile_e2eIcon from ThreadPanel to TimelineCard The E2E icon is available only on TimelineCard. Signed-off-by: Suguru Hirahara * yarn run lint:style Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_BaseCard.scss | 2 ++ res/css/views/right_panel/_ThreadPanel.scss | 6 ------ res/css/views/right_panel/_TimelineCard.scss | 10 ++++++---- res/css/views/rooms/_EventTile.scss | 14 +++++--------- 4 files changed, 13 insertions(+), 19 deletions(-) diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 0ef7db404d..52dd99562c 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -15,6 +15,8 @@ limitations under the License. */ .mx_BaseCard { + --BaseCard_EventTile_line-padding-block: 2px; + padding: 0 8px; overflow: hidden; display: flex; diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 67d5f15c38..4d7c00bff1 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -201,12 +201,6 @@ limitations under the License. } } - .mx_EventTile:not([data-layout=bubble]) { - .mx_EventTile_e2eIcon { - left: 8px; - } - } - .mx_MessageComposer { background-color: $background; border-radius: 8px; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 13dd5af6af..d184efad5c 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -57,6 +57,12 @@ limitations under the License. .mx_EventTile_line { padding-inline-start: $left-gutter; padding-inline-end: 36px; + padding-top: var(--BaseCard_EventTile_line-padding-block); + padding-bottom: var(--BaseCard_EventTile_line-padding-block); + + .mx_EventTile_e2eIcon { + inset-inline-start: 8px; + } } .mx_DisambiguatedProfile, @@ -109,10 +115,6 @@ limitations under the License. > .mx_DisambiguatedProfile { margin-left: 36px; } - - .mx_EventTile_line { - padding-bottom: 8px; - } } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 60f72600bf..99db86d53c 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -869,6 +869,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss &:not([data-layout=bubble]) { padding-top: $spacing-16; + + .mx_EventTile_line { + padding-top: var(--BaseCard_EventTile_line-padding-block); + padding-bottom: var(--BaseCard_EventTile_line-padding-block); + } } } @@ -980,13 +985,4 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss padding-right: 11px; // align with right edge of input margin-right: 0; // align with right edge of background } - - .mx_GroupLayout { - .mx_EventTile { - .mx_EventTile_line { - padding-top: 2px; - padding-bottom: 2px; - } - } - } }