From 949a08a34bf2b795cd470e449afc25342197d307 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 22 May 2022 01:27:03 +0900 Subject: [PATCH 1/4] Replace padding with margin for an image and a file button for group layout on ThreadView This normalizes inline spacing of image and file button on ThreadView. The declarations of EventTile_mediaLine was added with 3a2aa9d, and they were expected to align the element with mx_EventTile_content. After the padding-right value for mx_EventTile_content was changed from 50px to 8px with 544957b, the declarations have been obsolete. Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f49ac7da7e4..a63438090a6 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -935,6 +935,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } + .mx_MFileBody, + .mx_MImageBody { + display: block; // Apply margin to span element + margin-inline-start: var(--ThreadView_group_spacing-start); + margin-inline-end: var(--ThreadView_group_spacing-end); + } + .mx_ReplyChain_wrapper { .mx_MLocationBody { margin-inline-start: 0; @@ -965,16 +972,9 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } } - - .mx_EventTile_mediaLine { - padding-inline-start: var(--ThreadView_group_spacing-start); - } } .mx_EventTile_mediaLine { - padding-inline-start: var(--BaseCard_EventTile-spacing-horizontal); - padding-right: 50px; - .mx_MImageBody { margin: 0; padding: 0; From 316fb13939243bdeb4374de4b32877839fefa454 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 22 May 2022 01:59:42 +0900 Subject: [PATCH 2/4] Remove !important flag as it is no longer required As padding properties for mx_EventTile_mediaLine were removed, !important flag is no longer required. Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index a63438090a6..1cdf669c5dd 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -895,7 +895,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal); .mx_EventTile_line.mx_EventTile_mediaLine { - padding: 0 !important; + padding: 0; max-width: 100%; .mx_MFileBody { From 9c0be4275d3aa12bcdc73fbaae4e01d35a5e8372 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 22 May 2022 01:55:08 +0900 Subject: [PATCH 3/4] Remove an obsolete block of .mx_EventTile_mediaLine Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 1cdf669c5dd..fc99f6ece79 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -974,13 +974,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } - .mx_EventTile_mediaLine { - .mx_MImageBody { - margin: 0; - padding: 0; - } - } - .mx_MessageComposer_sendMessage { margin-right: 0; } From 31a9cb478c0bb3617f412d63f9fc1e6f0d501693 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 22 May 2022 02:09:17 +0900 Subject: [PATCH 4/4] Use a variable to ensure alignment Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 4 +++- res/css/views/rooms/_EventTile.scss | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 1625c3171ae..f21fa5cd9f0 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -243,10 +243,12 @@ limitations under the License. } .mx_EventTile_line { + --EventBubbleTile_line-margin-inline-end: -12px; + position: relative; display: flex; gap: 5px; - margin: 0 -12px 0 -9px; + margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 -9px; border-top-left-radius: var(--cornerRadius); border-top-right-radius: var(--cornerRadius); diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index fc99f6ece79..60f66339b23 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -907,7 +907,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss align-items: flex-end; .mx_EventTile_line.mx_EventTile_mediaLine { - margin: 0 -13px 0 0; // align with normal messages + margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 0; // align with normal messages } } }