From 0951a766aa8161d2a5d3f74a4c1d190d6d127d45 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 12 May 2022 07:04:54 +0000 Subject: [PATCH] Fix displaying hidden events on threads (#8555) * Fix avatar size and style inheritances for hidden events in the thread view Signed-off-by: Suguru Hirahara * Use a variable Signed-off-by: Suguru Hirahara * yarn run lint:style --fix Signed-off-by: Suguru Hirahara * Reset the comment Signed-off-by: Suguru Hirahara * Re-add padding-left override for bubble layout Signed-off-by: Suguru Hirahara * yarn run lint:style --fix Signed-off-by: Suguru Hirahara * Add a empty line Signed-off-by: Suguru Hirahara * Adjust avatar and E2E icon position inside .mx_EventTile_info Signed-off-by: Suguru Hirahara * Update src/components/views/rooms/EventTile.tsx Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> * Align with mx_EventTile_line Signed-off-by: Suguru Hirahara * Align mx_EventTile_line and avatar + E2E icon Signed-off-by: Suguru Hirahara Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/right_panel/_ThreadPanel.scss | 64 +++++++++++++++------ res/css/views/rooms/_EventTile.scss | 35 +++++++---- src/components/views/rooms/EventTile.tsx | 10 ++-- 3 files changed, 76 insertions(+), 33 deletions(-) diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 043e2444b1..67d5f15c38 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -191,8 +191,14 @@ 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 { + &[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]) { @@ -237,27 +243,49 @@ limitations under the License. color: $secondary-content; } - // 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_ThreadView .mx_EventTile { + // handling for hidden events (e.g reactions) in the thread view + &.mx_EventTile_info { + padding-top: 0; - .mx_EventTile_line { - padding-left: 0 !important; // override main timeline padding + &.mx_EventTile_selected .mx_EventTile_line, + .mx_EventTile_line { + $line-height: $font-12px; - .mx_EventTile_content { - margin-left: 48px; // align with text - width: calc(100% - 48px - 8px); // match width of parent + 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_avatar { - position: absolute; - left: 30px !important; // override main timeline positioning - 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 + } + } - .mx_ViewSourceEvent_toggle { - display: none; // hide the hidden event expand button, not enough space, view source can still be used + &[data-layout=bubble] { + .mx_EventTile_avatar { + left: 30px; + } + } + + .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 + } } } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index fbb7da8685..54cf7c888c 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,27 @@ $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 { + margin: 3px 0 2px; // Align with mx_EventTile_line + } + + .mx_EventTile_e2eIcon { + top: 0; + } + + .mx_EventTile_avatar { + top: initial; + inset-inline-start: $left-gutter; + height: 14px; + } + + .mx_EventTile_line { + padding: 3px 0 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon + } } &.mx_EventTile_continuation { @@ -825,6 +839,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%; @@ -893,7 +909,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, @@ -904,7 +919,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, @@ -947,7 +962,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); } } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 93c215221e..f5eb751e0b 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1032,6 +1032,11 @@ export class UnwrappedEventTile extends React.Component { if (this.context.timelineRenderingType === TimelineRenderingType.Notification) { avatarSize = 24; needsSenderProfile = true; + } else if (isInfoMessage) { + // 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 +1045,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;