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 <luixxiul@users.noreply.github.com> * Use a variable Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Reset the comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Re-add padding-left override for bubble layout Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add a empty line Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Adjust avatar and E2E icon position inside .mx_EventTile_info Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * 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 <luixxiul@users.noreply.github.com> * Align mx_EventTile_line and avatar + E2E icon Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2022-05-12 07:04:54 +00:00 · 2022-05-12 07:04:54 +00:00 · 0951a766aa
parent 190389a053
commit 0951a766aa
3 changed files with 76 additions and 33 deletions
--- 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
+            }
        }
    }

--- 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);
        }
    }

--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@ -1032,6 +1032,11 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
        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<IProps, IState> {
        } 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;