From 780f8382125fd04c92b9eff5d271f0963cfde29c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 7 May 2022 16:59:44 +0900 Subject: [PATCH 1/3] 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 --- res/css/views/right_panel/_BaseCard.scss | 2 ++ res/css/views/right_panel/_TimelineCard.scss | 9 +++++---- res/css/views/rooms/_EventTile.scss | 14 +++++--------- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 0ef7db404df..52dd99562c3 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/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 13dd5af6af0..f25c8b3c387 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -93,6 +93,11 @@ limitations under the License. margin-right: 2px; } + .mx_EventTile_line { + padding-top: var(--BaseCard_EventTile_line-padding-block); + padding-bottom: var(--BaseCard_EventTile_line-padding-block); + } + &.mx_EventTile_info { .mx_EventTile_line { padding-left: $left-gutter; @@ -109,10 +114,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 60f72600bf5..99db86d53c5 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; - } - } - } } From f7ec3ab73af64ab9360308dfb2c41e91ef8ebdb8 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 13 May 2022 12:51:04 +0900 Subject: [PATCH 2/3] Move position property of mx_EventTile_e2eIcon from ThreadPanel to TimelineCard The E2E icon is available only on TimelineCard. Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 6 ------ res/css/views/right_panel/_TimelineCard.scss | 4 ++++ 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 67d5f15c38b..4d7c00bff11 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 f25c8b3c387..9ac106d5874 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -96,6 +96,10 @@ limitations under the License. .mx_EventTile_line { padding-top: var(--BaseCard_EventTile_line-padding-block); padding-bottom: var(--BaseCard_EventTile_line-padding-block); + + .mx_EventTile_e2eIcon { + inset-inline-start: 8px; + } } &.mx_EventTile_info { From 3827fd31a191eeb3d7a9e8a00181c98ba680598b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 13 May 2022 13:45:42 +0900 Subject: [PATCH 3/3] yarn run lint:style Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_TimelineCard.scss | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index 9ac106d5874..d184efad5c0 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, @@ -93,15 +99,6 @@ limitations under the License. margin-right: 2px; } - .mx_EventTile_line { - padding-top: var(--BaseCard_EventTile_line-padding-block); - padding-bottom: var(--BaseCard_EventTile_line-padding-block); - - .mx_EventTile_e2eIcon { - inset-inline-start: 8px; - } - } - &.mx_EventTile_info { .mx_EventTile_line { padding-left: $left-gutter;