From 1af1297afcf9de0a6fd400a761d88002f5387a48 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 7 Dec 2015 11:38:34 +0000
Subject: [PATCH 1/3] Allow queued events to be cancelled. Make not sent events
 appear differently to sending events.

---
 .../views/rooms/MessageContextMenu.js         | 21 +++++++++++++++++--
 src/skins/vector/css/molecules/EventTile.css  |  2 +-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/views/rooms/MessageContextMenu.js b/src/components/views/rooms/MessageContextMenu.js
index c6100db2d..87e02c7a6 100644
--- a/src/components/views/rooms/MessageContextMenu.js
+++ b/src/components/views/rooms/MessageContextMenu.js
@@ -57,25 +57,41 @@ module.exports = React.createClass({
         if (this.props.onFinished) this.props.onFinished();
     },
 
+    onCancelSendClick: function() {
+        Resend.removeFromQueue(this.props.mxEvent);
+    },
+
     render: function() {
+        var eventStatus = this.props.mxEvent.status;
         var resendButton;
         var viewSourceButton;
         var redactButton;
+        var cancelButton;
 
-        if (this.props.mxEvent.status == 'not_sent') {
+        if (eventStatus === 'not_sent') {
             resendButton = (
                 <div className="mx_ContextualMenu_field" onClick={this.onResendClick}>
                     Resend
                 </div>
             );
         }
-        else {
+
+        if (!eventStatus) { // sent
             redactButton = (
                 <div className="mx_ContextualMenu_field" onClick={this.onRedactClick}>
                     Redact
                 </div>
             );
         }
+
+        if (eventStatus === "queued") {
+            cancelButton = (
+                <div className="mx_ContextualMenu_field" onClick={this.onCancelSendClick}>
+                    Cancel Sending
+                </div>
+            );
+        }
+
         viewSourceButton = (
             <div className="mx_ContextualMenu_field" onClick={this.onViewSourceClick}>
                 View Source
@@ -86,6 +102,7 @@ module.exports = React.createClass({
             <div>
                 {resendButton}
                 {redactButton}
+                {cancelButton}
                 {viewSourceButton}
             </div>
         );
diff --git a/src/skins/vector/css/molecules/EventTile.css b/src/skins/vector/css/molecules/EventTile.css
index 7e1f1a26c..e3956bdb2 100644
--- a/src/skins/vector/css/molecules/EventTile.css
+++ b/src/skins/vector/css/molecules/EventTile.css
@@ -111,7 +111,7 @@ limitations under the License.
 }
 
 .mx_EventTile_notSent {
-    color: #ddd;
+    color: #f44;
 }
 
 .mx_EventTile_highlight,

From 39778330b562456e1d4191390c171356454d9ce5 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 7 Dec 2015 13:55:10 +0000
Subject: [PATCH 2/3] Also allow not_sent messages to be cancelled entirely.

---
 src/components/views/rooms/MessageContextMenu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/views/rooms/MessageContextMenu.js b/src/components/views/rooms/MessageContextMenu.js
index 87e02c7a6..58d8db0ee 100644
--- a/src/components/views/rooms/MessageContextMenu.js
+++ b/src/components/views/rooms/MessageContextMenu.js
@@ -84,7 +84,7 @@ module.exports = React.createClass({
             );
         }
 
-        if (eventStatus === "queued") {
+        if (eventStatus === "queued" || eventStatus === "not_sent") {
             cancelButton = (
                 <div className="mx_ContextualMenu_field" onClick={this.onCancelSendClick}>
                     Cancel Sending

From 2f905e13e1a2d10fa781c680455479ae9e181075 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 7 Dec 2015 16:04:46 +0000
Subject: [PATCH 3/3] Invoke onFinished so the context menu doesn't hang around

---
 src/components/views/rooms/MessageContextMenu.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/rooms/MessageContextMenu.js b/src/components/views/rooms/MessageContextMenu.js
index 58d8db0ee..4950cd882 100644
--- a/src/components/views/rooms/MessageContextMenu.js
+++ b/src/components/views/rooms/MessageContextMenu.js
@@ -59,6 +59,7 @@ module.exports = React.createClass({
 
     onCancelSendClick: function() {
         Resend.removeFromQueue(this.props.mxEvent);
+        if (this.props.onFinished) this.props.onFinished();
     },
 
     render: function() {