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

Fix issue with tile error boundaries collapsing in bubbles layout #7653

Merged
merged 4 commits into from
Jan 27, 2022
Merged

Fix issue with tile error boundaries collapsing in bubbles layout #7653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
781fd64
Fix issue with tile error boundaries collapsing in bubbles layout
t3chguy Jan 27, 2022
0488708
Use a more semantic tag for the tile error boundary
t3chguy Jan 27, 2022
318250b
Apply layout to TileErrorBoundary
t3chguy Jan 27, 2022
7663c62
Fix alignment in bubble layout of tile error boundary
t3chguy Jan 27, 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
5 changes: 5 additions & 0 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ limitations under the License.
margin-top: var(--gutterSize);
margin-left: 49px;
font-size: $font-14px;
flex-shrink: 0;

.mx_ThreadInfo {
clear: both;
Expand Down Expand Up @@ -586,3 +587,7 @@ limitations under the License.
}
}
}

.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
flex-direction: column; // restore the centering
}
2 changes: 1 addition & 1 deletion src/components/structures/MessagePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -772,7 +772,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
const callEventGrouper = this.props.callEventGroupers.get(mxEv.getContent().call_id);
// use txnId as key if available so that we don't remount during sending
ret.push(
<TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}>
<TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv} layout={this.props.layout}>
<EventTile
as="li"
ref={this.collectEventTile.bind(this, eventId)}
Expand Down
6 changes: 4 additions & 2 deletions src/components/views/messages/TileErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,11 @@ import BugReportDialog from '../dialogs/BugReportDialog';
import AccessibleButton from '../elements/AccessibleButton';
import SettingsStore from "../../../settings/SettingsStore";
import ViewSource from "../../structures/ViewSource";
import { Layout } from '../../../settings/enums/Layout';

interface IProps {
mxEvent: MatrixEvent;
layout: Layout;
}

interface IState {
Expand Down Expand Up @@ -88,7 +90,7 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
</AccessibleButton>;
}

return (<div className={classNames(classes)}>
return (<li className={classNames(classes)} data-layout={this.props.layout}>
<div className="mx_EventTile_line">
<span>
{ _t("Can't load this message") }
Expand All @@ -97,7 +99,7 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
{ viewSourceButton }
</span>
</div>
</div>);
</li>);
}

return this.props.children;
Expand Down