Show a hint on startup if the inbox is empty

Fixes #403

// FREEBIE

background.html

@@ -24,6 +24,10 @@
     </div>
     <div class='conversation-stack'></div>
   </script>
+  <script type='text/x-tmpl-mustache' id='hint'>
+      <h3>Start here</h3>
+      <p>Search your groups and contacts by name or phone number.</p>
+  </script>
   <script type='text/x-tmpl-mustache' id='conversation'>
     <div class='panel'>
       <div class='conversation-header'>
@@ -338,6 +342,7 @@
   <script type="text/javascript" src="js/views/new_conversation_view.js"></script>
   <script type="text/javascript" src="js/views/conversation_search_view.js"></script>
   <script type="text/javascript" src="js/views/window_controls_view.js"></script>
+  <script type="text/javascript" src="js/views/hint_view.js"></script>
   <script type="text/javascript" src="js/views/inbox_view.js"></script>
   <script type="text/javascript" src="js/views/confirmation_dialog_view.js"></script>
   <script type="text/javascript" src="js/views/identicon_svg_view.js"></script>

js/views/hint_view.js

@@ -0,0 +1,12 @@
+/*
+ * vim: ts=4:sw=4:expandtab
+ */
+(function () {
+    'use strict';
+    window.Whisper = window.Whisper || {};
+
+    Whisper.HintView = Whisper.View.extend({
+        className: 'firstRun hint',
+        templateName: 'hint',
+    });
+})();

js/views/inbox_view.js

@@ -102,6 +102,11 @@
                     this.inboxListView.$el.hide();
                 });
 
+                this.hintView = new Whisper.HintView();
+                if (inboxCollection.length === 0) {
+                    this.hintView.render();
+                    this.hintView.$el.prependTo(this.$('.conversation-stack'));
+                }
 
                 new SocketView().render().$el.appendTo(this.$('.socket-status'));
 
@@ -126,7 +131,11 @@
                     input.removeClass('active');
                 }
             },
+            hideHints: function() {
+                this.hintView.remove();
+            },
             openConversation: function(e, conversation) {
+                this.hideHints();
                 conversation = ConversationController.create(conversation);
                 this.conversation_stack.open(conversation);
                 this.hideCompose();

stylesheets/_index.scss

@@ -181,3 +181,39 @@ input.search {
       font-weight: bold;
     }
 }
+
+.hint {
+  margin: 10px;
+  padding: 1em;
+  border-radius: 10px;
+  color: white;
+  border: 2px dashed white;
+
+  h3 {
+    margin-top: 5px;
+  }
+
+  &.firstRun {
+    position: absolute;
+    top: 0;
+    left: 302px;
+    width: 225px;
+
+    &:before, &:after {
+      content: ' ';
+      display: block;
+      position: absolute;
+      top: 8px;
+      left: -35px;
+      width: 0;
+      height: 0;
+      border: solid 10px white;
+      border-color: transparent white transparent transparent;
+      transform: scaleX(2.5) scaleY(0.75);
+    }
+    &:after {
+      border-color: transparent #2eace0 transparent transparent;
+      left: -30px;
+    }
+  }
+}

stylesheets/manifest.css

@@ -508,6 +508,34 @@ input.search {
 .conversations .unread .contact-details .last-timestamp {
   font-weight: bold; }
 
+.hint {
+  margin: 10px;
+  padding: 1em;
+  border-radius: 10px;
+  color: white;
+  border: 2px dashed white; }
+  .hint h3 {
+    margin-top: 5px; }
+  .hint.firstRun {
+    position: absolute;
+    top: 0;
+    left: 302px;
+    width: 225px; }
+    .hint.firstRun:before, .hint.firstRun:after {
+      content: ' ';
+      display: block;
+      position: absolute;
+      top: 8px;
+      left: -35px;
+      width: 0;
+      height: 0;
+      border: solid 10px white;
+      border-color: transparent white transparent transparent;
+      transform: scaleX(2.5) scaleY(0.75); }
+    .hint.firstRun:after {
+      border-color: transparent #2eace0 transparent transparent;
+      left: -30px; }
+
 .conversation {
   background-color: #ffffff;
   margin: 10px;