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

Clean up shared compose/group update ui

Browse source 
Makes the groupupdate and recipient input fields stick to the top,
restyles the typeahead as a floating dropdown list of suggestions
rather than a full width component, fixes group avatar thumbnail
rendering.

// FREEBIE
This commit is contained in:
lilia 2015-09-04 13:11:21 -07:00
parent e402338af7
commit 24a18e91b3
9 changed files with 150 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
background.html
View file

@ -41,7 +41,7 @@
<ul class='menu-list'> <ul class='menu-list'>
{{#group}} {{#group}}
<li><a class='view-members'>Members</a></li> <li><a class='view-members'>Members</a></li>
<li><a class='new-group-update'>Update group</a></li> <li><a class='update-group'>Update group</a></li>
<li><a class='leave-group'>Leave group</a></li> <li><a class='leave-group'>Leave group</a></li>
{{/group}} {{/group}}
{{^group}} {{^group}}
@ -90,26 +90,15 @@
</div> </div>
</div> </div>
</script> </script>
<script type='text/x-tmpl-mustache' id='new-group-update-form'> <script type='text/x-tmpl-mustache' id='new-group-update'>
<div class='conversation-header'> <div class='conversation-header'>
<button class='back'></button> <button class='back'></button>
<button class='send check'></button> <button class='send check'></button>
<span class='conversation-title'>Update group</span> <span class='conversation-title'>Update group</span>
</div> </div>
{{> group_info_input }}
<div class='container'> <div class='container'>
<div class='scrollable'> <div class='scrollable'></div>
<div class='clearfix'>
<div class='group-avatar'>
<div class='thumbnail'>
{{> avatar }}
</div>
<input type='file' name='avatar' class='file-input'>
</div>
<div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
</div>
</div>
</div> </div>
</script> </script>
<script type='text/x-tmpl-mustache' id='avatar'> <script type='text/x-tmpl-mustache' id='avatar'>
@ -202,23 +191,24 @@
<span class='fab'></span> <span class='fab'></span>
</div> </div>
</script> </script>
<script type='text/x-tmpl-mustache' id='group_info_input'>
<div class='group-info-input'>
<div class='group-avatar'>
<div class='thumbnail'> {{> avatar }} </div>
<input type='file' name='avatar' class='file-input'>
</div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
</script>
<script type='text/x-tmpl-mustache' id='new-conversation'> <script type='text/x-tmpl-mustache' id='new-conversation'>
<div class='conversation-header'> <div class='conversation-header'>
<button class='back'></button> <button class='back'></button>
<button class='create check hide'></button> <button class='create check hide'></button>
<span class='conversation-title'>New Message</span> <span class='conversation-title'>New Message</span>
</div> </div>
{{> group_info_input }}
<div class='container'> <div class='container'>
<div class='scrollable'> <div class='scrollable'>
<div class='new-group-update-form clearfix'>
<div class='group-avatar'>
<div class='thumbnail'>
<span class='default group-default'></span>
</div>
<input type='file' name='avatar' class='file-input'>
</div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
</div> </div>
</div> </div>
</script> </script>

2
js/views/conversation_view.js
View file

@ -82,7 +82,7 @@
'click .destroy': 'destroyMessages', 'click .destroy': 'destroyMessages',
'click .end-session': 'endSession', 'click .end-session': 'endSession',
'click .leave-group': 'leaveGroup', 'click .leave-group': 'leaveGroup',
'click .new-group-update': 'newGroupUpdate', 'click .update-group': 'newGroupUpdate',
'click .verify-identity': 'verifyIdentity', 'click .verify-identity': 'verifyIdentity',
'click .view-members': 'viewMembers', 'click .view-members': 'viewMembers',
'click .drop-down': 'toggleMenu', 'click .drop-down': 'toggleMenu',

14
js/views/new_conversation_view.js
View file

@ -22,7 +22,7 @@
template: $('#new-conversation').html(), template: $('#new-conversation').html(),
initialize: function(options) { initialize: function(options) {
this.render(); this.render();
this.$group_update = this.$('.new-group-update-form'); this.$group_update = this.$('.group-info-input');
this.$create = this.$('.create'); this.$create = this.$('.create');
// Group avatar file input // Group avatar file input
@ -33,13 +33,19 @@
}); });
this.recipients_view = new Whisper.RecipientsInputView(); this.recipients_view = new Whisper.RecipientsInputView();
this.$('.scrollable').append(this.recipients_view.el); this.recipients_view.$el.insertAfter(this.$('.group-info-input'));
this.$input = this.$('input.search'); this.$input = this.$('input.search');
this.listenTo(this.getRecipients(), 'add', this.updateControls); this.listenTo(this.getRecipients(), 'add', this.updateControls);
this.listenTo(this.getRecipients(), 'remove', this.updateControls); this.listenTo(this.getRecipients(), 'remove', this.updateControls);
}, },
render_attributes: function() {
return {
avatar: { url: '/images/group_default.png', color: 'gray' }
};
},
events: { events: {
'click .create': 'create', 'click .create': 'create',
'click .back': 'goBack', 'click .back': 'goBack',
@ -96,7 +102,7 @@
}, },
createGroup: function() { createGroup: function() {
var name = this.$('.new-group-update-form .name').val(); var name = this.$('.group-info-input .name').val();
if (!name.trim().length) { if (!name.trim().length) {
return; return;
} }
@ -150,7 +156,7 @@
this.delegateEvents(); this.delegateEvents();
this.avatarInput.delegateEvents(); this.avatarInput.delegateEvents();
this.$create.hide(); this.$create.hide();
this.$('.new-group-update-form .name').val(''); this.$('.group-info-input .name').val('');
this.$group_update.hide(); this.$group_update.hide();
this.recipients_view.reset(); this.recipients_view.reset();
}, },

20
js/views/new_group_update_view.js
View file

@ -19,7 +19,7 @@
Whisper.NewGroupUpdateView = Whisper.View.extend({ Whisper.NewGroupUpdateView = Whisper.View.extend({
tagName: "div", tagName: "div",
className: "new-group-update-form", className: 'new-group-update',
templateName: 'new-group-update', templateName: 'new-group-update',
initialize: function(options) { initialize: function(options) {
this.render(); this.render();
@ -36,7 +36,7 @@
} }
}.bind(this)); }.bind(this));
}); });
this.$('.scrollable').append(this.recipients_view.el); this.recipients_view.$el.insertBefore(this.$('.container'));
this.$('.avatar').addClass('default'); this.$('.avatar').addClass('default');
@ -50,14 +50,14 @@
events: { events: {
'click .back': 'goBack', 'click .back': 'goBack',
'click .send': 'send', 'click .send': 'send',
'keyup input.search': 'toggleResults' 'focusin input.search': 'showResults',
'focusout input.search': 'hideResults',
}, },
toggleResults: function() { hideResults: function() {
if (this.recipients_view.$input.val().length >= 2) { this.$('.results').hide();
this.$('.results').show(); },
} else { showResults: function() {
this.$('.results').hide(); this.$('.results').show();
}
}, },
goBack: function() { goBack: function() {
this.trigger('back'); this.trigger('back');
@ -65,7 +65,7 @@
render_attributes: function() { render_attributes: function() {
return { return {
name: this.model.getTitle(), name: this.model.getTitle(),
avatar: {url: this.model.getAvatar()} avatar: this.model.getAvatar()
}; };
}, },
send: function() { send: function() {

13
js/views/recipients_input_view.js
View file

@ -58,6 +58,15 @@
itemView: Whisper.ContactPillView itemView: Whisper.ContactPillView
}); });
Whisper.SuggestionView = Whisper.ConversationListItemView.extend({
className: 'contact-details contact',
templateName: 'contact_name_and_number',
});
Whisper.SuggestionListView = Whisper.ConversationListView.extend({
itemView: Whisper.SuggestionView
});
Whisper.RecipientsInputView = Whisper.View.extend({ Whisper.RecipientsInputView = Whisper.View.extend({
className: 'recipients-input', className: 'recipients-input',
templateName: 'recipients-input', templateName: 'recipients-input',
@ -85,7 +94,7 @@
this.typeahead.fetchContacts(); this.typeahead.fetchContacts();
// View to display the matched contacts from typeahead // View to display the matched contacts from typeahead
this.typeahead_view = new Whisper.ConversationListView({ this.typeahead_view = new Whisper.SuggestionListView({
collection : new Whisper.ConversationCollection([], { collection : new Whisper.ConversationCollection([], {
comparator: function(m) { return m.getTitle().toLowerCase(); } comparator: function(m) { return m.getTitle().toLowerCase(); }
}) })
@ -176,7 +185,7 @@
resetTypeahead: function() { resetTypeahead: function() {
this.new_contact_view.$el.hide(); this.new_contact_view.$el.hide();
this.$input.val('').focus(); this.$input.val('').focus();
this.typeahead_view.collection.reset(this.typeahead.models); this.typeahead_view.collection.reset([]);
}, },

17
stylesheets/_conversation.scss
View file

@ -1,3 +1,6 @@
.conversation {
background-color: #ffffff;
}
.conversation-title { .conversation-title {
display: block; display: block;
line-height: $header-height; line-height: $header-height;
@ -17,7 +20,8 @@
} }
} }
.conversation + .new-group-update-form, .group-member-list,
.new-group-update,
.conversation, .message-list, .message-detail, .key-verification { .conversation, .message-list, .message-detail, .key-verification {
height: 100%; height: 100%;
} }
@ -83,16 +87,14 @@
font-size: smaller; font-size: smaller;
} }
.group-member-list, .group-member-list {
.conversation + .new-group-update-form {
height: 100%;
.container { .container {
height: calc(100% - #{$header-height}); height: calc(100% - #{$header-height});
} }
} }
.new-group-update-form .scrollable {
padding: 0.5em; .new-group-update {
.container { height: calc(100% - #{$header-height} - 85px); }
} }
.private .sender, .private .sender,
@ -117,7 +119,6 @@
margin: 0; margin: 0;
padding: 1em 0; padding: 1em 0;
overflow-y: auto; overflow-y: auto;
background-color: #ffffff;
.timestamp { .timestamp {
cursor: pointer; cursor: pointer;

55
stylesheets/_global.scss
View file

@ -193,11 +193,12 @@ $avatar-size: 44px;
color: white; color: white;
} }
.new-group-update-form { .group-info-input {
background: white; background: white;
.group-avatar { .group-avatar {
float: left; display: inline-block;
padding: 2px 0px 0px 2px;
} }
.group-default { .group-default {
@ -232,26 +233,22 @@ $avatar-size: 44px;
padding: 0.5em; padding: 0.5em;
border: solid 1px #ccc; border: solid 1px #ccc;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
width: calc(100% - 64px); width: calc(100% - 84px);
}
.results {
width: calc(100% - 20px);
margin: 0 0 0 20px;
.contact {
z-index: 10;
}
} }
} }
.group-member-list, .group-member-list,
.new-group-update-form { .new-group-update {
.members .contact { .members .contact {
box-shadow: none; box-shadow: none;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
.last-message, .last-timestamp { .last-message, .last-timestamp {
display: none; display: none;
} }
.number {
display: none;
}
} }
} }
@ -264,6 +261,10 @@ $avatar-size: 44px;
&:hover { &:hover {
background: #f8f8f8; background: #f8f8f8;
} }
.number {
display: none;
}
} }
.contact { .contact {
position: relative; position: relative;
@ -304,9 +305,14 @@ $avatar-size: 44px;
overflow-x: hidden; overflow-x: hidden;
} }
.number {
color: $grey;
font-size: small;
}
} }
.recipients-input { .recipients-input {
position: relative;
.recipients-container { .recipients-container {
background-color: white; background-color: white;
@ -333,21 +339,20 @@ $avatar-size: 44px;
} }
} }
.contact { .results {
.number { position: absolute;
display: inline-block; z-index: 10;
} margin: 0 0 0 20px;
width: calc(100% - 30px);
max-width: 300px;
max-height: 55px * 3;
overflow-y: auto;
box-shadow: 0px 0px 1px rgba(#aaa, 0.8);
.last-message, .last-timestamp { .contact {
display: none; cursor: pointer;
}
.number {
color: $grey;
font-size: small;
} }
} }
} }
.attachment-preview { .attachment-preview {
@ -363,7 +368,7 @@ $avatar-size: 44px;
.new-conversation .recipients-input .recipients::before { .new-conversation .recipients-input .recipients::before {
content: 'To: '; content: 'To: ';
} }
.new-group-update-form .recipients-input .recipients::before { .new-group-update .recipients-input .recipients::before {
content: 'Add: '; content: 'Add: ';
} }

10
stylesheets/_index.scss
View file

@ -82,12 +82,6 @@
} }
} }
.contact {
.number, .checkbox {
display: none;
}
}
input.search { input.search {
border: none; border: none;
padding: 0; padding: 0;
@ -122,11 +116,9 @@ input.search {
font-size: smaller; font-size: smaller;
} }
.new-contact, .contacts {
background: $grey_l;
}
.new-contact { .new-contact {
display: none; display: none;
background: $grey_l;
.name { display: none; } .name { display: none; }
.contact-details::before { .contact-details::before {
content: 'Create new contact'; content: 'Create new contact';

124
stylesheets/manifest.css
View file

@ -168,23 +168,24 @@ img.emoji {
text-overflow: ellipsis; text-overflow: ellipsis;
color: white; } color: white; }
.new-group-update-form { .group-info-input {
background: white; } background: white; }
.new-group-update-form .group-avatar { .group-info-input .group-avatar {
float: left; } display: inline-block;
.new-group-update-form .group-default { padding: 2px 0px 0px 2px; }
.group-info-input .group-default {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background: #f3f3f3 url("/images/group_default.png") no-repeat center; } background: #f3f3f3 url("/images/group_default.png") no-repeat center; }
.new-group-update-form .file-input .thumbnail, .new-group-update-form .thumbnail .avatar, .group-info-input .file-input .thumbnail, .group-info-input .thumbnail .avatar,
.new-group-update-form img { .group-info-input img {
height: 54px; height: 54px;
width: 54px; width: 54px;
border-radius: 27px; } border-radius: 27px; }
.new-group-update-form .thumbnail:after { .group-info-input .thumbnail:after {
content: ''; content: '';
position: absolute; position: absolute;
height: 0; height: 0;
@ -193,24 +194,22 @@ img.emoji {
right: 0; right: 0;
border-bottom: 10px solid #616161; border-bottom: 10px solid #616161;
border-left: 10px solid transparent; } border-left: 10px solid transparent; }
.new-group-update-form input.name { .group-info-input input.name {
padding: 0.5em; padding: 0.5em;
border: solid 1px #ccc; border: solid 1px #ccc;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
width: calc(100% - 64px); } width: calc(100% - 84px); }
.new-group-update-form .results {
width: calc(100% - 20px);
margin: 0 0 0 20px; }
.new-group-update-form .results .contact {
z-index: 10; }
.group-member-list .members .contact, .group-member-list .members .contact,
.new-group-update-form .members .contact { .new-group-update .members .contact {
box-shadow: none; box-shadow: none;
border-bottom: 1px solid #eee; } border-bottom: 1px solid #eee; }
.group-member-list .members .contact .last-message, .group-member-list .members .contact .last-timestamp, .group-member-list .members .contact .last-message, .group-member-list .members .contact .last-timestamp,
.new-group-update-form .members .contact .last-message, .new-group-update .members .contact .last-message,
.new-group-update-form .members .contact .last-timestamp { .new-group-update .members .contact .last-timestamp {
display: none; }
.group-member-list .members .contact .number,
.new-group-update .members .contact .number {
display: none; } display: none; }
.conversation-header .check { .conversation-header .check {
@ -221,6 +220,8 @@ img.emoji {
cursor: pointer; } cursor: pointer; }
.conversation-list-item:hover { .conversation-list-item:hover {
background: #f8f8f8; } background: #f8f8f8; }
.conversation-list-item .number {
display: none; }
.contact { .contact {
position: relative; position: relative;
@ -248,31 +249,40 @@ img.emoji {
font-weight: 400; font-weight: 400;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; } overflow-x: hidden; }
.contact .number {
color: #616161;
font-size: small; }
.recipients-input .recipients-container { .recipients-input {
background-color: white; position: relative; }
padding: 2px; .recipients-input .recipients-container {
border-bottom: 1px solid #f2f2f2; background-color: white;
line-height: 24px; } padding: 2px;
.recipients-input .recipient { border-bottom: 1px solid #f2f2f2;
display: inline-block; line-height: 24px; }
margin: 0 2px 2px 0; .recipients-input .recipient {
padding: 0 5px; display: inline-block;
border-radius: 10px; margin: 0 2px 2px 0;
background-color: #2090ea; padding: 0 5px;
color: white; } border-radius: 10px;
.recipients-input .recipient.error { background-color: #2090ea;
background-color: #f00; } color: white; }
.recipients-input .recipient .remove { .recipients-input .recipient.error {
margin-left: 5px; background-color: #f00; }
padding: 0 2px; } .recipients-input .recipient .remove {
.recipients-input .contact .number { margin-left: 5px;
display: inline-block; } padding: 0 2px; }
.recipients-input .contact .last-message, .recipients-input .contact .last-timestamp { .recipients-input .results {
display: none; } position: absolute;
.recipients-input .contact .number { z-index: 10;
color: #616161; margin: 0 0 0 20px;
font-size: small; } width: calc(100% - 30px);
max-width: 300px;
max-height: 165px;
overflow-y: auto;
box-shadow: 0px 0px 1px rgba(170, 170, 170, 0.8); }
.recipients-input .results .contact {
cursor: pointer; }
.attachment-preview { .attachment-preview {
width: 100%; width: 100%;
@ -284,7 +294,7 @@ img.emoji {
.new-conversation .recipients-input .recipients::before { .new-conversation .recipients-input .recipients::before {
content: 'To: '; } content: 'To: '; }
.new-group-update-form .recipients-input .recipients::before { .new-group-update .recipients-input .recipients::before {
content: 'Add: '; } content: 'Add: '; }
.avatar.colorgray { .avatar.colorgray {
@ -409,9 +419,6 @@ img.emoji {
.menu.conversation-menu button.drop-down { .menu.conversation-menu button.drop-down {
background: url("/images/arrow_drop_down.png") no-repeat center; } background: url("/images/arrow_drop_down.png") no-repeat center; }
.contact .number, .contact .checkbox {
display: none; }
input.search { input.search {
border: none; border: none;
padding: 0; padding: 0;
@ -441,11 +448,9 @@ input.search {
.last-timestamp { .last-timestamp {
font-size: smaller; } font-size: smaller; }
.new-contact, .contacts {
background: #f3f3f3; }
.new-contact { .new-contact {
display: none; } display: none;
background: #f3f3f3; }
.new-contact .name { .new-contact .name {
display: none; } display: none; }
.new-contact .contact-details::before { .new-contact .contact-details::before {
@ -484,6 +489,9 @@ input.search {
.conversations .unread .contact-details .last-timestamp { .conversations .unread .contact-details .last-timestamp {
font-weight: bold; } font-weight: bold; }
.conversation {
background-color: #ffffff; }
.conversation-title { .conversation-title {
display: block; display: block;
line-height: 36px; line-height: 36px;
@ -497,7 +505,8 @@ input.search {
.conversation .discussion-container { .conversation .discussion-container {
height: calc(100% - 2 * 36px); } height: calc(100% - 2 * 36px); }
.conversation + .new-group-update-form, .group-member-list,
.new-group-update,
.conversation, .message-list, .message-detail, .key-verification { .conversation, .message-list, .message-detail, .key-verification {
height: 100%; } height: 100%; }
@ -542,15 +551,11 @@ input.search {
.group-update { .group-update {
font-size: smaller; } font-size: smaller; }
.group-member-list, .group-member-list .container {
.conversation + .new-group-update-form { height: calc(100% - 36px); }
height: 100%; }
.group-member-list .container,
.conversation + .new-group-update-form .container {
height: calc(100% - 36px); }
.new-group-update-form .scrollable { .new-group-update .container {
padding: 0.5em; } height: calc(100% - 36px - 85px); }
.private .sender, .private .sender,
.outgoing .sender { .outgoing .sender {
@ -569,8 +574,7 @@ input.search {
.message-list { .message-list {
margin: 0; margin: 0;
padding: 1em 0; padding: 1em 0;
overflow-y: auto; overflow-y: auto; }
background-color: #ffffff; }
.message-list .timestamp { .message-list .timestamp {
cursor: pointer; } cursor: pointer; }
.message-list .timestamp:hover { .message-list .timestamp:hover {