recycle EventTile css to make history items look mostly similar

This commit is contained in:
Bruno Windels 2019-06-26 11:56:58 +02:00
parent 8c9a6ddf96
commit ee03a0f31d
2 changed files with 12 additions and 22 deletions

View file

@ -28,23 +28,11 @@ limitations under the License.
.mx_MessageEditHistoryDialog_edits { .mx_MessageEditHistoryDialog_edits {
list-style-type: none; list-style-type: none;
font-size: 14px; font-size: 14px;
padding: 0;
color: $primary-fg-color;
&>li.edit { .mx_EventTile_line, .mx_EventTile_content {
margin: 10px 0; margin-right: 0px;
display: flex;
&>.mx_MessageTimestamp {
flex: 0 0 50px;
}
&>p {
margin: 0;
}
}
ul, ol {
list-style-type: circle;
} }
} }

View file

@ -46,17 +46,19 @@ export default class EditHistoryMessage extends React.Component {
let contentContainer; let contentContainer;
if (mxEvent.getContent().msgtype === "m.emote") { if (mxEvent.getContent().msgtype === "m.emote") {
const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(); const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
contentContainer = (<p ref="content">*&nbsp; contentContainer = (<div className="mx_EventTile_content" ref="content">*&nbsp;
<span className="mx_MEmoteBody_sender">{ name }</span> <span className="mx_MEmoteBody_sender">{ name }</span>
&nbsp;{contentElements} &nbsp;{contentElements}
</p>); </div>);
} else { } else {
contentContainer = (<p ref="content">{contentElements}</p>); contentContainer = (<div className="mx_EventTile_content" ref="content">{contentElements}</div>);
} }
const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour); const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour);
return <li className="edit mx_EventTile_content"> return <li className="mx_EventTile">
<span className="mx_MessageTimestamp">{timestamp}</span> <div className="mx_EventTile_line">
{ contentContainer } <span className="mx_MessageTimestamp">{timestamp}</span>
{ contentContainer }
</div>
</li>; </li>;
} }
} }