Merge pull request #2123 from matrix-org/dbkr/roomcreate

Support room creation events

Author: dbkr

res/css/_components.scss

@@ -68,6 +68,7 @@
 @import "./views/groups/_GroupUserSettings.scss";
 @import "./views/login/_InteractiveAuthEntryComponents.scss";
 @import "./views/login/_ServerConfig.scss";
+@import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";

res/css/views/messages/_CreateEvent.scss

@@ -0,0 +1,37 @@
+/*
+Copyright 2018 New Vector Ltd
+
+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_CreateEvent {
+    background-color: $info-plinth-bg-color;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.mx_CreateEvent_image {
+    float: left;
+    padding-right: 20px;
+    width: 72px;
+    height: 34px;
+}
+
+.mx_CreateEvent_header {
+    font-weight: bold;
+}
+
+.mx_CreateEvent_link {
+}

res/img/room-continuation.svg

@@ -0,0 +1,63 @@
+/*
+Copyright 2018 New Vector Ltd
+
+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 dis from '../../../dispatcher';
+import { makeEventPermalink } from '../../../matrix-to';
+import { _t } from '../../../languageHandler';
+
+module.exports = React.createClass({
+    displayName: 'RoomCreate',
+
+    propTypes: {
+        /* the MatrixEvent to show */
+        mxEvent: PropTypes.object.isRequired,
+    },
+
+    _onLinkClicked: function(e) {
+        e.preventDefault();
+
+        const predecessor = this.props.mxEvent.getContent()['predecessor'];
+
+        dis.dispatch({
+            action: 'view_room',
+            event_id: predecessor['event_id'],
+            highlighted: true,
+            room_id: predecessor['room_id'],
+        });
+    },
+
+    render: function() {
+        const predecessor = this.props.mxEvent.getContent()['predecessor'];
+        if (predecessor === undefined) {
+            return <div />; // We should never have been instaniated in this case
+        }
+        return <div className="mx_CreateEvent">
+            <img className="mx_CreateEvent_image" src="img/room-continuation.svg" />
+            <div className="mx_CreateEvent_header">
+                {_t("This room is a continuation of another conversation.")}
+            </div>
+            <a className="mx_CreateEvent_link"
+                href={makeEventPermalink(predecessor['room_id'], predecessor['event_id'])}
+                onClick={this._onLinkClicked}
+            >
+                {_t("Click here to see older messages.")}
+            </a>
+        </div>;
+    },
+});

src/components/views/messages/RoomCreate.js

@@ -47,6 +47,7 @@ const eventTileTypes = {
 };
 
 const stateEventTileTypes = {
+    'm.room.create': 'messages.RoomCreate',
     'm.room.member': 'messages.TextualEvent',
     'm.room.name': 'messages.TextualEvent',
     'm.room.avatar': 'messages.RoomAvatarEvent',
@@ -483,7 +484,7 @@ module.exports = withMatrixClient(React.createClass({
         const eventType = this.props.mxEvent.getType();
 
         // Info messages are basically information about commands processed on a room
-        const isInfoMessage = (eventType !== 'm.room.message' && eventType !== 'm.sticker');
+        const isInfoMessage = (eventType !== 'm.room.message' && eventType !== 'm.sticker' && eventType != 'm.room.create');
 
         const tileHandler = getHandlerTile(this.props.mxEvent);
         // This shouldn't happen: the caller should check we support this type
@@ -535,6 +536,9 @@ module.exports = withMatrixClient(React.createClass({
         if (this.props.tileShape === "notif") {
             avatarSize = 24;
             needsSenderProfile = true;
+        } else if (tileHandler === 'messages.RoomCreate') {
+            avatarSize = 0;
+            needsSenderProfile = false;
         } else if (isInfoMessage) {
             // a small avatar, with no sender profile, for
             // joins/parts/etc
@@ -745,6 +749,8 @@ module.exports.haveTileForEvent = function(e) {
     if (handler === undefined) return false;
     if (handler === 'messages.TextualEvent') {
         return TextForEvent.textForEvent(e) !== '';
+    } else if (handler === 'messages.RoomCreate') {
+        return Boolean(e.getContent()['predecessor']);
     } else {
         return true;
     }

src/components/views/rooms/EventTile.js

@@ -607,6 +607,8 @@
     "%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",
     "%(senderDisplayName)s removed the room avatar.": "%(senderDisplayName)s removed the room avatar.",
     "%(senderDisplayName)s changed the room avatar to <img/>": "%(senderDisplayName)s changed the room avatar to <img/>",
+    "This room is a continuation of another conversation.": "This room is a continuation of another conversation.",
+    "Click here to see older messages.": "Click here to see older messages.",
     "Copied!": "Copied!",
     "Failed to copy": "Failed to copy",
     "Add an Integration": "Add an Integration",