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

Refactor components for the main content section

Browse source 
Each conversation views now manages its own separate elements
rather than all binding to a shared #conversation element, and
similarly for message composition ui.

Also includes the beginnings of group creation UI (not working yet),
featuring bootstrap-tagsinput field for entering group recipients
This commit is contained in:
lilia 2014-08-10 23:34:29 -07:00
parent 28e16aaae8
commit c034ac8267
9 changed files with 216 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
index.html
View file

@ -12,10 +12,14 @@
<link href='/favicon.ico' rel='shortcut icon'>
<link href="/stylesheets/normalize.css" rel="stylesheet" type="text/css" />
<link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
<link href="/stylesheets/index.css" rel="stylesheet" type="text/css" />
<link href="/stylesheets/bootstrap-tagsinput.css" rel="stylesheet" type="text/css" />
</head>
<body class='signal index' data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="nacl/pnacl/{config}">
<div class='title-bar'>
<div class='title-bar' id='header'>
<h1>Signal</h1>
<a href id='new-message'>New message</a>
<a href id='new-group'>New group</a>
</div>
<div class='notifications'>
<div class='notification info'>
@ -32,20 +36,19 @@
</div>
<div id='gutter' class='gutter'>
<div class='search'>
<input name='contact_search' placeholder='Search' type='search'>
<form>
<input name='contact_search' placeholder='Search' type='search'>
</form>
</div>
<div id='contacts'></div>
</div>
<div id= 'conversation' class='conversation'>
<ul id='discussion' class='discussion'>
</ul>
<script type='text/x-tmpl-mustache' id='conversation'>
<ul class='discussion'></ul>
<div class='send-message-area'>
<div class='message-composer'>
<form id='send'>
<form class='send'>
<input class='send-message' rows='6' type='textarea'>
<div class='attachments'>
Add Files
</div>
<div class='attachments'> Add Files </div>
</form>
</div>
<div class='extension-details'>
@ -57,7 +60,7 @@
</ul>
</div>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='message'>
<div class='bubble bubble_context {{ bubble_class }}'>
<ul class='volley'>
@ -81,8 +84,48 @@
</span>
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-message-form'>
<form class='send message'>
<input name='number' class='number'>
<div class='send-message-area'>
<div class='message-composer'>
<input class='send-message' rows='6' type='textarea'>
<div class='attachments'> Add Files </div>
</div>
<div class='extension-details'>
<ul>
<li>Signal for Chrome</li>
<li><a href="https://github.com/whispersystems">Version 0.1</a></li>
<li>by <a href="http://whispersystems.org">Open Whisper Systems</a></li>
<li><a href="http://support.whispersystems.org/">Need Help?</a></li>
</ul>
</div>
</div>
</form>
</script>
<script type='text/x-tmpl-mustache' id='new-group-form'>
<form class='send group'>
<input name='name' placeholder='New Group'>
<input name='numbers' class='numbers' data-role=tagsinput placeholder='Add Recipient'>
<div class='send-message-area'>
<div class='message-composer'>
<input class='send-message' rows='6' type='textarea'>
<div class='attachments'> Add Files </div>
</div>
<div class='extension-details'>
<ul>
<li>Signal for Chrome</li>
<li><a href="https://github.com/whispersystems">Version 0.1</a></li>
<li>by <a href="http://whispersystems.org">Open Whisper Systems</a></li>
<li><a href="http://support.whispersystems.org/">Need Help?</a></li>
</ul>
</div>
</div>
</form>
</script>
<script type="text/javascript" src="js-deps/nacl-common.js"></script>
<script type="text/javascript" src="js-deps/jquery.js"></script>
<script type="text/javascript" src="js-deps/bootstrap-tagsinput.js"></script>
<script type="text/javascript" src="js-deps/CryptoJS.js"></script>
<script type="text/javascript" src="js-deps/curve255.js"></script>
<script type="text/javascript" src="js-deps/Long.min.js"></script>
@ -110,6 +153,7 @@
<script type="text/javascript" src="js/views/conversation_list_item_view.js"></script>
<script type="text/javascript" src="js/views/conversation_list_view.js"></script>
<script type="text/javascript" src="js/views/conversation_view.js"></script>
<script type="text/javascript" src="js/views/new_message_button.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</body>
</html>

21
js/models/messages.js
View file

@ -48,26 +48,9 @@ var Whisper = Whisper || {};
if (decrypted.message.timestamp > thread.get('timestamp')) {
thread.set('timestamp', decrypted.message.timestamp);
}
thread.set('unreadCount', thread.get('unreadCount') + 1);
thread.set('active', true);
thread.save();
return m;
},
addOutgoingMessage: function(message, thread) {
var m = thread.messages().add({
threadId: thread.id,
body: message,
type: 'outgoing',
timestamp: new Date().getTime()
});
m.save();
thread.set('timestamp', new Date().getTime());
thread.set('unreadCount', 0);
thread.set('active', true);
thread.save();
thread.save({unreadCount: thread.get('unreadCount') + 1, active: true});
return m;
}
}))();
})()

22
js/models/threads.js
View file

@ -21,7 +21,15 @@ var Whisper = Whisper || {};
},
sendMessage: function(message) {
var m = Whisper.Messages.addOutgoingMessage(message, this);
this.messages().add({ type: 'outgoing',
body: message,
threadId: this.id,
timestamp: new Date().getTime() }).save();
this.save({ timestamp: new Date().getTime(),
unreadCount: 0,
active: true});
if (this.get('type') == 'private') {
var promise = textsecure.messaging.sendMessageToNumber(this.get('id'), message, []);
}
@ -57,6 +65,18 @@ var Whisper = Whisper || {};
return thread;
},
createGroup: function(recipients, name) {
var group = textsecure.storage.groups.createNewGroup(numbers);
var attributes = {};
attributes = {
id : group.id,
name : name,
numbers : group.numbers,
type : 'group',
};
return this.findOrCreate(attributes);
},
findOrCreateForRecipient: function(recipient) {
var attributes = {};
attributes = {

1
js/popup.js
View file

@ -17,6 +17,7 @@
new Whisper.ConversationListView({el: $('#contacts')});
new Whisper.Header({el: $('#header')});
Whisper.Threads.fetch({reset: true});
textsecure.registerOnLoadFunction(function() {

7
js/views/conversation_list_item_view.js
View file

@ -21,12 +21,9 @@ var Whisper = Whisper || {};
},
open: function(e) {
$('#conversation').trigger('close'); // detach any existing conversation views
$('.conversation').trigger('close'); // detach any existing conversation views
if (!this.view) {
this.view = new Whisper.ConversationView({
el: $('#conversation'),
model: this.model
});
this.view = new Whisper.ConversationView({ model: this.model });
} else {
this.view.delegateEvents();
}

13
js/views/conversation_view.js
View file

@ -4,19 +4,24 @@ var Whisper = Whisper || {};
'use strict';
Whisper.ConversationView = Backbone.View.extend({
className: 'conversation',
initialize: function() {
this.listenTo(this.model, 'destroy', this.stopListening); // auto update
this.template = $('#conversation').html();
Mustache.parse(this.template);
this.$el.html(Mustache.render(this.template));
this.view = new Whisper.MessageListView({collection: this.model.messages()});
this.$el.find('.discussion').append(this.view.el);
},
events: {
'submit #send': 'sendMessage',
'close': 'undelegateEvents'
'submit .send': 'sendMessage',
'close': 'remove'
},
sendMessage: function(e) {
e.preventDefault();
var input = this.$el.find('#send input');
var input = this.$el.find('.send input');
if (input.val().length > 0) {
this.model.sendMessage(input.val());
input.val("");
@ -24,7 +29,7 @@ var Whisper = Whisper || {};
},
render: function() {
this.view.render();
this.$el.show().insertAfter($('#gutter'));
return this;
}
});

6
js/views/message_list_view.js
View file

@ -6,10 +6,6 @@ var Whisper = Whisper || {};
Whisper.MessageListView = Whisper.ListView.extend({
tagName: 'ul',
className: 'discussion',
itemView: Whisper.MessageView,
render: function() {
$('#discussion').html('').append(this.el);
}
itemView: Whisper.MessageView
});
})();

120
js/views/new_message_button.js Normal file
View file

@ -0,0 +1,120 @@
var Whisper = Whisper || {};
(function () {
'use strict';
Whisper.GroupRecipientsInputView = Backbone.View.extend({
initialize: function() {
this.$el.tagsinput({ tagClass: this.tagClass });
},
tagClass: function(item) {
try {
if (textsecure.utils.verifyNumber(item)) {
return;
}
} catch(ex) {}
return 'error';
}
});
Whisper.NewGroupView = Backbone.View.extend({
initialize: function() {
this.template = $('#new-group-form').html();
Mustache.parse(this.template);
this.render();
new Whisper.GroupRecipientsInputView({el: this.$el.find('input.numbers')}).$el.appendTo(this.$el);
},
events: {
'submit #send': 'send'
},
send: function(e) {
var numbers = this.$el.find('input.numbers').val().split(',');
var name = this.$el.find('input.name').val();
var thread = Whisper.Threads.createGroup(numbers, name);
thread.sendMessage(input.val());
// close this, select the new thread
},
render: function() {
this.$el.prepend($(Mustache.render(this.template)));
return this;
}
});
Whisper.MessageRecipientInputView = Backbone.View.extend({
events: {
'change': 'verifyNumber',
'focus' : 'removeError'
},
removeError: function() {
this.$el.removeClass('error');
},
verifyNumber: function(item) {
try {
if (textsecure.utils.verifyNumber(this.$el.val())) {
this.removeError();
return;
}
} catch(ex) { console.log(ex); }
this.$el.addClass('error');
}
});
Whisper.NewConversationView = Backbone.View.extend({
initialize: function() {
this.template = $('#new-message-form').html();
Mustache.parse(this.template);
this.input = this.$el.find('input.number');
new Whisper.MessageRecipientInputView({el: this.input});
},
events: {
'submit #send': 'send',
'close': 'undelegateEvents'
},
send: function(e) {
e.preventDefault();
var number = this.input.val();
if (textsecure.utils.verifyNumber(number)) {
var thread = Whisper.Threads.findOrCreateForRecipient(number);
var send_input = this.$el.find('#send input');
thread.sendMessage(send_input.val());
send_input.val('');
this.$el.find('form.message').remove();
this.$el.trigger('close');
new Whisper.ConversationView({model: thread});
}
},
render: function() {
this.$el.html(Mustache.render(this.template));
return this;
}
});
Whisper.Header = Backbone.View.extend({
events: {
'click #new-message': 'new_message',
'click #new-group': 'new_group'
},
new_message: function(e) {
e.preventDefault();
$('.conversation').hide().trigger('close'); // detach any existing conversation views
this.view = new Whisper.NewConversationView().render().$el.insertAfter($('#gutter'));
//todo: less new
},
new_group: function(e) {
e.preventDefault();
$('.conversation').trigger('close'); // detach any existing conversation views
new Whisper.NewGroupView({ el: $('.conversation') });
}
});
})();

6
stylesheets/bootstrap-tagsinput.css vendored
View file

@ -29,6 +29,12 @@
.bootstrap-tagsinput .tag {
margin-right: 2px;
color: white;
background-color: #00badd;
padding: 2px 5px;
border-radius: 2px;
}
.bootstrap-tagsinput .tag.error {
background-color: #ccc;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
margin-left: 8px;