From 24a18e91b34fd7c44a30008e209ac385eb978f2b Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Fri, 4 Sep 2015 13:11:21 -0700
Subject: [PATCH] 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
---
 background.html                   |  38 ++++-----
 js/views/conversation_view.js     |   2 +-
 js/views/new_conversation_view.js |  14 +++-
 js/views/new_group_update_view.js |  20 ++---
 js/views/recipients_input_view.js |  13 +++-
 stylesheets/_conversation.scss    |  17 ++--
 stylesheets/_global.scss          |  55 +++++++------
 stylesheets/_index.scss           |  10 +--
 stylesheets/manifest.css          | 124 +++++++++++++++---------------
 9 files changed, 150 insertions(+), 143 deletions(-)

diff --git a/background.html b/background.html
index 40491bb7b..62d72fedc 100644
--- a/background.html
+++ b/background.html
@@ -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>
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index bdf03c800..52e2161e3 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -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',
diff --git a/js/views/new_conversation_view.js b/js/views/new_conversation_view.js
index e20570004..e606f2829 100644
--- a/js/views/new_conversation_view.js
+++ b/js/views/new_conversation_view.js
@@ -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();
         },
diff --git a/js/views/new_group_update_view.js b/js/views/new_group_update_view.js
index d28078196..38accec67 100644
--- a/js/views/new_group_update_view.js
+++ b/js/views/new_group_update_view.js
@@ -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() {
diff --git a/js/views/recipients_input_view.js b/js/views/recipients_input_view.js
index 417371fd2..60953350d 100644
--- a/js/views/recipients_input_view.js
+++ b/js/views/recipients_input_view.js
@@ -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([]);
         },
 
 
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index f70c51144..caa3ad284 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -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;
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index dff423003..ec017e9b2 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -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: ';
 }
 
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index fdc1e991c..c42c49ec5 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -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';
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 013f3297d..d00726f37 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -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 {