Add an initial message to greet you.

(And to let you know that it's OK that you have no messages.)

This fixes Trac #850 for the case where you first log in.

(imported from commit 47741856e34f67bfc2cc91bdc21def75ab6fe09d)

templates/zephyr/home.html

@@ -27,6 +27,16 @@
     <div class="message_list" id="main_div">
       <div id="loading_more_messages_indicator"></div>
       <div id="page_loading_indicator"></div>
+      <div id="first_run_message">
+        <h4>Welcome to Humbug</h4>
+        <p>See, the thing about it is... there aren't any messages
+        here for you right now. I'm sure someone will eventually send
+        you one.</p>
+
+        <p>Or, <strong>take matters into your own hands</strong>,
+        and <a href="#" onclick="compose.start('stream');return false;">
+        compose a new stream message</a>.</p>
+      </div>
       <table class="message_table focused_table" id="zhome">
         <tbody>
         </tbody>

zephyr/static/js/setup.js

@@ -8,6 +8,8 @@ $(function () {
     // get_updates completes.
     if (have_initial_messages) {
         util.make_loading_indicator($('#page_loading_indicator'), 'Loading...');
+    } else {
+        util.show_first_run_message();
     }
 
     // Compile Handlebars templates.

zephyr/static/js/util.js

@@ -71,5 +71,14 @@ exports.destroy_loading_indicator = function (container) {
     container.css({width: 0, height: 0, display: 'none'});
 };
 
+exports.show_first_run_message = function () {
+    $('#first_run_message').show();
+};
+
+exports.destroy_first_run_message = function () {
+    // A no-op if the element no longer exists
+    $('#first_run_message').remove();
+};
+
 return exports;
 }());

zephyr/static/js/zephyr.js

@@ -512,6 +512,7 @@ function add_messages(messages, add_to_home) {
         return;
 
     util.destroy_loading_indicator($('#page_loading_indicator'));
+    util.destroy_first_run_message();
     messages = $.map(messages, add_message_metadata);
 
     if (add_to_home) {

zephyr/static/styles/zephyr.css

@@ -897,3 +897,12 @@ table.floating_recipient {
     max-height: 400px;
     overflow-y: scroll;
 }
+
+#first_run_message {
+    padding: 1em 4em;
+    display: none;
+}
+
+#first_run_message h4 {
+    text-align: center;
+}