Fixup file size warning

Add contentType-specific limits, switch to lazy-init iff we encounter an
oversized file, and restyle as a toast, factoring out a generic
ToastView along the way.

conversation.html

@@ -73,20 +73,8 @@
             </div>
         </script>
         <script type='text/x-tmpl-mustache' id='file-size-modal'>
-            <div id="modal" class="modal-wrapper">
-                <div class="modal-content">
-                    <div class="modal-container">
-                        <div class="modal-banner">
-                            <span>File Too Large</span>
-                            <div class="modal-close"><a class="modal-close-button"  href="#" title="Close">X</a></div>
-                        </div>
-                        <div class="modal-inner modal-padding">
-                            <p>This file exceeds 420KB. Please attach a smaller file.</p>
-                            <button id="closeModal"><a href="#">OK</a></button>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            Sorry, the selected file exceeds message size
+            restrictions. ({{ limit }}kB)
         </script>
         <script type='text/x-tmpl-mustache' id='message-detail'>
           <div class='title-bar' id='header'>
@@ -146,7 +134,7 @@
 
         <script type="text/javascript" src="js/chromium.js"></script>
 
-        <script type="text/javascript" src="js/views/file_modal_view.js"></script>
+        <script type="text/javascript" src="js/views/toast_view.js"></script>
         <script type="text/javascript" src="js/views/attachment_preview_view.js"></script>
         <script type="text/javascript" src="js/views/file_input_view.js"></script>
         <script type="text/javascript" src="js/views/list_view.js"></script>

js/views/file_input_view.js

@@ -18,12 +18,15 @@ var Whisper = Whisper || {};
 (function () {
     'use strict';
 
+    Whisper.FileSizeToast = Whisper.ToastView.extend({
+        template: $('#file-size-modal').html()
+    });
+
     Whisper.FileInputView = Backbone.View.extend({
         tagName: 'span',
         className: 'file-input',
         initialize: function() {
             this.$input = this.$el.find('input[type=file]');
-            this.modal = new Whisper.ModalView({el: $('#file-modal')});
             this.thumb = new Whisper.AttachmentPreviewView();
             this.$el.addClass('file-input');
         },
@@ -48,8 +51,16 @@ var Whisper = Whisper || {};
             var files = this.$input.prop('files');
             for (var i = 0; i < files.length; i++) {
                 var FR = new FileReader();
-                if ((files[i].size/1024).toFixed(4) >= 420) {
-                    this.modal.open();
+                var limitKb = 1000000;
+                switch (files[i].type.split('/')[0]) {
+                    case 'image': limitKb = 420; break;
+                    case 'audio': limitKb = 32000; break;
+                    case 'video': limitKb = 8000; break;
+                }
+                if ((files[i].size/1024).toFixed(4) >= limitKb) {
+                    new Whisper.FileSizeToast({
+                        model: {limit: limitKb}
+                    }).render();
                     this.deleteFiles();
                 }
                 else {

js/views/toast_view.js

@@ -17,27 +17,21 @@ var Whisper = Whisper || {};
 
 (function () {
     'use strict';
-    Whisper.ModalView = Backbone.View.extend({
-        tagName: 'div',
-        className: 'file-overload-modal',
+    Whisper.ToastView = Backbone.View.extend({
+        className: 'toast',
         initialize: function() {
-            this.template = $('#file-size-modal').html();
             Mustache.parse(this.template);
             this.$el.hide();
-            this.$el.html($(Mustache.render(this.template)));
         },
 
-        events: {
-            'click .modal-close': 'close',
-            'click #closeModal': 'close'
-        },
-
-        open: function() {
-            this.$el.show();
+        close: function() {
+            this.$el.fadeOut(this.remove.bind(this));
         },
 
-        close: function() {
-            this.$el.hide();
+        render: function() {
+            this.$el.html(Mustache.render(this.template, this.model));
+            this.$el.appendTo($('body')).show();
+            setTimeout(this.close.bind(this), 2000);
         }
     });
 })();

stylesheets/_conversation.scss

@@ -264,3 +264,14 @@
   }
 }
 
+.toast {
+  position: absolute;
+  bottom: 0;
+  margin: 0 2em 3em;
+  padding: 0.5em 1.5em;
+  background: rgba(0, 0, 0, 0.75);
+  color: white;
+  box-shadow: 0 0 5px 0 black;
+  border-radius: 20px;
+  font-size: small;
+}

stylesheets/manifest.css

@@ -478,3 +478,14 @@ input.new-message {
     border: 0;
     outline: 0;
     z-index: 5; }
+
+.toast {
+  position: absolute;
+  bottom: 0;
+  margin: 0 2em 3em;
+  padding: 0.5em 1.5em;
+  background: rgba(0, 0, 0, 0.75);
+  color: white;
+  box-shadow: 0 0 5px 0 black;
+  border-radius: 20px;
+  font-size: small; }