Merge pull request #40 from matrix-org/matthew/rename-message-components

rename message components as per RL discussion this morning

src/components/views/messages/MFileBody.js

@@ -21,7 +21,7 @@ var filesize = require('filesize');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 
 module.exports = React.createClass({
-    displayName: 'MFileMessage',
+    displayName: 'MFileBody',
 
     presentableTextForFile: function(content) {
         var linkText = 'Attachment';

src/components/views/messages/MImageBody.js

@@ -24,7 +24,7 @@ var Modal = require('../../../Modal');
 var sdk = require('../../../index');
 
 module.exports = React.createClass({
-    displayName: 'MImageMessage',
+    displayName: 'MImageBody',
 
     thumbHeight: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
         if (!fullWidth || !fullHeight) {

src/components/views/messages/MRoomMemberEvent.js

@@ -1,52 +0,0 @@
-/*
-Copyright 2015 OpenMarket 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.
-*/
-
-'use strict';
-
-var React = require('react');
-
-var sdk = require('../../../index');
-var TextForEvent = require('../../../TextForEvent');
-
-module.exports = React.createClass({
-    displayName: 'MRoomMemberEvent',
-
-    getMemberEventText: function() {
-        return TextForEvent.textForEvent(this.props.mxEvent);
-    },
-
-    render: function() {
-        // XXX: for now, just cheekily borrow the css from message tile...
-        var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
-        var text = this.getMemberEventText();
-        if (!text) return <div/>;
-        var MessageTimestamp = sdk.getComponent('messages.MessageTimestamp');
-        var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-        return (
-            <div className="mx_MessageTile mx_MessageTile_notice">
-                <div className="mx_MessageTile_avatar">
-                    <MemberAvatar member={this.props.mxEvent.sender} />
-                </div>            
-                { timestamp }
-                <span className="mx_SenderProfile"></span>
-                <span className="mx_MessageTile_content">
-                    { text }
-                </span>
-            </div>
-        );
-    },
-});
-

src/components/views/messages/MVideoBody.js

@@ -24,7 +24,7 @@ var Modal = require('../../../Modal');
 var sdk = require('../../../index');
 
 module.exports = React.createClass({
-    displayName: 'MVideoMessage',
+    displayName: 'MVideoBody',
 
     thumbScale: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
         if (!fullWidth || !fullHeight) {

src/components/views/messages/MessageEvent.js

@@ -20,7 +20,7 @@ var React = require('react');
 var sdk = require('../../../index');
 
 module.exports = React.createClass({
-    displayName: 'Message',
+    displayName: 'MessageEvent',
 
     statics: {
         needsSenderProfile: function() {
@@ -29,15 +29,15 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var UnknownMessageTile = sdk.getComponent('messages.UnknownMessage');
+        var UnknownMessageTile = sdk.getComponent('messages.UnknownBody');
 
         var tileTypes = {
-            'm.text': sdk.getComponent('messages.TextualMessage'),
-            'm.notice': sdk.getComponent('messages.TextualMessage'),
-            'm.emote': sdk.getComponent('messages.TextualMessage'),
-            'm.image': sdk.getComponent('messages.MImageMessage'),
-            'm.file': sdk.getComponent('messages.MFileMessage'),
-            'm.video': sdk.getComponent('messages.MVideoMessage')
+            'm.text': sdk.getComponent('messages.TextualBody'),
+            'm.notice': sdk.getComponent('messages.TextualBody'),
+            'm.emote': sdk.getComponent('messages.TextualBody'),
+            'm.image': sdk.getComponent('messages.MImageBody'),
+            'm.file': sdk.getComponent('messages.MFileBody'),
+            'm.video': sdk.getComponent('messages.MVideoBody')
         };
 
         var content = this.props.mxEvent.getContent();

src/components/views/messages/TextualBody.js

@@ -26,7 +26,7 @@ var linkifyMatrix = require('../../../linkify-matrix');
 linkifyMatrix(linkify);
 
 module.exports = React.createClass({
-    displayName: 'TextualMessage',
+    displayName: 'TextualBody',
 
     componentDidMount: function() {
         linkifyElement(this.refs.content, linkifyMatrix.options);

src/components/views/messages/UnknownBody.js

@@ -19,7 +19,7 @@ limitations under the License.
 var React = require('react');
 
 module.exports = React.createClass({
-    displayName: 'UnknownMessage',
+    displayName: 'UnknownBody',
 
     render: function() {
         var content = this.props.mxEvent.getContent();

src/components/views/rooms/EventTile.js

@@ -37,7 +37,7 @@ try {
 }
 
 var eventTileTypes = {
-    'm.room.message': 'messages.Message',
+    'm.room.message': 'messages.MessageEvent',
     'm.room.member' : 'messages.TextualEvent',
     'm.call.invite' : 'messages.TextualEvent',
     'm.call.answer' : 'messages.TextualEvent',
@@ -48,6 +48,17 @@ var eventTileTypes = {
 
 var MAX_READ_AVATARS = 5;
 
+// Our component structure for EventTiles on the timeline is:
+//
+// .-EventTile------------------------------------------------.
+// | MemberAvatar (SenderProfile)                   TimeStamp |
+// |    .-{Message,Textual}Event---------------. Read Avatars |
+// |    |   .-MFooBody-------------------.     |              |
+// |    |   |  (only if MessageEvent)    |     |              |
+// |    |   '----------------------------'     |              |
+// |    '--------------------------------------'              |
+// '----------------------------------------------------------'
+
 module.exports = React.createClass({
     displayName: 'Event',