From ca0731fa6a7e4f805895706d66e38e7c29dc50ce Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 23 Apr 2023 10:32:29 +0000 Subject: [PATCH 1/7] Move declarations out of `mx_EventTile:not([data-layout=bubble])` merging style rules on _EventBubbleTile.scss Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventBubbleTile.pcss | 7 ------- res/css/views/rooms/_EventTile.pcss | 23 +++++++++++++++-------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss index 21b05a020c6..c525e5b9129 100644 --- a/res/css/views/rooms/_EventBubbleTile.pcss +++ b/res/css/views/rooms/_EventBubbleTile.pcss @@ -44,13 +44,6 @@ limitations under the License. --EventTile_bubble_line-margin-inline-end: -12px; --EventTile_bubble_gap-inline: 5px; - position: relative; - /* Other half of the gutter is provided by margin-bottom on the last tile - of the section */ - margin-top: calc(var(--gutterSize) / 2); - margin-left: var(--EventTile_bubble-margin-inline-start); - font-size: $font-14px; - .mx_MessageTimestamp { width: unset; /* Cancel the default width */ max-width: var(--MessageTimestamp-max-width); diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index ef75fc154bd..19b376b426c 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -26,6 +26,11 @@ $left-gutter: 64px; --EventTile_ThreadSummary-line-height: calc(2 * $font-12px); flex-shrink: 0; + max-width: 100%; + clear: both; + padding-top: 18px; + font-size: $font-14px; + position: relative; .mx_EventTile_avatar { cursor: pointer; @@ -451,6 +456,16 @@ $left-gutter: 64px; } &[data-layout="bubble"] { + /* Other half of the gutter is provided by margin-bottom on the last tile + of the section */ + margin-top: calc(var(--gutterSize) / 2); + margin-left: var(--EventTile_bubble-margin-inline-start); + + /* Reset default values. TODO: remove */ + max-width: unset; + clear: unset; + padding-top: 0; + .mx_EventTile_msgOption { .mx_ReadReceiptGroup { position: absolute; @@ -480,14 +495,6 @@ $left-gutter: 64px; } } -.mx_EventTile:not([data-layout="bubble"]) { - max-width: 100%; - clear: both; - padding-top: 18px; - font-size: $font-14px; - position: relative; -} - .mx_GenericEventListSummary { &[data-layout="irc"], &[data-layout="group"] { From 8b7d56fe78d4fa07b10ab145cecd4a240b1eec22 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 17 Jul 2022 03:47:21 +0900 Subject: [PATCH 2/7] Remove an obsolete `!important` flag from `&.mx_EventTile_continuation` Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 19b376b426c..aa23d9c39cf 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -410,7 +410,7 @@ $left-gutter: 64px; } &.mx_EventTile_continuation { - padding-top: 0px !important; + padding-top: 0; } &.mx_EventTile_info { From 621c0603b48b236abe5dc6aa00b0a8a10e34290b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 17 Mar 2023 17:45:39 +0900 Subject: [PATCH 3/7] Remove `clear: unset` declaration from EventTile on bubble layout While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss. Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here. Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline. Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index aa23d9c39cf..33466ee5794 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -27,7 +27,7 @@ $left-gutter: 64px; flex-shrink: 0; max-width: 100%; - clear: both; + clear: both; /* TODO: check if this is necessary */ padding-top: 18px; font-size: $font-14px; position: relative; @@ -463,7 +463,6 @@ $left-gutter: 64px; /* Reset default values. TODO: remove */ max-width: unset; - clear: unset; padding-top: 0; .mx_EventTile_msgOption { From a1505f4a6c4d8f6d6e821e360bd4bf3a42992af7 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 30 Mar 2023 18:25:37 +0900 Subject: [PATCH 4/7] Remove `:not()` pseudo class from `_FilePanel.pcss` Signed-off-by: Suguru Hirahara --- res/css/structures/_FilePanel.pcss | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss index f04dc3f8dcc..e3f9f2d4d90 100644 --- a/res/css/structures/_FilePanel.pcss +++ b/res/css/structures/_FilePanel.pcss @@ -42,24 +42,22 @@ limitations under the License. display: none; } + /* Overrides for the attachment body tiles */ .mx_EventTile { - /* Overrides for the attachment body tiles */ - &:not([data-layout="bubble"]) { - word-break: break-word; - margin-top: 10px; - padding-top: 0; - - .mx_EventTile_line { - padding-inline-start: 0; - } + word-break: break-word; + margin-top: 10px; + padding-top: 0; + + .mx_EventTile_line { + padding-inline-start: 0; + } - &:hover { - &.mx_EventTile_verified, - &.mx_EventTile_unverified, - &.mx_EventTile_unknown { - .mx_EventTile_line { - box-shadow: none; - } + &:hover { + &.mx_EventTile_verified, + &.mx_EventTile_unverified, + &.mx_EventTile_unknown { + .mx_EventTile_line { + box-shadow: none; } } } From 4bbea5915ad2ba4d4438c500b4a7e86512de4f1b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 30 Mar 2023 18:35:04 +0900 Subject: [PATCH 5/7] Remove `!important` flag from `_MessageEditHistoryDialog.pcss` Signed-off-by: Suguru Hirahara --- res/css/views/dialogs/_MessageEditHistoryDialog.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss index ff7c1002c42..69f854d50b9 100644 --- a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss +++ b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss @@ -54,7 +54,7 @@ limitations under the License. /* Emulate mx_EventTile[data-layout="group"] */ .mx_EventTile { - padding-top: 0 !important; /* Override mx_EventTile:not([data-layout="bubble"]) */ + padding-top: 0; .mx_MessageTimestamp { position: absolute; From 45558c62a0d112dacfc9a61c4f001b2f2c4c1eee Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 31 Mar 2023 14:56:21 +0900 Subject: [PATCH 6/7] Remove a comment about overriding Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 33466ee5794..67ff1ec6968 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1220,9 +1220,7 @@ $left-gutter: 64px; /* Cascading - compact modern layout on the main timeline and the right panel */ .mx_MatrixChat_useCompactLayout { - .mx_EventTile { - /* Override :not([data-layout="bubble"]) */ - &[data-layout="group"] { + .mx_EventTile[data-layout="group"] { --MatrixChat_useCompactLayout_group-padding-top: $spacing-4; --MatrixChat_useCompactLayout-top-avatar: 2px; --MatrixChat_useCompactLayout-top-e2eIcon: 3px; @@ -1321,7 +1319,6 @@ $left-gutter: 64px; ); } } -} .mx_EventTile_details { display: flex; From 517fb4c04084ae495afaf9df9280e9c76cc9a3f8 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 31 Mar 2023 14:57:43 +0900 Subject: [PATCH 7/7] Run prettier Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 144 ++++++++++++++-------------- 1 file changed, 71 insertions(+), 73 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 67ff1ec6968..88b600365a6 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -1221,104 +1221,102 @@ $left-gutter: 64px; /* Cascading - compact modern layout on the main timeline and the right panel */ .mx_MatrixChat_useCompactLayout { .mx_EventTile[data-layout="group"] { - --MatrixChat_useCompactLayout_group-padding-top: $spacing-4; - --MatrixChat_useCompactLayout-top-avatar: 2px; - --MatrixChat_useCompactLayout-top-e2eIcon: 3px; - --MatrixChat_useCompactLayout_line-spacing-block: 0px; + --MatrixChat_useCompactLayout_group-padding-top: $spacing-4; + --MatrixChat_useCompactLayout-top-avatar: 2px; + --MatrixChat_useCompactLayout-top-e2eIcon: 3px; + --MatrixChat_useCompactLayout_line-spacing-block: 0px; - padding-top: var(--MatrixChat_useCompactLayout_group-padding-top); + padding-top: var(--MatrixChat_useCompactLayout_group-padding-top); - .mx_EventTile_line, - .mx_EventTile_reply { - padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block); - } + .mx_EventTile_line, + .mx_EventTile_reply { + padding-block: var(--MatrixChat_useCompactLayout_line-spacing-block); + } - .mx_ReplyChain { - margin-bottom: $spacing-4; - } + .mx_ReplyChain { + margin-bottom: $spacing-4; + } - &.mx_EventTile_info { - padding-top: 0; /* same as the padding for non-compact .mx_EventTile.mx_EventTile_info */ - font-size: $font-13px; + &.mx_EventTile_info { + padding-top: 0; /* same as the padding for non-compact .mx_EventTile.mx_EventTile_info */ + font-size: $font-13px; - .mx_EventTile_e2eIcon, - .mx_EventTile_avatar { - top: 0; - margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block); - } + .mx_EventTile_e2eIcon, + .mx_EventTile_avatar { + top: 0; + margin-block: var(--MatrixChat_useCompactLayout_line-spacing-block); + } - .mx_EventTile_line, - .mx_EventTile_reply { - line-height: $font-20px; - } + .mx_EventTile_line, + .mx_EventTile_reply { + line-height: $font-20px; } + } - &.mx_EventTile_emote { - padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */ + &.mx_EventTile_emote { + padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */ - .mx_EventTile_avatar { - top: var(--MatrixChat_useCompactLayout-top-avatar); - } + .mx_EventTile_avatar { + top: var(--MatrixChat_useCompactLayout-top-avatar); + } + + .mx_EventTile_line, + .mx_EventTile_reply { + padding-bottom: 1px; + } + &.mx_EventTile_continuation { .mx_EventTile_line, .mx_EventTile_reply { - padding-bottom: 1px; - } - - &.mx_EventTile_continuation { - .mx_EventTile_line, - .mx_EventTile_reply { - padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block); - } + padding-bottom: var(--MatrixChat_useCompactLayout_line-spacing-block); } } + } - /* Cascading - apply zero padding to every element including mx_EventTile_emote */ - &.mx_EventTile_continuation { - padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block); - } + /* Cascading - apply zero padding to every element including mx_EventTile_emote */ + &.mx_EventTile_continuation { + padding-top: var(--MatrixChat_useCompactLayout_line-spacing-block); + } - .mx_EventTile_avatar { - top: var(--MatrixChat_useCompactLayout-top-avatar); - } + .mx_EventTile_avatar { + top: var(--MatrixChat_useCompactLayout-top-avatar); + } - .mx_EventTile_e2eIcon { - top: var(--MatrixChat_useCompactLayout-top-e2eIcon); - } + .mx_EventTile_e2eIcon { + top: var(--MatrixChat_useCompactLayout-top-e2eIcon); + } - .mx_DisambiguatedProfile { - font-size: $font-13px; - } + .mx_DisambiguatedProfile { + font-size: $font-13px; + } - .mx_EventTile_msgOption { - .mx_ReadReceiptGroup { - /* This aligns the avatar with the last line of the */ - /* message. We want to move it one line up - 2rem */ - inset-block-start: -2rem; - } + .mx_EventTile_msgOption { + .mx_ReadReceiptGroup { + /* This aligns the avatar with the last line of the */ + /* message. We want to move it one line up - 2rem */ + inset-block-start: -2rem; } + } - .mx_EventTile_content .markdown-body { - p, - ul, - ol, - dl, - blockquote, - pre, - table { - margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */ - } + .mx_EventTile_content .markdown-body { + p, + ul, + ol, + dl, + blockquote, + pre, + table { + margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */ } } + } - &[data-shape="ThreadsList"][data-notification]::before, - .mx_NotificationBadge { - /* stylelint-disable-next-line declaration-colon-space-after */ - inset-block-start: calc( - $notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top) - ); - } + &[data-shape="ThreadsList"][data-notification]::before, + .mx_NotificationBadge { + /* stylelint-disable-next-line declaration-colon-space-after */ + inset-block-start: calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top)); } +} .mx_EventTile_details { display: flex;