Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix displaying hidden events on threads #8555

Merged
merged 12 commits into from
May 12, 2022
Merged

Fix displaying hidden events on threads #8555

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7065a8f
Fix avatar size and style inheritances for hidden events in the threa…
luixxiul May 10, 2022
913b22f
Use a variable
luixxiul May 10, 2022
1f7f1f3
yarn run lint:style --fix
luixxiul May 11, 2022
baa1ac4
Reset the comment
luixxiul May 11, 2022
6d06fbe
Re-add padding-left override for bubble layout
luixxiul May 11, 2022
9391502
yarn run lint:style --fix
luixxiul May 11, 2022
010f577
Add a empty line
luixxiul May 11, 2022
33120bb
Adjust avatar and E2E icon position inside .mx_EventTile_info
luixxiul May 11, 2022
0b97db8
Update src/components/views/rooms/EventTile.tsx
luixxiul May 11, 2022
573149e
Merge branch 'develop' into HiddenEvent-Thread
luixxiul May 11, 2022
b098736
Align with mx_EventTile_line
luixxiul May 11, 2022
51cc2f6
Align mx_EventTile_line and avatar + E2E icon
luixxiul May 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 46 additions & 18 deletions res/css/views/right_panel/_ThreadPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]) {
Expand Down Expand Up @@ -241,27 +247,49 @@ limitations under the License.
color: $secondary-content;
}
luixxiul marked this conversation as resolved.
Show resolved Hide resolved

// 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
}
}
}

Expand Down
7 changes: 4 additions & 3 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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);
}
}

Expand Down
12 changes: 7 additions & 5 deletions src/components/views/rooms/EventTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1032,6 +1032,13 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
if (this.context.timelineRenderingType === TimelineRenderingType.Notification) {
avatarSize = 24;
needsSenderProfile = true;
} else if (isInfoMessage || isInfoMessage &&
(this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation)
) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This expression might be wrong given that it simplifies to just isInfoMessage ignoring the whole second part (&& has precedence over ||)

Suggested change
} else if (isInfoMessage || isInfoMessage &&
(this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation)
) {
} else if (isInfoMessage || isInfoMessage &&
(this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation)
) {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@t3chguy Would you please add suggestion for me as I am not really sure what the best solution would be? Thanks in advance!

luixxiul marked this conversation as resolved.
Show resolved Hide resolved
// 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)
) {
Expand All @@ -1040,11 +1047,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;
Expand Down