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 <[email protected]> * Use a variable Signed-off-by: Suguru Hirahara <[email protected]> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <[email protected]> * Reset the comment Signed-off-by: Suguru Hirahara <[email protected]> * Re-add padding-left override for bubble layout Signed-off-by: Suguru Hirahara <[email protected]> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <[email protected]> * Add a empty line Signed-off-by: Suguru Hirahara <[email protected]> * Adjust avatar and E2E icon position inside .mx_EventTile_info Signed-off-by: Suguru Hirahara <[email protected]> * Update src/components/views/rooms/EventTile.tsx Co-authored-by: Michael Telatynski <[email protected]> * Align with mx_EventTile_line Signed-off-by: Suguru Hirahara <[email protected]> * Align mx_EventTile_line and avatar + E2E icon Signed-off-by: Suguru Hirahara <[email protected]> Co-authored-by: Michael Telatynski <[email protected]>
matrix-org · May 12, 2022 · 0951a76 · 0951a76
1 parent 190389a
commit 0951a76
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 33 deletions.
diff --git 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_selected .mx_EventTile_line,
+            .mx_EventTile_line {
+                $line-height: $font-12px;
 
-        .mx_EventTile_line {
-            padding-left: 0 !important; // override main timeline padding
+                padding-inline-start: 0;
+                line-height: $line-height;
 
-            .mx_EventTile_content {
-                margin-left: 48px; // align with text
-                width: calc(100% - 48px - 8px); // match width of parent
+                .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
+                }
+            }
+
+            &[data-layout=bubble] {
+                .mx_EventTile_avatar {
+                    left: 30px;
+                }
+            }
 
-        .mx_ViewSourceEvent_toggle {
-            display: none; // hide the hidden event expand button, not enough space, view source can still be used
+            .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
@@ -89,20 +89,34 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         margin-left: 64px;
     }
 
-    &.mx_EventTile_info {
-        padding-top: 1px;
-    }
-
     .mx_EventTile_avatar {
         top: 14px;
         left: 8px;
         cursor: pointer;
         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
@@ -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;