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>;
+    }
+}