From 56dbfa44ef5cab867720adeb571642961b434ed1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 7 Jul 2022 14:40:45 +0900 Subject: [PATCH 1/3] Apply margin to EventTileBubble on each layout Use a variable to ensure alignment of EventTileBubble on IRC layout Signed-off-by: Suguru Hirahara --- res/css/views/messages/_EventTileBubble.scss | 8 +----- res/css/views/rooms/_EventTile.scss | 27 ++++++++++++++++++++ res/css/views/rooms/_IRCLayout.scss | 4 +-- 3 files changed, 30 insertions(+), 9 deletions(-) diff --git a/res/css/views/messages/_EventTileBubble.scss b/res/css/views/messages/_EventTileBubble.scss index 5b8925687a9..efaa154752c 100644 --- a/res/css/views/messages/_EventTileBubble.scss +++ b/res/css/views/messages/_EventTileBubble.scss @@ -16,20 +16,14 @@ limitations under the License. .mx_EventTileBubble { background-color: $dark-panel-bg-color; - padding: 10px; + padding: 10px; // TODO: Use a spacing variable border-radius: 8px; - margin: 10px auto; // Reserve space for external timestamps, but also cap the width max-width: min(calc(100% - 2 * $MessageTimestamp_width), 600px); box-sizing: border-box; display: grid; grid-template-columns: 24px minmax(0, 1fr) min-content min-content; - .mx_EventTile[data-layout=bubble] & { - // Timestamps are inside the tile, so the width can be less constrained - max-width: 600px; - } - &::before, &::after { position: relative; grid-column: 1; diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f9479674363..55f8c514c62 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -183,6 +183,10 @@ $left-gutter: 64px; } } + .mx_EventTileBubble { + margin-block: 10px; // TODO: Use a spacing variable + } + &.mx_EventTile_highlight, &.mx_EventTile_highlight .markdown-body { .mx_EventTile_line { @@ -195,10 +199,28 @@ $left-gutter: 64px; } } + &[data-layout=bubble], + &[data-layout=group] { + .mx_EventTileBubble { + margin-inline: auto; + } + } + &[data-layout=irc] { + --EventTile_irc_line_info-inset-inline-start: calc(var(--name-width) + 10px + var(--icon-width)); + .mx_MessageTimestamp { text-align: right; } + + .mx_EventTileBubble { + position: relative; + left: var(--EventTile_irc_line_info-inset-inline-start); + } + + .mx_ReplyTile .mx_EventTileBubble { + left: unset; // Cancel the value specified above for the tile inside ReplyTile + } } &[data-layout=group] { @@ -276,6 +298,11 @@ $left-gutter: 64px; } &[data-layout=bubble] { + .mx_EventTileBubble { + // Timestamps are inside the tile, so the width can be less constrained + max-width: 600px; + } + &.mx_EventTile_continuation { margin-top: 2px; } diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 566338f966b..921377dd128 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -163,13 +163,13 @@ $irc-line-height: $font-18px; .mx_EventTile.mx_EventTile_info { .mx_EventTile_avatar { - left: calc(var(--name-width) + 10px + var(--icon-width)); + left: var(--EventTile_irc_line_info-inset-inline-start); top: 0; margin-right: var(--right-padding); } .mx_EventTile_line { - left: calc(var(--name-width) + 10px + var(--icon-width)); + left: var(--EventTile_irc_line_info-inset-inline-start); } .mx_TextualEvent { From a4a6558676bfcaa839649e5127b84ef15b94b230 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 7 Jul 2022 15:13:33 +0900 Subject: [PATCH 2/3] Improve style rules Signed-off-by: Suguru Hirahara --- res/css/views/messages/_EventTileBubble.scss | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/res/css/views/messages/_EventTileBubble.scss b/res/css/views/messages/_EventTileBubble.scss index efaa154752c..6813fec6665 100644 --- a/res/css/views/messages/_EventTileBubble.scss +++ b/res/css/views/messages/_EventTileBubble.scss @@ -24,37 +24,35 @@ limitations under the License. display: grid; grid-template-columns: 24px minmax(0, 1fr) min-content min-content; - &::before, &::after { + &::before, + &::after { position: relative; grid-column: 1; grid-row: 1 / 3; width: 16px; height: 16px; content: ""; - top: 0; - bottom: 0; - left: 0; - right: 0; + inset: 0; mask-repeat: no-repeat; mask-position: center; mask-size: contain; - margin-top: 4px; + margin-top: $spacing-4; } - .mx_EventTileBubble_title, .mx_EventTileBubble_subtitle { + .mx_EventTileBubble_title, + .mx_EventTileBubble_subtitle { + grid-column: 2; overflow-wrap: break-word; } .mx_EventTileBubble_title { font-weight: 600; font-size: $font-15px; - grid-column: 2; grid-row: 1; } .mx_EventTileBubble_subtitle { font-size: $font-12px; - grid-column: 2; grid-row: 2; } @@ -62,6 +60,6 @@ limitations under the License. grid-column: 4; grid-row: 1 / 3; align-self: center; - margin-left: 16px; + margin-left: $spacing-16; } } From ef682213c06a01757fefd0a333ecdf6522dcb5f3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 7 Jul 2022 17:56:30 +0900 Subject: [PATCH 3/3] Apply the same block margin to every layout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 55f8c514c62..b0b142f40f5 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -73,6 +73,10 @@ $left-gutter: 64px; } } + .mx_EventTileBubble { + margin-block: 10px; // TODO: Use a spacing variable + } + .mx_MImageBody { .mx_MImageBody_thumbnail_container { display: flex; @@ -183,10 +187,6 @@ $left-gutter: 64px; } } - .mx_EventTileBubble { - margin-block: 10px; // TODO: Use a spacing variable - } - &.mx_EventTile_highlight, &.mx_EventTile_highlight .markdown-body { .mx_EventTile_line {