From 7065a8f52f979e1257fb27fe9150f05fdf2aa4f6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 11 May 2022 03:02:59 +0900 Subject: [PATCH 01/11] Fix avatar size and style inheritances for hidden events in the thread view Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 16 ++++++++++------ src/components/views/rooms/EventTile.tsx | 12 +++++++----- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 9947a7575f0..9c99df08578 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -241,29 +241,33 @@ limitations under the License. color: $secondary-content; } + &.mx_ThreadView .mx_EventTile { // handling for hidden events (e.g reactions) in the thread view - &.mx_ThreadView .mx_EventTile_info { - padding-top: 0 !important; // override main timeline padding + &.mx_EventTile_info { + padding-top: 0; + &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { - padding-left: 0 !important; // override main timeline padding + padding-inline-start: 0; .mx_EventTile_content { - margin-left: 48px; // align with text - width: calc(100% - 48px - 8px); // match width of parent + width: auto; } } .mx_EventTile_avatar { position: absolute; - left: 30px !important; // override main timeline positioning + left: 30px; z-index: 9; // position above the hover styling + width: 14px; // avatar img size + height: 14px; // avatar img size } .mx_ViewSourceEvent_toggle { display: none; // hide the hidden event expand button, not enough space, view source can still be used } } + } .mx_BaseCard_footer { text-align: left; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 93c215221e2..e8c1bedfdca 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1032,6 +1032,13 @@ export class UnwrappedEventTile extends React.Component { if (this.context.timelineRenderingType === TimelineRenderingType.Notification) { avatarSize = 24; needsSenderProfile = true; + } else if (isInfoMessage || isInfoMessage && + (this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation) + ) { + // a small avatar, with no sender profile, for + // joins/parts/etc + avatarSize = 14; + needsSenderProfile = false; } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList || (this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation) ) { @@ -1040,11 +1047,6 @@ export class UnwrappedEventTile extends React.Component { } else if (eventType === EventType.RoomCreate || isBubbleMessage) { avatarSize = 0; needsSenderProfile = false; - } else if (isInfoMessage) { - // a small avatar, with no sender profile, for - // joins/parts/etc - avatarSize = 14; - needsSenderProfile = false; } else if (this.props.layout == Layout.IRC) { avatarSize = 14; needsSenderProfile = true; From 913b22f019ff9285e078ecb5a87afd412d845fae Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 11 May 2022 03:25:25 +0900 Subject: [PATCH 02/11] Use a variable Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 28 +++++++++++++++++---- res/css/views/rooms/_EventTile.scss | 7 +++--- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 9c99df08578..e544acb00d2 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -191,8 +191,8 @@ limitations under the License. } } - .mx_GenericEventListSummary > .mx_EventTile_line { - padding-left: 30px !important; // Override main timeline styling - align summary text with message text + .mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_EventTile_line { + padding-inline-start: var(--ThreadView_group_spacing-start); // align the summary text with message text } .mx_EventTile:not([data-layout=bubble]) { @@ -248,17 +248,35 @@ limitations under the License. &.mx_EventTile_selected .mx_EventTile_line, .mx_EventTile_line { + $line-height: $font-12px; + padding-inline-start: 0; + line-height: $line-height; - .mx_EventTile_content { + .mx_EventTile_content, + .mx_RedactedBody { width: auto; + margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); // 14px: avatar width, 6px: 20px - 14px + font-size: $line-height; + } + } + + &:not([data-layout=bubble]) { + .mx_EventTile_avatar { + top: 1.5px; + left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text + z-index: 9; // position above the hover styling + } + } + + &[data-layout=bubble] { + .mx_EventTile_avatar { + left: 30px; } } .mx_EventTile_avatar { position: absolute; - left: 30px; - z-index: 9; // position above the hover styling width: 14px; // avatar img size height: 14px; // avatar img size } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 27b5df0a492..ad03883f896 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -821,6 +821,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } .mx_ThreadView { + --ThreadView_group_spacing-start: 56px; // 56px: 64px - 8px (padding) + display: flex; flex-direction: column; max-height: 100%; @@ -889,7 +891,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } .mx_EventTile[data-layout=group] { - $spacing-start: 56px; // 56px: 64px - 8px (padding) width: 100%; .mx_EventTile_content, @@ -900,7 +901,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_MLocationBody, .mx_ReplyChain_wrapper, .mx_ReactionsRow { - margin-left: $spacing-start; + margin-inline-start: var(--ThreadView_group_spacing-start); margin-right: 8px; .mx_EventTile_content, @@ -943,7 +944,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss } .mx_EventTile_mediaLine { - padding-inline-start: $spacing-start; + padding-inline-start: var(--ThreadView_group_spacing-start); } } From 1f7f1f3ab685168076737ffedf523d46bc8572b7 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 11 May 2022 15:25:29 +0900 Subject: [PATCH 03/11] yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 64 ++++++++++----------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index e544acb00d2..07f37e273e3 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -242,50 +242,50 @@ limitations under the License. } &.mx_ThreadView .mx_EventTile { - // handling for hidden events (e.g reactions) in the thread view - &.mx_EventTile_info { - padding-top: 0; + // handling for hidden events (e.g reactions) in the thread view + &.mx_EventTile_info { + padding-top: 0; - &.mx_EventTile_selected .mx_EventTile_line, - .mx_EventTile_line { - $line-height: $font-12px; + &.mx_EventTile_selected .mx_EventTile_line, + .mx_EventTile_line { + $line-height: $font-12px; - padding-inline-start: 0; - line-height: $line-height; + padding-inline-start: 0; + line-height: $line-height; - .mx_EventTile_content, - .mx_RedactedBody { - width: auto; - margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); // 14px: avatar width, 6px: 20px - 14px - font-size: $line-height; + .mx_EventTile_content, + .mx_RedactedBody { + width: auto; + margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); // 14px: avatar width, 6px: 20px - 14px + font-size: $line-height; + } } - } - &:not([data-layout=bubble]) { - .mx_EventTile_avatar { - top: 1.5px; - left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text - z-index: 9; // position above the hover styling + &:not([data-layout=bubble]) { + .mx_EventTile_avatar { + top: 1.5px; + left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text + z-index: 9; // position above the hover styling + } } - } - &[data-layout=bubble] { - .mx_EventTile_avatar { - left: 30px; + &[data-layout=bubble] { + .mx_EventTile_avatar { + left: 30px; + } } - } - .mx_EventTile_avatar { - position: absolute; - width: 14px; // avatar img size - height: 14px; // avatar img size - } + .mx_EventTile_avatar { + position: absolute; + width: 14px; // avatar img size + height: 14px; // avatar img size + } - .mx_ViewSourceEvent_toggle { - display: none; // hide the hidden event expand button, not enough space, view source can still be used + .mx_ViewSourceEvent_toggle { + display: none; // hide the hidden event expand button, not enough space, view source can still be used + } } } - } .mx_BaseCard_footer { text-align: left; From baa1ac404ec92262f6e6c2baa63a660f5c599298 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 11 May 2022 16:02:51 +0900 Subject: [PATCH 04/11] Reset the comment Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 07f37e273e3..283c229b4db 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -192,7 +192,7 @@ limitations under the License. } .mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_EventTile_line { - padding-inline-start: var(--ThreadView_group_spacing-start); // align the summary text with message text + padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text } .mx_EventTile:not([data-layout=bubble]) { From 6d06fbe049aad8428ad381a06d465f2b94f247b3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 11 May 2022 16:07:58 +0900 Subject: [PATCH 05/11] Re-add padding-left override for bubble layout Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 283c229b4db..8a3a66f317e 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -191,9 +191,14 @@ limitations under the License. } } - .mx_GenericEventListSummary:not([data-layout=bubble]) > .mx_EventTile_line { + .mx_GenericEventListSummary { + &[data-layout=bubble] > .mx_EventTile_line { + padding-left: 30px !important; // Override main timeline styling - align summary text with message text + } + &:not([data-layout=bubble]) > .mx_EventTile_line { padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text } + } .mx_EventTile:not([data-layout=bubble]) { .mx_EventTile_e2eIcon { From 9391502b6a8d8dd8a7487058bbba6d8ea592c435 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 11 May 2022 16:08:27 +0900 Subject: [PATCH 06/11] yarn run lint:style --fix Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 8a3a66f317e..01ad5a24ec3 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -196,8 +196,8 @@ limitations under the License. padding-left: 30px !important; // Override main timeline styling - align summary text with message text } &:not([data-layout=bubble]) > .mx_EventTile_line { - padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text - } + padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text + } } .mx_EventTile:not([data-layout=bubble]) { From 010f57783cea08b6bedc6650e78f4db6e8f3909e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 11 May 2022 16:09:06 +0900 Subject: [PATCH 07/11] Add a empty line Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_ThreadPanel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 01ad5a24ec3..d1c6167e7b8 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -195,6 +195,7 @@ limitations under the License. &[data-layout=bubble] > .mx_EventTile_line { padding-left: 30px !important; // Override main timeline styling - align summary text with message text } + &:not([data-layout=bubble]) > .mx_EventTile_line { padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text } From 33120bb0efe61760a045f52b0d99c732135d1972 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 11 May 2022 19:47:17 +0900 Subject: [PATCH 08/11] Adjust avatar and E2E icon position inside .mx_EventTile_info Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index ad03883f896..04060b1df71 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -89,10 +89,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss margin-left: 64px; } - &.mx_EventTile_info { - padding-top: 1px; - } - .mx_EventTile_avatar { top: 14px; left: 8px; @@ -100,9 +96,21 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss user-select: none; } - &.mx_EventTile_info .mx_EventTile_avatar { - top: $font-6px; - left: $left-gutter; + &.mx_EventTile_info { + padding-top: 0; + + .mx_EventTile_avatar, + .mx_EventTile_e2eIcon { + top: 3px; // align with mx_EventTile_line + } + + .mx_EventTile_avatar { + left: $left-gutter; + } + + .mx_EventTile_line { + padding: 2px 0; + } } &.mx_EventTile_continuation { From 0b97db81c3f9fe27778b06a3eb1c747c4060cf49 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 11 May 2022 11:14:40 +0000 Subject: [PATCH 09/11] Update src/components/views/rooms/EventTile.tsx Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/EventTile.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index e8c1bedfdca..f5eb751e0bb 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1032,9 +1032,7 @@ export class UnwrappedEventTile extends React.Component { if (this.context.timelineRenderingType === TimelineRenderingType.Notification) { avatarSize = 24; needsSenderProfile = true; - } else if (isInfoMessage || isInfoMessage && - (this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation) - ) { + } else if (isInfoMessage) { // a small avatar, with no sender profile, for // joins/parts/etc avatarSize = 14; From b098736ff71eb0b4a30a075dce39ebc1dc739608 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Wed, 11 May 2022 22:22:43 +0900 Subject: [PATCH 10/11] Align with mx_EventTile_line 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 d743946e290..f55373a6c54 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -101,7 +101,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_EventTile_avatar, .mx_EventTile_e2eIcon { - top: 3px; // align with mx_EventTile_line + top: 2.25px; // align with mx_EventTile_line } .mx_EventTile_avatar { From 51cc2f698f66bc7fecfa4011a666e51fe897e7c3 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 12 May 2022 02:44:04 +0900 Subject: [PATCH 11/11] Align mx_EventTile_line and avatar + E2E icon Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index f55373a6c54..54cf7c888cd 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -101,15 +101,21 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss .mx_EventTile_avatar, .mx_EventTile_e2eIcon { - top: 2.25px; // align with mx_EventTile_line + margin: 3px 0 2px; // Align with mx_EventTile_line + } + + .mx_EventTile_e2eIcon { + top: 0; } .mx_EventTile_avatar { - left: $left-gutter; + top: initial; + inset-inline-start: $left-gutter; + height: 14px; } .mx_EventTile_line { - padding: 2px 0; + padding: 3px 0 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon } }