From 16bc6c25fd710bc074a1b3c85af9e7ebab7ecbc8 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 22 May 2022 17:25:39 +0900 Subject: [PATCH 1/4] Move declarations related to position from _MImageBody.scss to _EventTile.scss These declarations should not be defined as default values as position depends on other factors such as layout, etc. Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MImageBody.scss | 3 --- res/css/views/rooms/_EventTile.scss | 8 ++++++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 56690a8f7e9..dbd6e5b6248 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -64,9 +64,6 @@ $timeline-image-border-radius: 8px; min-height: $font-44px; min-width: $font-44px; - display: flex; - justify-content: center; - align-items: center; // Override inline max-width value to avoid overflow max-width: 100% !important; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 5db670c0f22..a25636fb6fe 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -58,6 +58,14 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } } + .mx_MImageBody { + .mx_MImageBody_thumbnail_container { + display: flex; + justify-content: center; + align-items: center; + } + } + &[data-layout=group] { .mx_EventTile_line { line-height: var(--GroupLayout-EventTile-line-height); From 923f7afc316c831182b56f578fb98945cf358dcc Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 22 May 2022 17:31:23 +0900 Subject: [PATCH 2/4] Move min-height and min-width declarations from _MImageBody.scss to _EventTile.scss Since min-height and min-width have been specified for bubble layout, the declarations have been expected to be applied to the other layouts. Signed-off-by: Suguru Hirahara --- res/css/views/messages/_MImageBody.scss | 3 --- res/css/views/rooms/_EventBubbleTile.scss | 2 ++ res/css/views/rooms/_EventTile.scss | 5 +++++ 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index dbd6e5b6248..270451d8085 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -62,9 +62,6 @@ $timeline-image-border-radius: 8px; overflow: hidden; contain: paint; - min-height: $font-44px; - min-width: $font-44px; - // Override inline max-width value to avoid overflow max-width: 100% !important; diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index b28021c49eb..3efeb8adfc7 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -156,10 +156,12 @@ limitations under the License. padding-right: 48px; } + .mx_MImageBody { .mx_MImageBody_thumbnail_container { min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); } + } .mx_CallEvent { background-color: unset; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index a25636fb6fe..00e3814c419 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -273,6 +273,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_MImageBody { margin-right: 34px; + + .mx_MImageBody_thumbnail_container { + min-height: $font-44px; + min-width: $font-44px; + } } .mx_EventTile_e2eIcon { From 05c1bb35fb8239604bba9bcb02a44942ad9ab8e8 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 22 May 2022 17:39:25 +0900 Subject: [PATCH 3/4] Apply 'justify-content: center' to bubble layout only 'justify-content: center' was added for the bubble layout with 1436f23. It should not be applied to the other layouts. In order to prevent an issue related to cascading from happening, 'justify-content: flex-start' is explicitly specified. Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.scss | 1 + res/css/views/rooms/_EventTile.scss | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 3efeb8adfc7..a321743c5fc 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -158,6 +158,7 @@ limitations under the License. .mx_MImageBody { .mx_MImageBody_thumbnail_container { + justify-content: center; min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 00e3814c419..37e100e8dd1 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -61,8 +61,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_MImageBody { .mx_MImageBody_thumbnail_container { display: flex; - justify-content: center; - align-items: center; + align-items: center; // on every layout } } @@ -275,6 +274,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss margin-right: 34px; .mx_MImageBody_thumbnail_container { + justify-content: flex-start; min-height: $font-44px; min-width: $font-44px; } From abd1c37e6fb295bf26260bb636e94f1af7ab860e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 22 May 2022 17:44:35 +0900 Subject: [PATCH 4/4] yarn run lint:style --fix 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 a321743c5fc..c8449b1bb8c 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -157,11 +157,11 @@ limitations under the License. } .mx_MImageBody { - .mx_MImageBody_thumbnail_container { - justify-content: center; - min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); - min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); - } + .mx_MImageBody_thumbnail_container { + justify-content: center; + min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); + min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize)); + } } .mx_CallEvent {