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

Commit 0951a76

Browse files
luixxiult3chguy
luixxiul
and
t3chguy
authored
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]>
1 parent 190389a commit 0951a76

File tree

3 files changed

+76
-33
lines changed

3 files changed

+76
-33
lines changed

‎res/css/views/right_panel/_ThreadPanel.scss

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -191,8 +191,14 @@ limitations under the License.
191191
}
192192
}
193193

194-
.mx_GenericEventListSummary > .mx_EventTile_line {
195-
padding-left: 30px !important; // Override main timeline styling - align summary text with message text
194+
.mx_GenericEventListSummary {
195+
&[data-layout=bubble] > .mx_EventTile_line {
196+
padding-left: 30px !important; // Override main timeline styling - align summary text with message text
197+
}
198+
199+
&:not([data-layout=bubble]) > .mx_EventTile_line {
200+
padding-inline-start: var(--ThreadView_group_spacing-start); // align summary text with message text
201+
}
196202
}
197203

198204
.mx_EventTile:not([data-layout=bubble]) {
@@ -237,27 +243,49 @@ limitations under the License.
237243
color: $secondary-content;
238244
}
239245

240-
// handling for hidden events (e.g reactions) in the thread view
241-
&.mx_ThreadView .mx_EventTile_info {
242-
padding-top: 0 !important; // override main timeline padding
246+
&.mx_ThreadView .mx_EventTile {
247+
// handling for hidden events (e.g reactions) in the thread view
248+
&.mx_EventTile_info {
249+
padding-top: 0;
250+
251+
&.mx_EventTile_selected .mx_EventTile_line,
252+
.mx_EventTile_line {
253+
$line-height: $font-12px;
243254

244-
.mx_EventTile_line {
245-
padding-left: 0 !important; // override main timeline padding
255+
padding-inline-start: 0;
256+
line-height: $line-height;
246257

247-
.mx_EventTile_content {
248-
margin-left: 48px; // align with text
249-
width: calc(100% - 48px - 8px); // match width of parent
258+
.mx_EventTile_content,
259+
.mx_RedactedBody {
260+
width: auto;
261+
margin-inline-start: calc(var(--ThreadView_group_spacing-start) + 14px + 6px); // 14px: avatar width, 6px: 20px - 14px
262+
font-size: $line-height;
263+
}
250264
}
251-
}
252265

253-
.mx_EventTile_avatar {
254-
position: absolute;
255-
left: 30px !important; // override main timeline positioning
256-
z-index: 9; // position above the hover styling
257-
}
266+
&:not([data-layout=bubble]) {
267+
.mx_EventTile_avatar {
268+
top: 1.5px;
269+
left: calc($MessageTimestamp_width + 14px - 4px); // 14px: avatar width, 4px: align with text
270+
z-index: 9; // position above the hover styling
271+
}
272+
}
273+
274+
&[data-layout=bubble] {
275+
.mx_EventTile_avatar {
276+
left: 30px;
277+
}
278+
}
258279

259-
.mx_ViewSourceEvent_toggle {
260-
display: none; // hide the hidden event expand button, not enough space, view source can still be used
280+
.mx_EventTile_avatar {
281+
position: absolute;
282+
width: 14px; // avatar img size
283+
height: 14px; // avatar img size
284+
}
285+
286+
.mx_ViewSourceEvent_toggle {
287+
display: none; // hide the hidden event expand button, not enough space, view source can still be used
288+
}
261289
}
262290
}
263291

‎res/css/views/rooms/_EventTile.scss

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -89,20 +89,34 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
8989
margin-left: 64px;
9090
}
9191

92-
&.mx_EventTile_info {
93-
padding-top: 1px;
94-
}
95-
9692
.mx_EventTile_avatar {
9793
top: 14px;
9894
left: 8px;
9995
cursor: pointer;
10096
user-select: none;
10197
}
10298

103-
&.mx_EventTile_info .mx_EventTile_avatar {
104-
top: $font-6px;
105-
left: $left-gutter;
99+
&.mx_EventTile_info {
100+
padding-top: 0;
101+
102+
.mx_EventTile_avatar,
103+
.mx_EventTile_e2eIcon {
104+
margin: 3px 0 2px; // Align with mx_EventTile_line
105+
}
106+
107+
.mx_EventTile_e2eIcon {
108+
top: 0;
109+
}
110+
111+
.mx_EventTile_avatar {
112+
top: initial;
113+
inset-inline-start: $left-gutter;
114+
height: 14px;
115+
}
116+
117+
.mx_EventTile_line {
118+
padding: 3px 0 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon
119+
}
106120
}
107121

108122
&.mx_EventTile_continuation {
@@ -825,6 +839,8 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
825839
}
826840

827841
.mx_ThreadView {
842+
--ThreadView_group_spacing-start: 56px; // 56px: 64px - 8px (padding)
843+
828844
display: flex;
829845
flex-direction: column;
830846
max-height: 100%;
@@ -893,7 +909,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
893909
}
894910

895911
.mx_EventTile[data-layout=group] {
896-
$spacing-start: 56px; // 56px: 64px - 8px (padding)
897912
width: 100%;
898913

899914
.mx_EventTile_content,
@@ -904,7 +919,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
904919
.mx_MLocationBody,
905920
.mx_ReplyChain_wrapper,
906921
.mx_ReactionsRow {
907-
margin-left: $spacing-start;
922+
margin-inline-start: var(--ThreadView_group_spacing-start);
908923
margin-right: 8px;
909924

910925
.mx_EventTile_content,
@@ -947,7 +962,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
947962
}
948963

949964
.mx_EventTile_mediaLine {
950-
padding-inline-start: $spacing-start;
965+
padding-inline-start: var(--ThreadView_group_spacing-start);
951966
}
952967
}
953968

‎src/components/views/rooms/EventTile.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1032,6 +1032,11 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
10321032
if (this.context.timelineRenderingType === TimelineRenderingType.Notification) {
10331033
avatarSize = 24;
10341034
needsSenderProfile = true;
1035+
} else if (isInfoMessage) {
1036+
// a small avatar, with no sender profile, for
1037+
// joins/parts/etc
1038+
avatarSize = 14;
1039+
needsSenderProfile = false;
10351040
} else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList ||
10361041
(this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation)
10371042
) {
@@ -1040,11 +1045,6 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
10401045
} else if (eventType === EventType.RoomCreate || isBubbleMessage) {
10411046
avatarSize = 0;
10421047
needsSenderProfile = false;
1043-
} else if (isInfoMessage) {
1044-
// a small avatar, with no sender profile, for
1045-
// joins/parts/etc
1046-
avatarSize = 14;
1047-
needsSenderProfile = false;
10481048
} else if (this.props.layout == Layout.IRC) {
10491049
avatarSize = 14;
10501050
needsSenderProfile = true;

0 commit comments

Comments
 (0)