Delete individual message

FREEBIE

_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"

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'>

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'));

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 {

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; }