Add hint for users with no groups or contacts

If you have no contacts or groups, display a hint about phone numbers.

// FREEBIE

background.html

@@ -26,7 +26,7 @@
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='hint'>
-      <p> Select a contact or group to start chatting. </p>
+    <p> {{ content }}</p>
   </script>
   <script type='text/x-tmpl-mustache' id='conversation'>
     <div class='panel'>

js/views/conversation_search_view.js

@@ -35,6 +35,7 @@
                 if (this.maybeNumber(query)) {
                     this.new_contact_view.model.set('id', query);
                     this.new_contact_view.render().$el.show();
+                    this.hideHints();
                 } else {
                     this.new_contact_view.$el.hide();
                 }
@@ -82,11 +83,16 @@
         },
 
         resetTypeahead: function() {
+            this.hideHints();
             this.new_contact_view.$el.hide();
             this.$input.val('').focus();
             if (this.showAllContacts) {
                 this.typeahead.fetchAlphabetical().then(function() {
-                    this.typeahead_view.collection.reset(this.typeahead.models);
+                    if (this.typeahead.length > 0) {
+                        this.typeahead_view.collection.reset(this.typeahead.models);
+                    } else {
+                        this.showHints();
+                    }
                 }.bind(this));
                 this.trigger('show');
             } else {
@@ -95,6 +101,24 @@
             }
         },
 
+        showHints: function() {
+            if (!this.hintView) {
+                this.hintView = new Whisper.HintView({
+                    className: 'contact placeholder',
+                    content: "Enter a phone number to add a contact."
+                }).render();
+                this.hintView.$el.insertAfter(this.$input);
+            }
+            this.hintView.$el.show();
+        },
+
+        hideHints: function() {
+            if (this.hintView) {
+                this.hintView.remove();
+                this.hintView = null;
+            }
+        },
+
         maybeNumber: function(number) {
             return number.match(/^\+?[0-9]*$/);
         }

js/views/hint_view.js

@@ -6,7 +6,12 @@
     window.Whisper = window.Whisper || {};
 
     Whisper.HintView = Whisper.View.extend({
-        className: 'conversation placeholder',
         templateName: 'hint',
+        initialize: function(options) {
+            this.content = options.content;
+        },
+        render_attributes: function() {
+            return { content: this.content };
+        }
     });
 })();

js/views/inbox_view.js

@@ -102,7 +102,10 @@
                     this.inboxListView.$el.hide();
                 });
 
-                this.hintView = new Whisper.HintView();
+                this.hintView = new Whisper.HintView({
+                    className: 'conversation placeholder',
+                    content: "Select a contact or group to start chatting."
+                });
                 if (inboxCollection.length === 0) {
                     this.hintView.render();
                     this.hintView.$el.prependTo(this.$('.conversation-stack'));
@@ -139,6 +142,7 @@
             },
             hideHints: function() {
                 this.hintView.remove();
+                this.searchView.hideHints();
             },
             openConversation: function(e, conversation) {
                 this.hideHints();

stylesheets/_index.scss

@@ -218,10 +218,39 @@ input.search {
   }
 }
 
+.placeholder p {
+    color: $grey;
+}
 .conversation.placeholder {
   p {
-    color: $grey;
     text-align: center;
     margin-top: 120px;
   }
 }
+.contact.placeholder {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  background: transparent;
+  border-radius: 10px;
+  color: white;
+  border: 2px dashed white;
+  overflow: visible;
+  p { color: white; }
+  &:before, &:after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    top: -35px;
+    left: 15px;
+    width: 0;
+    height: 0;
+    border: solid 10px white;
+    border-color: transparent transparent white transparent;
+    transform: scaleY(2.5) scaleX(0.75);
+  }
+  &:after {
+    border-color: transparent transparent #2eace0 transparent;
+    top: -30px;
+  }
+}

stylesheets/manifest.css

@@ -536,11 +536,39 @@ input.search {
       border-color: transparent #2eace0 transparent transparent;
       left: -30px; }
 
+.placeholder p {
+  color: #616161; }
+
 .conversation.placeholder p {
-  color: #616161;
   text-align: center;
   margin-top: 120px; }
 
+.contact.placeholder {
+  position: absolute;
+  top: 50px;
+  left: 0;
+  background: transparent;
+  border-radius: 10px;
+  color: white;
+  border: 2px dashed white;
+  overflow: visible; }
+  .contact.placeholder p {
+    color: white; }
+  .contact.placeholder:before, .contact.placeholder:after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    top: -35px;
+    left: 15px;
+    width: 0;
+    height: 0;
+    border: solid 10px white;
+    border-color: transparent transparent white transparent;
+    transform: scaleY(2.5) scaleX(0.75); }
+  .contact.placeholder:after {
+    border-color: transparent transparent #2eace0 transparent;
+    top: -30px; }
+
 .conversation {
   background-color: #ffffff;
   margin: 10px;