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>
This commit is contained in:
Suguru Hirahara 2022-05-12 07:04:54 +00:00 committed by GitHub
parent 190389a053
commit 0951a766aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 33 deletions

View file

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