From 5aa40fabcb09993315bee2e387d6b04664f6e6d6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 13 May 2022 23:57:04 +0900 Subject: [PATCH 1/4] Remove margin from warning E2E icon between an avatar and a hidden event Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 161fe9a6cc1..647c448bee9 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -604,7 +604,7 @@ limitations under the License. .mx_EventTile_avatar { position: static; order: -1; - margin-right: 5px; + margin-inline-end: 5px; // TODO: Use a spacing variable } .mx_EventTile_line, @@ -616,6 +616,12 @@ limitations under the License. .mx_EventTile_e2eIcon { margin-left: 9px; + + // Warning E2E icon between an avatar and a hidden event + &.mx_EventTile_e2eIcon_warning { + margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here + align-self: center; + } } .mx_EventTile_line { From 3ac2190762069abbe686fea7955981c124a99aa4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 14 May 2022 01:03:28 +0900 Subject: [PATCH 2/4] Use a variable to ensure the same spacing around the E2E icon Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 647c448bee9..8f807f02d97 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -55,6 +55,7 @@ limitations under the License. .mx_EventTile[data-layout=bubble] { --EventTile_bubble-margin-inline-start: 49px; --EventTile_bubble-margin-inline-end: 60px; + --EventTile_bubble_line-inline-spacing: 5px; position: relative; margin-top: var(--gutterSize); @@ -272,7 +273,7 @@ limitations under the License. position: relative; display: flex; - gap: 5px; + gap: 5px var(--EventTile_bubble_line-inline-spacing); margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 -9px; border-top-left-radius: var(--cornerRadius); border-top-right-radius: var(--cornerRadius); @@ -604,7 +605,7 @@ limitations under the License. .mx_EventTile_avatar { position: static; order: -1; - margin-inline-end: 5px; // TODO: Use a spacing variable + margin-inline-end: var(--EventTile_bubble_line-inline-spacing); // Same spacing between E2E icon and a hidden event } .mx_EventTile_line, From 52bade6e8a1ecc3e4a486458112db10d4bda79b1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 14 May 2022 02:43:28 +0900 Subject: [PATCH 3/4] Apply the style to E2E icon Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 8f807f02d97..eb4d63b9076 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -616,13 +616,8 @@ limitations under the License. } .mx_EventTile_e2eIcon { - margin-left: 9px; - - // Warning E2E icon between an avatar and a hidden event - &.mx_EventTile_e2eIcon_warning { - margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here - align-self: center; - } + margin-inline-start: 0; // mx_EventTile_avatar has margin-inline-end, so margin is not needed here + align-self: center; } .mx_EventTile_line { From 0dea00dd6c606c181842764acdec21788c177411 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 20 May 2022 20:02:14 +0900 Subject: [PATCH 4/4] Rename variables Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index eb4d63b9076..f2f0564871d 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -55,7 +55,7 @@ limitations under the License. .mx_EventTile[data-layout=bubble] { --EventTile_bubble-margin-inline-start: 49px; --EventTile_bubble-margin-inline-end: 60px; - --EventTile_bubble_line-inline-spacing: 5px; + --EventTile_bubble_gap-inline: 5px; position: relative; margin-top: var(--gutterSize); @@ -269,12 +269,12 @@ limitations under the License. } .mx_EventTile_line { - --EventBubbleTile_line-margin-inline-end: -12px; + --EventTile_bubble_line-margin-inline-end: -12px; position: relative; display: flex; - gap: 5px var(--EventTile_bubble_line-inline-spacing); - margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 -9px; + gap: 5px var(--EventTile_bubble_gap-inline); + margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 -9px; border-top-left-radius: var(--cornerRadius); border-top-right-radius: var(--cornerRadius); @@ -605,7 +605,7 @@ limitations under the License. .mx_EventTile_avatar { position: static; order: -1; - margin-inline-end: var(--EventTile_bubble_line-inline-spacing); // Same spacing between E2E icon and a hidden event + margin-inline-end: var(--EventTile_bubble_gap-inline); // Same spacing between E2E icon and a hidden event } .mx_EventTile_line,