Merge pull request #3144 from matrix-org/bwindels/edit-history

Edit history dialog

res/css/_components.scss

@@ -61,6 +61,7 @@
 @import "./views/dialogs/_EncryptedEventDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
+@import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_RestoreKeyBackupDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialog.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";

res/css/structures/_RoomDirectory.scss

@@ -35,13 +35,6 @@ limitations under the License.
  flex: 1;
 }
 
-.mx_RoomDirectory .gm-scroll-view {
- // little hack because gemini doesn't seem to detect
- // the scrollbar width well in this instance
- // when using css scrollbars
- scrollbar-width: thin;
-}
-
 .mx_RoomDirectory_createRoom {
  background-color: $button-bg-color;
  border-radius: 4px;

res/css/views/dialogs/_MessageEditHistoryDialog.scss

@@ -0,0 +1,41 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title {
+ text-align: center;
+}
+
+.mx_MessageEditHistoryDialog {
+ display: flex;
+ flex-direction: column;
+ max-height: 60vh;
+}
+
+.mx_MessageEditHistoryDialog_scrollPanel {
+ flex: 1 1 auto;
+}
+
+.mx_MessageEditHistoryDialog_edits {
+ list-style-type: none;
+ font-size: 14px;
+ padding: 0;
+ color: $primary-fg-color;
+
+ .mx_EventTile_line, .mx_EventTile_content {
+ margin-right: 0px;
+ }
+}
+

res/css/views/messages/_MessageTimestamp.scss

@@ -15,4 +15,6 @@ limitations under the License.
 */
 
 .mx_MessageTimestamp {
+ color: $event-timestamp-color;
+ font-size: 10px;
 }

res/css/views/rooms/_EventTile.scss

@@ -93,8 +93,6 @@ limitations under the License.
  display: block;
  visibility: hidden;
  white-space: nowrap;
- color: $event-timestamp-color;
- font-size: 10px;
  left: 0px;
  width: 46px; /* 8 + 30 (avatar) + 8 */
  text-align: center;
@@ -403,6 +401,7 @@ limitations under the License.
  color: $roomtopic-color;
  display: inline-block;
  margin-left: 9px;
+ cursor: pointer;
 }
 
 /* Various markdown overrides */

src/components/views/dialogs/MessageEditHistoryDialog.js

@@ -0,0 +1,108 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import { _t } from '../../../languageHandler';
+import sdk from "../../../index";
+import {wantsDateSeparator} from '../../../DateUtils';
+import SettingsStore from '../../../settings/SettingsStore';
+
+export default class MessageEditHistoryDialog extends React.PureComponent {
+ static propTypes = {
+ mxEvent: PropTypes.object.isRequired,
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ events: [],
+ nextBatch: null,
+ isLoading: true,
+ isTwelveHour: SettingsStore.getValue("showTwelveHourTimestamps"),
+ };
+ }
+
+ loadMoreEdits = async (backwards) => {
+ if (backwards || (!this.state.nextBatch && !this.state.isLoading)) {
+ // bail out on backwards as we only paginate in one direction
+ return false;
+ }
+ const opts = {from: this.state.nextBatch};
+ const roomId = this.props.mxEvent.getRoomId();
+ const eventId = this.props.mxEvent.getId();
+ const result = await MatrixClientPeg.get().relations(
+ roomId, eventId, "m.replace", "m.room.message", opts);
+ let resolve;
+ const promise = new Promise(r => resolve = r);
+ this.setState({
+ events: this.state.events.concat(result.events),
+ nextBatch: result.nextBatch,
+ isLoading: false,
+ }, () => {
+ const hasMoreResults = !!this.state.nextBatch;
+ resolve(hasMoreResults);
+ });
+ return promise;
+ }
+
+ componentDidMount() {
+ this.loadMoreEdits();
+ }
+
+ _renderEdits() {
+ const EditHistoryMessage = sdk.getComponent('messages.EditHistoryMessage');
+ const DateSeparator = sdk.getComponent('messages.DateSeparator');
+ const nodes = [];
+ let lastEvent;
+ this.state.events.forEach(e => {
+ if (!lastEvent || wantsDateSeparator(lastEvent.getDate(), e.getDate())) {
+ nodes.push(<li key={e.getTs() + "~"}><DateSeparator ts={e.getTs()} /></li>);
+ }
+ nodes.push(<EditHistoryMessage key={e.getId()} mxEvent={e} isTwelveHour={this.state.isTwelveHour} />);
+ lastEvent = e;
+ });
+ return nodes;
+ }
+
+ render() {
+ let content;
+ if (this.state.error) {
+ content = this.state.error;
+ } else if (this.state.isLoading) {
+ const Spinner = sdk.getComponent("elements.Spinner");
+ content = <Spinner />;
+ } else {
+ const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
+ content = (<ScrollPanel
+ className="mx_MessageEditHistoryDialog_scrollPanel"
+ onFillRequest={ this.loadMoreEdits }
+ stickyBottom={false}
+ startAtBottom={false}
+ >
+ <ul className="mx_MessageEditHistoryDialog_edits mx_MessagePanel_alwaysShowTimestamps">{this._renderEdits()}</ul>
+ </ScrollPanel>);
+ }
+ const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+ return (
+ <BaseDialog className='mx_MessageEditHistoryDialog' hasCancel={true}
+ onFinished={this.props.onFinished} title={_t("Message edits")}>
+ {content}
+ </BaseDialog>
+ );
+ }
+}

src/components/views/messages/EditHistoryMessage.js

@@ -0,0 +1,60 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as HtmlUtils from '../../../HtmlUtils';
+import {formatTime} from '../../../DateUtils';
+import {MatrixEvent} from 'matrix-js-sdk';
+import {pillifyLinks} from '../../../utils/pillify';
+
+export default class EditHistoryMessage extends React.PureComponent {
+ static propTypes = {
+ // the message event being edited
+ mxEvent: PropTypes.instanceOf(MatrixEvent).isRequired,
+ };
+
+ componentDidMount() {
+ pillifyLinks(this.refs.content.children, this.props.mxEvent);
+ }
+
+ componentDidUpdate() {
+ pillifyLinks(this.refs.content.children, this.props.mxEvent);
+ }
+
+ render() {
+ const {mxEvent} = this.props;
+ const content = mxEvent.event.content["m.new_content"] || mxEvent.event.content;
+ const contentElements = HtmlUtils.bodyToHtml(content);
+ let contentContainer;
+ if (mxEvent.getContent().msgtype === "m.emote") {
+ const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+ contentContainer = (<div className="mx_EventTile_content" ref="content">*&nbsp;
+ <span className="mx_MEmoteBody_sender">{ name }</span>
+ &nbsp;{contentElements}
+ </div>);
+ } else {
+ contentContainer = (<div className="mx_EventTile_content" ref="content">{contentElements}</div>);
+ }
+ const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour);
+ return <li className="mx_EventTile">
+ <div className="mx_EventTile_line">
+ <span className="mx_MessageTimestamp">{timestamp}</span>
+ { contentContainer }
+ </div>
+ </li>;
+ }
+}