Group avatars

index.html

@@ -68,7 +68,7 @@
             </div>
         </script>
         <script type='text/x-tmpl-mustache' id='contact'>
-            <div class='avatar' style='background-image: url({{ contact_avatar }});'></div>
+            <span class='avatar'></span>
             <div class='contact-details'>
                 <h3 class='contact-name'>
                 {{ contact_name }}
@@ -106,11 +106,16 @@
         <script type='text/x-tmpl-mustache' id='new-group-form'>
           <form class='send group'>
             <div><input name='name' class='name' placeholder='Group Name'></div>
+            <div class='group-avatar'>
+              <div><input type='file' name='avatar' class='file-input'></div>
+            </div>
             <div><input name='numbers' class='numbers' data-role=tagsinput></div>
             <div class='send-message-area'>
                 <div class='message-composer'>
                     <input class='send-message' rows='6' type='textarea'>
-                    <div class='attachments'> Add Files </div>
+                    <div class='attachments'>
+                      <input type='file' name='files[]' multiple class='file-input'>
+                    </div>
                     <input type='submit'>
                 </div>
                 <div class='extension-details'>
@@ -156,6 +161,7 @@
         <script type="text/javascript" src="js/views/file_input_view.js"></script>
         <script type="text/javascript" src="js/views/list_view.js"></script>
         <script type="text/javascript" src="js/views/group_update_view.js"></script>
+        <script type="text/javascript" src="js/views/attachment_view.js"></script>
         <script type="text/javascript" src="js/views/message_view.js"></script>
         <script type="text/javascript" src="js/views/message_list_view.js"></script>
         <script type="text/javascript" src="js/views/conversation_list_item_view.js"></script>

js/models/conversations.js

@@ -131,15 +131,16 @@
       return -m.get('timestamp');
     },
 
-    createGroup: function(recipients, name) {
+    createGroup: function(recipients, name, avatar) {
       var attributes = {};
       attributes = {
         name      : name,
         members   : recipients,
         type      : 'group',
+        avatar    : avatar
       };
       var conversation = this.add(attributes, {merge: true});
-      return textsecure.messaging.createGroup(recipients, name).then(function(groupId) {
+      return textsecure.messaging.createGroup(recipients, name, avatar).then(function(groupId) {
         conversation.save({
           id      : getString(groupId),
           groupId : getString(groupId)

js/views/attachment_view.js

@@ -0,0 +1,41 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function () {
+  'use strict';
+
+  Whisper.AttachmentView = Backbone.View.extend({
+    tagName:   "img",
+    encode: function  () {
+        return new Promise(function(resolve, reject) {
+            var blob = new Blob([this.model.data], { type: this.model.contentType });
+            var FR = new FileReader();
+            FR.onload = function(e) {
+                resolve(e.target.result);
+            };
+            FR.onerror = reject;
+            FR.readAsDataURL(blob);
+        }.bind(this));
+    },
+    render: function() {
+        this.encode().then(function(base64) {
+            this.$el.attr('src', base64);
+            this.$el.trigger('update');
+        }.bind(this));
+        return this;
+    }
+  });
+
+})();

js/views/conversation_list_item_view.js

@@ -32,11 +32,15 @@ var Whisper = Whisper || {};
       this.$el.html(
         Mustache.render(this.template, {
           contact_name: this.model.get('name') || this.model.get('members') || this.model.id,
-          contact_avatar: this.model.get('image'),
           last_message: this.model.get('lastMessage'),
           last_message_timestamp: moment(this.model.get('timestamp')).format('MMM D')
         })
       );
+      if (this.model.get('avatar')) {
+        this.$el.find('.avatar').append(
+          new Whisper.AttachmentView({model: this.model.get('avatar')}).render().el
+        );
+      }
 
       return this;
     }

js/views/file_input_view.js

@@ -14,7 +14,9 @@ var Whisper = Whisper || {};
         },
 
         addThumb: function(e) {
-          this.$el.append($('<img>').attr( "src", e.target.result ));
+          this.$el.append(
+            $('<img>').attr( "src", e.target.result ).addClass('preview')
+          );
         },
 
         previewImages: function() {

js/views/message_view.js

@@ -16,28 +16,6 @@
 (function () {
   'use strict';
 
-  var AttachmentView = Backbone.View.extend({
-    tagName:   "img",
-    encode: function  () {
-        return new Promise(function(resolve, reject) {
-            var blob = new Blob([this.model.data], { type: this.model.contentType });
-            var FR = new FileReader();
-            FR.onload = function(e) {
-                resolve(e.target.result);
-            };
-            FR.onerror = reject;
-            FR.readAsDataURL(blob);
-        }.bind(this));
-    },
-    render: function() {
-        this.encode().then(function(base64) {
-            this.$el.attr('src', base64);
-            this.$el.trigger('update');
-        }.bind(this));
-        return this;
-    }
-  });
-
   var ErrorView = Backbone.View.extend({
       className: 'error',
       events: {
@@ -90,7 +68,7 @@
 
             this.$el.find('.attachments').append(
                 this.model.get('attachments').map(function(attachment) {
-                    return new AttachmentView({model: attachment}).render().el;
+                    return new Whisper.AttachmentView({model: attachment}).render().el;
                 })
             );
 

js/views/new_group_view.js

@@ -26,7 +26,10 @@ var Whisper = Whisper || {};
       this.$el.html($(Mustache.render(this.template)));
       this.input = this.$el.find('input.number');
       new Whisper.GroupRecipientsInputView({el: this.$el.find('input.numbers')}).$el.appendTo(this.$el);
+      this.fileInput = new Whisper.FileInputView({el: this.$el.find('.attachments')});
+      this.avatarInput = new Whisper.FileInputView({el: this.$el.find('.group-avatar')});
     },
+
     events: {
       'submit .send': 'send',
       'close': 'remove'
@@ -36,12 +39,20 @@ var Whisper = Whisper || {};
       e.preventDefault();
       var numbers = this.$el.find('input.numbers').val().split(',');
       var name = this.$el.find('input.name').val();
+      var message_input = this.$el.find('input.send-message');
+      var message = message_input.val();
       var view = this;
-      this.collection.createGroup(numbers, name).then(function(convo){
+      if (message.length > 0 || this.fileInput.hasFiles()) {
-        convo.sendMessage(view.$el.find('input.send-message').val());
+        this.avatarInput.getFiles().then(function(avatar_files) {
-        view.remove();
+          view.collection.createGroup(numbers, name, avatar_files[0]).then(function(convo){
-        convo.trigger('render');
+            view.fileInput.getFiles().then(function(attachments) {
-      });
+                convo.sendMessage(view.$el.find('input.send-message').val());
+            });
+            convo.trigger('render');
+          });
+        });
+      }
+      this.remove();
     }
   });
 

stylesheets/index.css

@@ -73,7 +73,7 @@ li.entry img {
   margin-top: 5px;
 }
 
-.send .attachments img {
+img.preview {
   width: 30px;
   height: 30px;
 }

stylesheets/manifest.css

@@ -231,6 +231,9 @@ ul.discussion {
     background-color: #00badd;
     color: white; }
 
+.avatar img {
+  max-width: 100%; }
+
 @media screen and (min-width: 320px) {
   .send-message-area {
     position: fixed;

stylesheets/view/_conversation.scss

@@ -76,3 +76,7 @@ ul.discussion {
   &.sent .volley {
   }
 }
+
+.avatar img {
+  max-width: 100%;
+}

test/index.html

@@ -150,6 +150,7 @@
   <script type="text/javascript" src="../js/views/notifications.js"></script>
   <script type="text/javascript" src="../js/views/list_view.js" data-cover></script>
   <script type="text/javascript" src="../js/views/group_update_view.js"></script>
+  <script type="text/javascript" src="../js/views/attachment_view.js"></script>
   <script type="text/javascript" src="../js/views/message_view.js" data-cover></script>
   <script type="text/javascript" src="../js/views/message_list_view.js" data-cover></script>
   <script type="text/javascript" src="../js/views/conversation_list_item_view.js" data-cover></script>