mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

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-top: var(--gutterSize);
margin-left: 49px; margin-left: 49px;
font-size: $font-14px; font-size: $font-14px;
flex-shrink: 0;
.mx_ThreadInfo { .mx_ThreadInfo {
clear: both; 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); const callEventGrouper = this.props.callEventGroupers.get(mxEv.getContent().call_id);
// use txnId as key if available so that we don't remount during sending // use txnId as key if available so that we don't remount during sending
ret.push( ret.push(
<TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv}> <TileErrorBoundary key={mxEv.getTxnId() || eventId} mxEvent={mxEv} layout={this.props.layout}>
<EventTile <EventTile
as="li" as="li"
ref={this.collectEventTile.bind(this, eventId)} 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 AccessibleButton from '../elements/AccessibleButton';
import SettingsStore from "../../../settings/SettingsStore"; import SettingsStore from "../../../settings/SettingsStore";
import ViewSource from "../../structures/ViewSource"; import ViewSource from "../../structures/ViewSource";
import { Layout } from '../../../settings/enums/Layout';
interface IProps { interface IProps {
mxEvent: MatrixEvent; mxEvent: MatrixEvent;
layout: Layout;
} }
interface IState { interface IState {
@ -88,7 +90,7 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
</AccessibleButton>; </AccessibleButton>;
} }
return (<div className={classNames(classes)}> return (<li className={classNames(classes)} data-layout={this.props.layout}>
<div className="mx_EventTile_line"> <div className="mx_EventTile_line">
<span> <span>
{ _t("Can't load this message") } { _t("Can't load this message") }
@ -97,7 +99,7 @@ export default class TileErrorBoundary extends React.Component<IProps, IState> {
{ viewSourceButton } { viewSourceButton }
</span> </span>
</div> </div>
</div>); </li>);
} }
return this.props.children; return this.props.children;