From 881aa1685defaf6719ceea100398f7e6bb746a18 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 21 Dec 2015 17:36:33 -0800
Subject: [PATCH] Fix up unsupported attachment rendering

Rather than simply displaying an inactionable error, render a link that
allows the user to save the unsupported attachment.

// FREEBIE
---
 js/views/attachment_view.js    | 49 +++++++++++++++++-----------------
 js/views/message_view.js       |  3 ++-
 stylesheets/_conversation.scss | 13 +++++++--
 stylesheets/manifest.css       |  9 ++++++-
 4 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/js/views/attachment_view.js b/js/views/attachment_view.js
index 10e4a04d..9c9d9689 100644
--- a/js/views/attachment_view.js
+++ b/js/views/attachment_view.js
@@ -4,8 +4,24 @@
 (function () {
   'use strict';
 
-  Whisper.FileTypeToast = Whisper.ToastView.extend({
-    template: $('#attachment-type-modal').html()
+  var FileView = Backbone.View.extend({
+      tagName: 'a',
+      initialize: function(dataUrl) {
+          this.dataUrl = dataUrl;
+          this.$el.text("Unsupported attachment type. Click to save.");
+      },
+      events: {
+          'click': 'open'
+      },
+      open: function (e) {
+          e.preventDefault();
+          window.open(this.dataUrl, '_blank');
+      },
+      render: function() {
+        this.$el.attr('href', this.dataUrl);
+        this.trigger('update');
+        return this;
+      }
   });
 
   var ImageView = Backbone.View.extend({
@@ -58,33 +74,18 @@
     className: 'attachment',
     render: function() {
         var View;
-        var isUnsupportedType = false;
         switch(this.model.contentType.split('/')[0]) {
             case 'image': View = ImageView; break;
             case 'audio': View = AudioView; break;
             case 'video': View = VideoView; break;
-            default:
-              isUnsupportedType = true;
+            default     : View = FileView; break;
         }
-        
-        if (isUnsupportedType) {
-            var toast = new Whisper.FileTypeToast({
-                model: {type: this.model.contentType.split('/')[0]}
-            });
-            toast.$el.insertAfter(this.$el);
-            toast.render();
-            return toast;
-        } else {
-          var blob = new Blob([this.model.data], {type: this.model.contentType});
-          var view = new View(window.URL.createObjectURL(blob), this.model.contentType);
-          view.$el.appendTo(this.$el);
-          view.render();
-          view.on('update', this.trigger.bind(this, 'update'));
-          return this;
-        }
-    },
-    deleteView: function(e) {
-      if (e) { e.stopPropagation(); }
+        var blob = new Blob([this.model.data], {type: this.model.contentType});
+        var view = new View(window.URL.createObjectURL(blob), this.model.contentType);
+        view.$el.appendTo(this.$el);
+        view.on('update', this.trigger.bind(this, 'update'));
+        view.render();
+        return this;
     }
   });
 
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 7cf2c7e9..8bdaf0c8 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -100,12 +100,13 @@
         },
         loadAttachments: function() {
             this.model.get('attachments').forEach(function(attachment) {
-                var view = new Whisper.AttachmentView({ model: attachment }).render();
+                var view = new Whisper.AttachmentView({ model: attachment });
                 this.listenTo(view, 'update', function() {
                     this.trigger('beforeChangeHeight');
                     this.$('.attachments').append(view.el);
                     this.trigger('afterChangeHeight');
                 });
+                view.render();
             }.bind(this));
         }
     });
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index ccbde2a0..0b6a7067 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -365,11 +365,12 @@
         border-left: 8px solid $blue;
       }
 
-      .content {
+      .attachments, .content {
         a {
           color: $grey_l;
         }
-
+      }
+      .content {
         &::selection, a::selection {
           color: $grey_d;
           background: white;
@@ -396,6 +397,13 @@
   }
 
   .attachments {
+    a {
+      font-style: italic;
+      display: block;
+      padding: 1em;
+      background-color: #ccc;
+    }
+
     img, audio, video {
       max-width: 100%;
       max-height: 300px;
@@ -409,6 +417,7 @@
     img {
       cursor: pointer;
     }
+
   }
 
   .outgoing .avatar {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index f969340f..df34b4bb 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -852,7 +852,8 @@ input.search {
     .message-list .outgoing .bubble::after {
       right: -8px;
       border-left: 8px solid #2090ea; }
-    .message-detail .outgoing .bubble .content a,
+    .message-detail .outgoing .bubble .attachments a, .message-detail .outgoing .bubble .content a,
+    .message-list .outgoing .bubble .attachments a,
     .message-list .outgoing .bubble .content a {
       color: #f3f3f3; }
     .message-detail .outgoing .bubble .content::selection, .message-detail .outgoing .bubble .content a::selection,
@@ -872,6 +873,12 @@ input.search {
   .message-list .control .bubble::before,
   .message-list .control .bubble::after {
     display: none; }
+  .message-detail .attachments a,
+  .message-list .attachments a {
+    font-style: italic;
+    display: block;
+    padding: 1em;
+    background-color: #ccc; }
   .message-detail .attachments img, .message-detail .attachments audio, .message-detail .attachments video,
   .message-list .attachments img,
   .message-list .attachments audio,