diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index c5412ad6f..94ad07d1a 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -97,6 +97,10 @@
view.$el.insertAfter(this.$el);
this.$el.hide();
view.render();
+ this.listenBack(view);
+ },
+
+ listenBack: function(view) {
this.listenTo(view, 'back', function() {
view.remove();
this.$el.show();
@@ -124,14 +128,12 @@
},
newGroupUpdate: function() {
- if (!this.newGroupUpdateView) {
- this.newGroupUpdateView = new Whisper.NewGroupUpdateView({
- model: this.model
- });
- } else {
- this.newGroupUpdateView.delegateEvents();
- }
- this.newGroupUpdateView.render().$el.insertBefore(this.view.el);
+ this.newGroupUpdateView = new Whisper.NewGroupUpdateView({
+ model: this.model
+ });
+ this.newGroupUpdateView.$el.insertAfter(this.el);
+ this.$el.hide();
+ this.listenBack(this.newGroupUpdateView);
},
destroyMessages: function(e) {
diff --git a/js/views/file_input_view.js b/js/views/file_input_view.js
index a7e1b9167..7dd721753 100644
--- a/js/views/file_input_view.js
+++ b/js/views/file_input_view.js
@@ -28,12 +28,13 @@
this.$input = this.$el.find('input[type=file]');
this.thumb = new Whisper.AttachmentPreviewView();
this.$el.addClass('file-input');
+ this.$default = this.$el.find('.default');
},
events: {
'change': 'previewImages',
'click .close': 'deleteFiles',
- 'click .paperclip': 'open'
+ 'click .thumbnail': 'open'
},
open: function() {
@@ -41,8 +42,9 @@
},
addThumb: function(src) {
+ this.$default.hide();
this.thumb.src = src;
- this.$el.find('.paperclip').append(this.thumb.render().el);
+ this.$el.find('.thumbnail').append(this.thumb.render().el);
},
autoScale: function(file) {
@@ -163,6 +165,7 @@
this.oUrl = null;
}
this.thumb.remove();
+ this.$default.show();
},
deleteFiles: function(e) {
diff --git a/js/views/new_group_update_view.js b/js/views/new_group_update_view.js
index 6481b101d..e75b39e9d 100644
--- a/js/views/new_group_update_view.js
+++ b/js/views/new_group_update_view.js
@@ -28,21 +28,33 @@
});
if (this.model.attributes.avatar) {
- new Whisper.AttachmentView({
+ this.current_avatar = new Whisper.AttachmentView({
model: this.model.attributes.avatar
- }).render().$el.addClass('preview').prependTo(this.avatarInput.el);
+ });
+ this.avatarInput.$default.append(
+ this.current_avatar.render().$el
+ );
}
+ this.recipients_view = new Whisper.RecipientsInputView();
+ this.$el.find('.scrollable').append(this.recipients_view.el);
},
events: {
+ 'click .back': 'goBack',
'click .send': 'send'
},
+ goBack: function() {
+ this.trigger('back');
+ },
+ render_attributes: function() {
+ return { name: this.model.getTitle() };
+ },
send: function() {
return this.avatarInput.getFiles().then(function(avatarFiles) {
this.model.save({
name: this.$el.find('.name').val(),
avatar: avatarFiles[0],
- members: _.union(this.model.get('members'), this.$el.find('.members').val().split(','))
+ members: _.union(this.model.get('members'), this.recipients_view.recipients.pluck('id'))
});
textsecure.messaging.updateGroup(
this.model.id,
@@ -50,7 +62,7 @@
this.model.get('avatar'),
this.model.get('members')
);
- this.remove();
+ this.goBack();
}.bind(this));
}
});
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 2cc2f0a14..90a06c801 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -1,7 +1,12 @@
.conversation {
padding: $header-height 0;
+
+ .file-input .close {
+ top: -10px;
+ }
}
+.conversation + .new-group-update-form,
.conversation, .discussion-container, .message-list, .message-detail, .key-verification {
height: 100%;
}
@@ -48,6 +53,16 @@
font-size: smaller;
}
+.new-group-update-form {
+ .container {
+ height: 100%;
+ padding-top: $header-height;
+ }
+ .scrollable {
+ padding: 0.5em;
+ }
+}
+
.private .sender,
.outgoing .sender {
display: none;
@@ -278,12 +293,3 @@
font-size: small;
}
-.attachment-preview {
- background: white;
- width: 100%;
- height: 100%;
-
- img {
- width: 100%;
- }
-}
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 63762949a..ac8d72532 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -108,12 +108,16 @@ button.back {
.file-input {
position: relative;
- width: 36px;
margin-right: 10px;
+ cursor: pointer;
+ .thumbnail {
+ width: 36px;
+ height: 36px;
+ }
.paperclip {
- width: 100%;
- height: 100%;
+ width: 36px;
+ height: 36px;
background: url('/images/paperclip.png') no-repeat;
background-size: 90%;
background-position: center 6px;
@@ -131,17 +135,12 @@ button.back {
z-index: 1;
}
- img.preview {
- max-width: 100%;
- }
-
.close {
font-family: sans-serif;
color: white;
position: absolute;
- top: -10px;
- left: 20px;
- text-align: center;
+ top: 0;
+ right: -8px;
cursor: default;
border-radius: 50%;
width: 20px;
@@ -162,18 +161,157 @@ img.emoji {
}
.new-group-update-form {
+ background: white;
+
.group-avatar {
float: left;
- height: 36px;
}
+
+ .group-default {
+ position: relative;
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: $grey_l url('/images/group_default.png') no-repeat center;
+
+ }
+
+ .file-input .thumbnail,
+ img {
+ height: 54px;
+ width: 54px;
+ border-radius: (54px / 2);
+ }
+
+ .thumbnail:after {
+ content: '';
+ position: absolute;
+ height: 0;
+ width: 0;
+ bottom: 0;
+ right: 0;
+ border-bottom: 10px solid $grey;
+ border-left: 10px solid transparent;
+ }
+
+ input.name {
+ padding: 0.5em;
+ border: solid 1px #ccc;
+ border-width: 0 0 1px 0;
+ width: calc(100% - 64px);
+ }
+
}
.title-bar .check {
float: right;
background: $blue url('/images/check.png') no-repeat center center;
- margin: none;
+}
+
+.contact {
+ position: relative;
+ padding: 12px;
+ background: white;
+ cursor: pointer;
+ transition: background 0.2s;
+ white-space: nowrap;
+ overflow: hidden;
+
+ &::after {
+ content: '';
+ position: absolute;
+ right: 16px;
+ bottom: 0;
+ height: 1px;
+ width: calc(100% - 12px - 54px - 2 * 8px - 16px);
+ background: #eee;
+ }
&:hover {
- background-color: $blue_l;
+ background: #f8f8f8;
+ }
+
+ &:last-child {
+ box-shadow: 0 1px 3px rgba(#aaa, 0.8);
+
+ &::after {
+ display: none;
+ }
+ }
+
+ .avatar img {
+ height: 44px;
+ width: 44px;
+ background: $grey_l;
+ border-radius: (44px / 2);
+ }
+
+ .contact-details {
+ vertical-align: top;
+ display: inline-block;
+ margin: 4px 0 0 8px;
}
+
+ .contact-name {
+ margin: 0;
+ font-size: 1em;
+ font-weight: 400;
+ }
+
+}
+
+.recipients-input {
+
+ .recipients-container {
+ background-color: white;
+ padding: 2px;
+ border-bottom: 1px solid #f2f2f2;
+ line-height: 24px;
+ }
+
+ .recipient {
+ display: inline-block;
+ margin: 0 2px 2px 0;
+ padding: 0 5px;
+ border-radius: 10px;
+ background-color: $blue;
+ color: white;
+
+ &.error {
+ background-color: #f00;
+ }
+
+ .remove {
+ margin-left: 5px;
+ padding: 0 2px;
+ }
+ }
+
+ .contact {
+ .number {
+ display: inline-block;
+ }
+
+ .last-message, .last-timestamp {
+ display: none;
+ }
+
+ .number {
+ color: $grey;
+ font-size: small;
+ }
+ }
+
+}
+
+.attachment-preview {
+ width: 100%;
+ height: 100%;
+ background: white;
+
+ img {
+ width: 100%;
+ }
+
}
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 066d69c0d..c0ba5f8dc 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -52,37 +52,6 @@ input.search {
outline: 0;
}
-.new-conversation {
- .new-group-update-form {
- display: none;
- }
-
- .recipients-container {
- background-color: white;
- padding: 2px;
- border-bottom: 1px solid #f2f2f2;
- line-height: 24px;
- }
-
- .recipient {
- display: inline-block;
- margin: 0 2px 2px 0;
- padding: 0 5px;
- border-radius: 10px;
- background-color: $blue;
- color: white;
-
- &.error {
- background-color: #f00;
- }
-
- .remove {
- margin-left: 5px;
- padding: 0 2px;
- }
- }
-}
-
.fab {
z-index: 1;
position: fixed;
@@ -111,23 +80,10 @@ input.search {
}
.new-conversation {
- .last-message, .last-timestamp {
- display: none;
- }
-
- .contact {
- .checkbox, .number {
- display: inline-block;
- }
-
- .number {
- color: $grey;
- font-size: small;
- }
- }
}
.new-contact {
+ display: none;
.contact-name { display: none; }
.contact-details::before {
content: 'Create new contact';
@@ -142,48 +98,9 @@ input.search {
color: $grey_d;
background: #eee;
- .contact {
- position: relative;
- padding: 12px;
- background: white;
- cursor: pointer;
- transition: background 0.2s;
- white-space: nowrap;
- overflow: hidden;
-
- &::after {
- content: '';
- position: absolute;
- right: 16px;
- bottom: 0;
- height: 1px;
- width: calc(100% - 12px - 54px - 2 * 8px - 16px);
- background: #eee;
- }
-
- &:hover {
- background: #f8f8f8;
- }
-
- &:last-child {
- box-shadow: 0 1px 3px rgba(#aaa, 0.8);
-
- &::after {
- display: none;
- }
- }
- }
-
- .contact-details {
- vertical-align: top;
- display: inline-block;
- margin: 4px 0 0 8px;
- }
-
- .contact-name {
- margin: 0;
- font-size: 1em;
- font-weight: 400;
+ .new-group-update-form {
+ display: none;
+ padding: 0.5em;
}
.last-message {
@@ -199,13 +116,6 @@ input.search {
color: #888;
}
- .avatar img {
- height: 44px;
- width: 44px;
- background: $grey_l;
- border-radius: (44px / 2);
- }
-
}
.settings {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 7f0cde1f7..d72fe5f8e 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -101,11 +101,14 @@ button.back {
.file-input {
position: relative;
- width: 36px;
- margin-right: 10px; }
+ margin-right: 10px;
+ cursor: pointer; }
+ .file-input .thumbnail {
+ width: 36px;
+ height: 36px; }
.file-input .paperclip {
- width: 100%;
- height: 100%;
+ width: 36px;
+ height: 36px;
background: url("/images/paperclip.png") no-repeat;
background-size: 90%;
background-position: center 6px; }
@@ -119,15 +122,12 @@ button.back {
left: 0;
cursor: pointer;
z-index: 1; }
- .file-input img.preview {
- max-width: 100%; }
.file-input .close {
font-family: sans-serif;
color: white;
position: absolute;
- top: -10px;
- left: 20px;
- text-align: center;
+ top: 0;
+ right: -8px;
cursor: default;
border-radius: 50%;
width: 20px;
@@ -143,16 +143,108 @@ img.emoji {
margin: 0 .05em 0 .1em;
vertical-align: -0.1em; }
-.new-group-update-form .group-avatar {
- float: left;
- height: 36px; }
+.new-group-update-form {
+ background: white; }
+ .new-group-update-form .group-avatar {
+ float: left; }
+ .new-group-update-form .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 img {
+ height: 54px;
+ width: 54px;
+ border-radius: 27px; }
+ .new-group-update-form .thumbnail:after {
+ content: '';
+ position: absolute;
+ height: 0;
+ width: 0;
+ bottom: 0;
+ right: 0;
+ border-bottom: 10px solid #616161;
+ border-left: 10px solid transparent; }
+ .new-group-update-form input.name {
+ padding: 0.5em;
+ border: solid 1px #ccc;
+ border-width: 0 0 1px 0;
+ width: calc(100% - 64px); }
.title-bar .check {
float: right;
- background: #2a92e7 url("/images/check.png") no-repeat center center;
- margin: none; }
- .title-bar .check:hover {
- background-color: #a2d2f4; }
+ background: #2a92e7 url("/images/check.png") no-repeat center center; }
+
+.contact {
+ position: relative;
+ padding: 12px;
+ background: white;
+ cursor: pointer;
+ transition: background 0.2s;
+ white-space: nowrap;
+ overflow: hidden; }
+ .contact::after {
+ content: '';
+ position: absolute;
+ right: 16px;
+ bottom: 0;
+ height: 1px;
+ width: calc(100% - 12px - 54px - 2 * 8px - 16px);
+ background: #eee; }
+ .contact:hover {
+ background: #f8f8f8; }
+ .contact:last-child {
+ box-shadow: 0 1px 3px rgba(170, 170, 170, 0.8); }
+ .contact:last-child::after {
+ display: none; }
+ .contact .avatar img {
+ height: 44px;
+ width: 44px;
+ background: #f3f3f3;
+ border-radius: 22px; }
+ .contact .contact-details {
+ vertical-align: top;
+ display: inline-block;
+ margin: 4px 0 0 8px; }
+ .contact .contact-name {
+ margin: 0;
+ font-size: 1em;
+ font-weight: 400; }
+
+.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: #2a92e7;
+ 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; }
+
+.attachment-preview {
+ width: 100%;
+ height: 100%;
+ background: white; }
+ .attachment-preview img {
+ width: 100%; }
.gutter {
padding: 36px 0 0; }
@@ -190,26 +282,6 @@ input.search {
margin: 0;
outline: 0; }
-.new-conversation .new-group-update-form {
- display: none; }
-.new-conversation .recipients-container {
- background-color: white;
- padding: 2px;
- border-bottom: 1px solid #f2f2f2;
- line-height: 24px; }
-.new-conversation .recipient {
- display: inline-block;
- margin: 0 2px 2px 0;
- padding: 0 5px;
- border-radius: 10px;
- background-color: #2a92e7;
- color: white; }
- .new-conversation .recipient.error {
- background-color: #f00; }
- .new-conversation .recipient .remove {
- margin-left: 5px;
- padding: 0 2px; }
-
.fab {
z-index: 1;
position: fixed;
@@ -233,56 +305,23 @@ input.search {
.last-timestamp {
font-size: smaller; }
-.new-conversation .last-message, .new-conversation .last-timestamp {
+.new-contact {
display: none; }
-.new-conversation .contact .checkbox, .new-conversation .contact .number {
- display: inline-block; }
-.new-conversation .contact .number {
- color: #616161;
- font-size: small; }
-
-.new-contact .contact-name {
- display: none; }
-.new-contact .contact-details::before {
- content: 'Create new contact';
- display: block;
- font-style: italic;
- opacity: 0.7;
- padding-right: 8px; }
+ .new-contact .contact-name {
+ display: none; }
+ .new-contact .contact-details::before {
+ content: 'Create new contact';
+ display: block;
+ font-style: italic;
+ opacity: 0.7;
+ padding-right: 8px; }
.index {
color: #454545;
background: #eee; }
- .index .contact {
- position: relative;
- padding: 12px;
- background: white;
- cursor: pointer;
- transition: background 0.2s;
- white-space: nowrap;
- overflow: hidden; }
- .index .contact::after {
- content: '';
- position: absolute;
- right: 16px;
- bottom: 0;
- height: 1px;
- width: calc(100% - 12px - 54px - 2 * 8px - 16px);
- background: #eee; }
- .index .contact:hover {
- background: #f8f8f8; }
- .index .contact:last-child {
- box-shadow: 0 1px 3px rgba(170, 170, 170, 0.8); }
- .index .contact:last-child::after {
- display: none; }
- .index .contact-details {
- vertical-align: top;
- display: inline-block;
- margin: 4px 0 0 8px; }
- .index .contact-name {
- margin: 0;
- font-size: 1em;
- font-weight: 400; }
+ .index .new-group-update-form {
+ display: none;
+ padding: 0.5em; }
.index .last-message {
margin: 6px 0;
font-size: small;
@@ -292,11 +331,6 @@ input.search {
top: 14px;
right: 12px;
color: #888; }
- .index .avatar img {
- height: 44px;
- width: 44px;
- background: #f3f3f3;
- border-radius: 22px; }
.settings {
height: 100%;
@@ -313,7 +347,10 @@ input.search {
.conversation {
padding: 36px 0; }
+ .conversation .file-input .close {
+ top: -10px; }
+.conversation + .new-group-update-form,
.conversation, .discussion-container, .message-list, .message-detail, .key-verification {
height: 100%; }
@@ -346,6 +383,12 @@ input.search {
.group-update {
font-size: smaller; }
+.new-group-update-form .container {
+ height: 100%;
+ padding-top: 36px; }
+.new-group-update-form .scrollable {
+ padding: 0.5em; }
+
.private .sender,
.outgoing .sender {
display: none; }
@@ -525,10 +568,3 @@ input.search {
box-shadow: 0 0 5px 0 black;
border-radius: 20px;
font-size: small; }
-
-.attachment-preview {
- background: white;
- width: 100%;
- height: 100%; }
- .attachment-preview img {
- width: 100%; }