mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Clean up shared compose/group update ui
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
parent
e402338af7
commit
24a18e91b3
9 changed files with 150 additions and 143 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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([]);
|
||||
},
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
.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);
|
||||
|
||||
.last-message, .last-timestamp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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: ';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue