From 14765599f3078dfbe524e3d1444a9840b59c1684 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Wed, 12 Jul 2017 15:19:07 -0700
Subject: [PATCH] Delete individual message

FREEBIE
---
 _locales/en/messages.json       |  9 +++++++++
 background.html                 |  3 +++
 js/views/message_detail_view.js | 18 ++++++++++++++++++
 stylesheets/_conversation.scss  |  9 +++++++++
 stylesheets/manifest.css        |  5 +++++
 5 files changed, 44 insertions(+)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index d42d57f62..167f33578 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -296,6 +296,15 @@
     "messageDetail": {
         "message": "Message Detail"
     },
+    "delete": {
+      "message": "Delete"
+    },
+    "deleteWarning": {
+      "message": "Are you sure? Clicking 'delete' will permanently remove this message from this device."
+    },
+    "deleteMessage": {
+      "message": "Delete this message"
+    },
     "from": {
         "message": "From",
         "description": "Label for the sender of a message"
diff --git a/background.html b/background.html
index 8f5c07c0c..64db864a9 100644
--- a/background.html
+++ b/background.html
@@ -325,6 +325,9 @@
         <div class='contacts'>
         </div>
       </div>
+      <div class='delete-container'>
+        <button class='delete grey'>{{ deleteLabel }}</button>
+      </div>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='identity-key-send-error'>
diff --git a/js/views/message_detail_view.js b/js/views/message_detail_view.js
index 02ab9d01a..46240e5f9 100644
--- a/js/views/message_detail_view.js
+++ b/js/views/message_detail_view.js
@@ -89,6 +89,23 @@
 
             this.listenTo(this.model, 'change', this.render);
         },
+        events: {
+            'click button.delete': 'onDelete'
+        },
+        onDelete: function() {
+            var dialog = new Whisper.ConfirmationDialogView({
+                message: i18n('deleteWarning'),
+                okText: i18n('delete'),
+                resolve: function() {
+                    this.model.destroy();
+                    this.resetPanel();
+                }.bind(this),
+                reject: function() {}
+            });
+
+            this.$el.prepend(dialog.el);
+            dialog.focusCancel();
+        },
         getContact: function(number) {
             var c = ConversationController.get(number);
             return {
@@ -128,6 +145,7 @@
                 sent            : i18n('sent'),
                 received        : i18n('received'),
                 errorLabel      : i18n('error'),
+                deleteLabel     : i18n('deleteMessage'),
                 retryDescription: i18n('retryDescription')
             }));
             this.view.$el.prependTo(this.$('.message-container'));
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 404995e13..7e290a920 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -245,6 +245,15 @@
     color: $grey_d;
     border: solid 1px #ccc;
   }
+
+  .delete-container {
+    text-align: center;
+
+    button.delete {
+      background-color: red;
+      color: white;
+    }
+  }
 }
 .message-list {
   .error-icon {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index d2ca59992..82c13d884 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -1202,6 +1202,11 @@ input.search {
     float: right;
     color: #454545;
     border: solid 1px #ccc; }
+  .message-detail .delete-container {
+    text-align: center; }
+    .message-detail .delete-container button.delete {
+      background-color: red;
+      color: white; }
 
 .message-list .error-icon {
   cursor: pointer; }