thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Group avatars

Browse source
This commit is contained in:
lilia 2015-01-11 01:27:22 -10:00
parent d52db8fe6f
commit 3d6c251fd1
11 changed files with 87 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
index.html
View file

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

5
js/models/conversations.js
View file

@ -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)

41
js/views/attachment_view.js Normal file
View file

@ -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;
}
});
})();

6
js/views/conversation_list_item_view.js
View file

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

4
js/views/file_input_view.js
View file

@ -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() {

24
js/views/message_view.js
View file

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

21
js/views/new_group_view.js
View file

@ -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){
convo.sendMessage(view.$el.find('input.send-message').val());
view.remove();
convo.trigger('render');
});
if (message.length > 0 || this.fileInput.hasFiles()) {
this.avatarInput.getFiles().then(function(avatar_files) {
view.collection.createGroup(numbers, name, avatar_files[0]).then(function(convo){
view.fileInput.getFiles().then(function(attachments) {
convo.sendMessage(view.$el.find('input.send-message').val());
});
convo.trigger('render');
});
});
}
this.remove();
}
});

2
stylesheets/index.css
View file

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

3
stylesheets/manifest.css
View file

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

6
stylesheets/view/_conversation.scss
View file

@ -75,4 +75,8 @@ ul.discussion {
}
&.sent .volley {
}
}
}
.avatar img {
max-width: 100%;
}

1
test/index.html
View file

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