PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix displaying hidden events on threads (#8555)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

46
res/css/views/right_panel/_ThreadPanel.scss
View file

@ -191,10 +191,16 @@ limitations under the License.
}
}
.mx_GenericEventListSummary > .mx_EventTile_line {
.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]) {
.mx_EventTile_e2eIcon {
left: 8px;
@ -237,29 +243,51 @@ limitations under the License.
color: $secondary-content;
}
&.mx_ThreadView .mx_EventTile {
// 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_EventTile_info {
padding-top: 0;
&.mx_EventTile_selected .mx_EventTile_line,
.mx_EventTile_line {
padding-left: 0 !important; // override main timeline padding
$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;
}
}
&: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_EventTile_avatar {
position: absolute;
left: 30px !important; // override main timeline positioning
z-index: 9; // position above the hover styling
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
}
}
}
.mx_BaseCard_footer {
text-align: left;

35
res/css/views/rooms/_EventTile.scss
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);
}
}

10
src/components/views/rooms/EventTile.tsx
View file

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