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

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

Browse source
This commit is contained in:
Michael Telatynski 2022-01-27 13:34:26 +00:00 committed by GitHub
parent 57a5647079
commit 074fec359b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -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;
@ -586,3 +587,7 @@ limitations under the License.
}
}
}
.mx_EventTile_tileError[data-layout=bubble] .mx_EventTile_line {
flex-direction: column; // restore the centering
}

2
src/components/structures/MessagePanel.tsx
View file

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

6
src/components/views/messages/TileErrorBoundary.tsx
View file

@ -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 {
@ -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") }
@ -97,7 +99,7 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
{ viewSourceButton }
</span>
</div>
</div>);
</li>);
}
return this.props.children;