mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

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
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" /> <link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
</head> </head>
<body class='signal index'> <body class='signal index'>
<div class='title-bar' id='header'> <script type="text/x-tmpl-mustache" id="inbox">
<div class='new-conversation-title hide'> <div class='title-bar' id='header'>
<button class='back'></button> <div class='socket-status'></div>
<span class='title-text'>New Message</span>
</div> </div>
<div class='socket-status'></div> <div id='gutter' class='gutter'>
</div> <div id='contacts'></div>
<div class='notifications'> <span class='fab'></span>
<div class='notification info'> </div>
</div> </script>
</div>
<div id='gutter' class='gutter'>
<div id='contacts'></div>
<span class='fab'></span>
</div>
<script type="text/x-tmpl-mustache" id="phone-number"> <script type="text/x-tmpl-mustache" id="phone-number">
<div class="phone-input-form"> <div class="phone-input-form">
<div class="number-container"> <div class="number-container">
@ -54,23 +48,29 @@
</div> </div>
</script> </script>
<script type='text/x-tmpl-mustache' id='new-conversation'> <script type='text/x-tmpl-mustache' id='new-conversation'>
<div class='new-group-update-form clearfix'> <div class='title-bar' id='header'>
<div class='group-avatar'> <button class='back'></button>
<div class='paperclip'></div> <span class='title-text'>New Message</span>
<input type='file' name='avatar' class='file-input'> </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> </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> </div>
</script> </script>
<script type='text/x-tmpl-mustache' id='attachment-preview'> <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) { if (textsecure.storage.getUnencrypted("number_id") === undefined) {
window.location = '/options.html'; window.location = '/options.html';
} else { } else {
new Whisper.InboxView({el: $('body')}); new Whisper.InboxView().$el.prependTo($('body'));
textsecure.storage.putUnencrypted("unreadCount", 0); textsecure.storage.putUnencrypted("unreadCount", 0);
extension.navigator.setBadgeText(""); 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 () { initialize: function () {
this.$gutter = $('#gutter'); this.render();
this.$contacts = $('#contacts');
this.$fab = this.$el.find('.fab');
this.$back = this.$el.find('.new-conversation-title');
this.newConversationView = new Whisper.NewConversationView(); 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({ this.inbox = new Whisper.ConversationListView({
el : this.$contacts, el : this.$el.find('#contacts'),
collection : bg.inbox collection : bg.inbox
}).render(); }).render();
@ -75,34 +75,24 @@
}.bind(this)); }.bind(this));
}, },
events: { events: {
'keyup': 'keyup',
'click .back': 'hideCompose',
'click .fab': 'showCompose', 'click .fab': 'showCompose',
'select #contacts .contact': 'openConversation', 'select .contact': 'openConversation',
'open .new-conversation': 'openConversation'
}, },
openConversation: function(e, data) { openConversation: function(e, data) {
bg.openConversation(data.modelId); bg.openConversation(data.modelId);
this.hideCompose(); this.hideCompose();
}, },
showCompose: function() { showCompose: function() {
this.$fab.hide();
this.$contacts.hide();
this.newConversationView.reset(); this.newConversationView.reset();
this.$el.hide();
this.newConversationView.$el.insertAfter(this.$el);
this.newConversationView.$el.show(); this.newConversationView.$el.show();
this.newConversationView.$input.focus(); this.newConversationView.$input.focus();
this.$back.show(); this.listenToOnce(this.newConversationView, 'back', this.hideCompose);
}, },
hideCompose: function() { hideCompose: function() {
this.newConversationView.$el.hide(); this.newConversationView.$el.hide();
this.$contacts.show(); this.$el.show();
this.$fab.show();
this.$back.hide();
},
keyup: function(e) {
if (e.keyCode === 27) {
this.hideCompose();
}
} }
}); });

20
js/views/new_conversation_view.js
View file

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