keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects 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
pull/749/head
lilia 10 years ago
parent e402338af7
commit 24a18e91b3
9 changed files with 150 additions and 143 deletions
Show Stats Download Patch File Download Diff File

38
background.html
Unescape Escape View File

@ -41,7 +41,7 @@
<ul class='menu-list'>
{{#group}}
<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>
{{/group}}
{{^group}}
@ -90,26 +90,15 @@
</div>
</div>
</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'>
<button class='back'></button>
<button class='send check'></button>
<span class='conversation-title'>Update group</span>
</div>
{{> group_info_input }}
<div class='container'>
<div class='scrollable'>
<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 class='scrollable'></div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='avatar'>
@ -202,23 +191,24 @@
<span class='fab'></span>
</div>
</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'>
<div class='conversation-header'>
<button class='back'></button>
<button class='create check hide'></button>
<span class='conversation-title'>New Message</span>
</div>
{{> group_info_input }}
<div class='container'>
<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>
</script>

2
js/views/conversation_view.js
Unescape Escape View File

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

14
js/views/new_conversation_view.js
Unescape Escape View File

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

20
js/views/new_group_update_view.js
Unescape Escape View File

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

13
js/views/recipients_input_view.js
Unescape Escape View File

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

17
stylesheets/_conversation.scss
Unescape Escape View File

@ -1,3 +1,6 @@
.conversation {
background-color: #ffffff;
}
.conversation-title {
display: block;
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 {
height: 100%;
}
@ -83,16 +87,14 @@
font-size: smaller;
}
.group-member-list,
.conversation + .new-group-update-form {
height: 100%;
.group-member-list {
.container {
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,
@ -117,7 +119,6 @@
margin: 0;
padding: 1em 0;
overflow-y: auto;
background-color: #ffffff;
.timestamp {
cursor: pointer;

55
stylesheets/_global.scss
Unescape Escape View File

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

10
stylesheets/_index.scss
Unescape Escape View File

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

124
stylesheets/manifest.css
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save