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

DRY up scrollable pattern

Browse source 
Switch to using gutter class instead of id since there is potentially
more than one usage on the page.
This commit is contained in:
lilia 2015-03-09 14:50:50 -07:00
parent a72ea7966d
commit c73f4d71a7
4 changed files with 29 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

40
index.html
View file

@ -17,8 +17,8 @@
<div class='title-bar' id='header'> <div class='title-bar' id='header'>
<div class='socket-status'></div> <div class='socket-status'></div>
</div> </div>
<div id='gutter' class='gutter'> <div class='gutter'>
<div id='contacts'></div> <div class='conversations scrollable'></div>
<span class='fab'></span> <span class='fab'></span>
</div> </div>
</script> </script>
@ -52,24 +52,26 @@
<button class='back'></button> <button class='back'></button>
<span class='title-text'>New Message</span> <span class='title-text'>New Message</span>
</div> </div>
<div id='gutter' class='gutter'> <div class='gutter'>
<div class='new-group-update-form clearfix'> <div class='scrollable'>
<div class='group-avatar'> <div class='new-group-update-form clearfix'>
<div class='paperclip'></div> <div class='group-avatar'>
<input type='file' name='avatar' class='file-input'> <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>
</div> </div>
</script> </script>

3
js/views/inbox_view.js
View file

@ -55,6 +55,7 @@
Whisper.InboxView = Whisper.View.extend({ Whisper.InboxView = Whisper.View.extend({
template: $('#inbox').html(), template: $('#inbox').html(),
className: 'inbox',
initialize: function () { initialize: function () {
this.render(); this.render();
@ -64,7 +65,7 @@
this.openConversation.bind(this, null)); this.openConversation.bind(this, null));
this.inbox = new Whisper.ConversationListView({ this.inbox = new Whisper.ConversationListView({
el : this.$el.find('#contacts'), el : this.$el.find('.conversations'),
collection : bg.inbox collection : bg.inbox
}).render(); }).render();

5
stylesheets/_index.scss
View file

@ -2,10 +2,11 @@
padding: $header-height 0 0; padding: $header-height 0 0;
} }
.gutter, #contacts { .new-conversation, .inbox, .gutter {
height: 100%; height: 100%;
} }
#contacts { .scrollable {
height: 100%;
overflow: auto; overflow: auto;
} }

5
stylesheets/manifest.css
View file

@ -137,10 +137,11 @@ button.back {
.gutter { .gutter {
padding: 36px 0 0; } padding: 36px 0 0; }
.gutter, #contacts { .new-conversation, .inbox, .gutter {
height: 100%; } height: 100%; }
#contacts { .scrollable {
height: 100%;
overflow: auto; } overflow: auto; }
.socket-status { .socket-status {