From d4e0c11ebc68ea7f38c42b856385753bcd3f9483 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Fri, 20 Nov 2015 16:58:52 -0800
Subject: [PATCH] Show a hint on startup if the inbox is empty

Fixes #403

// FREEBIE
---
 background.html          |  5 +++++
 js/views/hint_view.js    | 12 ++++++++++++
 js/views/inbox_view.js   |  9 +++++++++
 stylesheets/_index.scss  | 36 ++++++++++++++++++++++++++++++++++++
 stylesheets/manifest.css | 28 ++++++++++++++++++++++++++++
 5 files changed, 90 insertions(+)
 create mode 100644 js/views/hint_view.js

diff --git a/background.html b/background.html
index 3622ec4b..da519f3b 100644
--- a/background.html
+++ b/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>
diff --git a/js/views/hint_view.js b/js/views/hint_view.js
new file mode 100644
index 00000000..0319ea46
--- /dev/null
+++ b/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',
+    });
+})();
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 1eedf671..8286071b 100644
--- a/js/views/inbox_view.js
+++ b/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();
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index ddbbdcba..afa617ab 100644
--- a/stylesheets/_index.scss
+++ b/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;
+    }
+  }
+}
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index c3932534..df34ce26 100644
--- a/stylesheets/manifest.css
+++ b/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;