Change resend buttons to a context menu with working resending and non-working 'view source'

src/controllers/organisms/RoomView.js

@@ -70,6 +70,7 @@ module.exports = {
         switch (payload.action) {
             case 'message_send_failed':
             case 'message_sent':
+            case 'message_resend_started':
                 this.setState({
                     room: MatrixClientPeg.get().getRoom(this.props.roomId)
                 });

src/skins/vector/skindex.js

@@ -46,6 +46,7 @@ skin['molecules.MemberInfo'] = require('./views/molecules/MemberInfo');
 skin['molecules.MemberTile'] = require('./views/molecules/MemberTile');
 skin['molecules.MEmoteTile'] = require('./views/molecules/MEmoteTile');
 skin['molecules.MessageComposer'] = require('./views/molecules/MessageComposer');
+skin['molecules.MessageContextMenu'] = require('./views/molecules/MessageContextMenu');
 skin['molecules.MessageTile'] = require('./views/molecules/MessageTile');
 skin['molecules.MFileTile'] = require('./views/molecules/MFileTile');
 skin['molecules.MImageTile'] = require('./views/molecules/MImageTile');

src/skins/vector/views/molecules/MessageContextMenu.js

@@ -0,0 +1,72 @@
+/*
+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 MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+
+module.exports = React.createClass({
+    displayName: 'MessageContextMenu',
+
+    onResendClick: function() {
+        MatrixClientPeg.get().resendEvent(
+            this.props.mxEvent, MatrixClientPeg.get().getRoom(
+                this.props.mxEvent.getRoomId()
+            )
+        ).done(function() {
+            dis.dispatch({
+                action: 'message_sent'
+            });
+        }, function() {
+            dis.dispatch({
+                action: 'message_send_failed'
+            });
+        });
+        dis.dispatch({action: 'message_resend_started'});
+        if (this.props.onFinished) this.props.onFinished();
+    },
+
+    onViewSourceClick: function() {
+    },
+
+    render: function() {
+        var resendButton;
+        var viewSourceButton;
+
+        if (this.props.mxEvent.status == 'not_sent') {
+            resendButton = (
+                <div className="mx_ContextualMenu_field" onClick={this.onResendClick}>
+                    Resend
+                </div>
+            );
+        }
+        viewSourceButton = (
+            <div className="mx_ContextualMenu_field" onClick={this.onViewSourceClick}>
+                View Source
+            </div>
+        );
+
+        return (
+            <div>
+                {resendButton}
+                {viewSourceButton}
+            </div>
+        );
+    }
+});

src/skins/vector/views/molecules/MessageTile.js

@@ -17,17 +17,26 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-
 var classNames = require("classnames");
 
 var sdk = require('matrix-react-sdk')
 
 var MessageTileController = require('matrix-react-sdk/lib/controllers/molecules/MessageTile')
+var ContextualMenu = require('../../../../ContextualMenu');
 
 module.exports = React.createClass({
     displayName: 'MessageTile',
     mixins: [MessageTileController],
 
+    onClick: function(e) {
+        var MessageContextMenu = sdk.getComponent('molecules.MessageContextMenu');
+        ContextualMenu.createMenu(MessageContextMenu, {
+            mxEvent: this.props.mxEvent,
+            right: window.innerWidth - e.pageX,
+            top: e.pageY
+        });
+    },
+
     render: function() {
         var MessageTimestamp = sdk.getComponent('atoms.MessageTimestamp');
         var SenderProfile = sdk.getComponent('molecules.SenderProfile');
@@ -83,10 +92,9 @@ module.exports = React.createClass({
             </button>;
         }
         return (
-            <div className={classes}>
+            <div className={classes} onClick={this.onClick}>
                 { avatar }
                 { timestamp }
-                { resend }
                 { sender }
                 <TileType mxEvent={this.props.mxEvent} />
             </div>