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

Clean up inbox/compose view rendering and swapping

Browse source 
Templatize the inbox view and use the same pattern for in-window view
switching as is now used with the conversation/message detail views.
This means doing more with markup and less jquery manipulation of
individual subelements of the inbox view.
This commit is contained in:
lilia 2015-03-09 14:21:06 -07:00
parent fd6e2954f7
commit a72ea7966d
4 changed files with 59 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
index.html
View file

@ -13,21 +13,15 @@
<link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
</head>
<body class='signal index'>
<div class='title-bar' id='header'>
<div class='new-conversation-title hide'>
<button class='back'></button>
<span class='title-text'>New Message</span>
<script type="text/x-tmpl-mustache" id="inbox">
<div class='title-bar' id='header'>
<div class='socket-status'></div>
</div>
<div class='socket-status'></div>
</div>
<div class='notifications'>
<div class='notification info'>
</div>
</div>
<div id='gutter' class='gutter'>
<div id='contacts'></div>
<span class='fab'></span>
</div>
<div id='gutter' class='gutter'>
<div id='contacts'></div>
<span class='fab'></span>
</div>
</script>
<script type="text/x-tmpl-mustache" id="phone-number">
<div class="phone-input-form">
<div class="number-container">
@ -54,23 +48,29 @@
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-conversation'>
<div class='new-group-update-form clearfix'>
<div class='group-avatar'>
<div class='paperclip'></div>
<input type='file' name='avatar' class='file-input'>
<div class='title-bar' id='header'>
<button class='back'></button>
<span class='title-text'>New Message</span>
</div>
<div id='gutter' class='gutter'>
<div class='new-group-update-form clearfix'>
<div class='group-avatar'>
<div class='paperclip'></div>
<input type='file' name='avatar' class='file-input'>
</div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
<div class='recipients-container'>
<span class='recipients'></span>
<input type='text' class='new-message' placeholder="Name or phone number" />
</div>
<div class='buttons'>
<button class='create'>Next</button>
</div>
<div class='results'>
<div class='new-contact contact'></div>
<div class='contacts'></div>
</div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
<div class='recipients-container'>
<span class='recipients'></span>
<input type='text' class='new-message' placeholder="Name or phone number" />
</div>
<div class='buttons'>
<button class='create'>Next</button>
</div>
<div class='results'>
<div class='new-contact contact'></div>
<div class='contacts'></div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='attachment-preview'>

2
js/index.js
View file

@ -22,7 +22,7 @@
if (textsecure.storage.getUnencrypted("number_id") === undefined) {
window.location = '/options.html';
} else {
new Whisper.InboxView({el: $('body')});
new Whisper.InboxView().$el.prependTo($('body'));
textsecure.storage.putUnencrypted("unreadCount", 0);
extension.navigator.setBadgeText("");
}

34
js/views/inbox_view.js
View file

@ -53,18 +53,18 @@
}
});
Whisper.InboxView = Backbone.View.extend({
Whisper.InboxView = Whisper.View.extend({
template: $('#inbox').html(),
initialize: function () {
this.$gutter = $('#gutter');
this.$contacts = $('#contacts');
this.$fab = this.$el.find('.fab');
this.$back = this.$el.find('.new-conversation-title');
this.render();
this.newConversationView = new Whisper.NewConversationView();
this.newConversationView.$el.hide().appendTo(this.$gutter);
this.newConversationView.$el.hide();
this.listenTo(this.newConversationView, 'open',
this.openConversation.bind(this, null));
this.inbox = new Whisper.ConversationListView({
el : this.$contacts,
el : this.$el.find('#contacts'),
collection : bg.inbox
}).render();
@ -75,34 +75,24 @@
}.bind(this));
},
events: {
'keyup': 'keyup',
'click .back': 'hideCompose',
'click .fab': 'showCompose',
'select #contacts .contact': 'openConversation',
'open .new-conversation': 'openConversation'
'select .contact': 'openConversation',
},
openConversation: function(e, data) {
bg.openConversation(data.modelId);
this.hideCompose();
},
showCompose: function() {
this.$fab.hide();
this.$contacts.hide();
this.newConversationView.reset();
this.$el.hide();
this.newConversationView.$el.insertAfter(this.$el);
this.newConversationView.$el.show();
this.newConversationView.$input.focus();
this.$back.show();
this.listenToOnce(this.newConversationView, 'back', this.hideCompose);
},
hideCompose: function() {
this.newConversationView.$el.hide();
this.$contacts.show();
this.$fab.show();
this.$back.hide();
},
keyup: function(e) {
if (e.keyCode === 27) {
this.hideCompose();
}
this.$el.show();
}
});

20
js/views/new_conversation_view.js
View file

@ -101,7 +101,19 @@
'select .new-contact': 'addNewRecipient',
'select .contacts': 'addRecipient',
'remove .recipient': 'removeRecipient',
'click .create': 'create'
'click .create': 'create',
'click .back': 'goBack',
'keyup': 'keyup'
},
keyup: function(e) {
if (e.keyCode === 27) {
this.goBack();
}
},
goBack: function() {
this.trigger('back');
},
initNewContact: function() {
@ -180,12 +192,12 @@
type: 'private'
});
conversation.fetch().then(function() {
this.$el.trigger('open', { modelId: conversation.id });
this.trigger('open', { modelId: conversation.id });
}.bind(this)).fail(function() {
var saved = conversation.save(); // false or indexedDBRequest
if (saved) {
saved.then(function() {
this.$el.trigger('open', { modelId: conversation.id });
this.trigger('open', { modelId: conversation.id });
}.bind(this));
}
}.bind(this));
@ -210,7 +222,7 @@
var id = getString(groupId);
var group = new Whisper.Conversation(attributes);
group.save({ id: id, groupId: id }).then(function() {
this.$el.trigger('open', {modelId: id});
this.trigger('open', {modelId: id});
}.bind(this));
}.bind(this));
}.bind(this));