Adds style and tag information on 'No Mails available' message.

- Issue #503

4 files changed, 26 insertions, 8 deletions

diff --git a/web-ui/app/js/dispatchers/middle_pane_dispatcher.js b/web-ui/app/js/dispatchers/middle_pane_dispatcher.js
index 59263af2..7a53b769 100644
--- a/web-ui/app/js/dispatchers/middle_pane_dispatcher.js
+++ b/web-ui/app/js/dispatchers/middle_pane_dispatcher.js
@@ -29,8 +29,8 @@ define(['flight/lib/component', 'page/events', 'helpers/triggering', 'mail_view/
       return child_div;
     };
 
-    this.resetChildDiv = function() {
-      this.select('middlePane').empty();
+    this.resetChildDiv = function(component_id) {
+      $('#' + component_id).remove();
     };
 
     this.refreshMailList =  function (ev, data) {
@@ -52,12 +52,12 @@ define(['flight/lib/component', 'page/events', 'helpers/triggering', 'mail_view/
     };
 
     this.onMailsChange = function (ev, data) {
+      this.resetChildDiv(this.attr.noMailsAvailablePane);
       if (data.mails.length > 0) {
         NoMailsAvailablePane.teardownAll();
-        this.resetChildDiv();
       } else {
         var child_div = this.createChildDiv(this.attr.noMailsAvailablePane);
-        NoMailsAvailablePane.attachTo(child_div);
+        NoMailsAvailablePane.attachTo(child_div, {tag: data.tag});
       }
     };
 
diff --git a/web-ui/app/js/mail_view/ui/no_mails_available_pane.js b/web-ui/app/js/mail_view/ui/no_mails_available_pane.js
index edcaade0..32b6bc19 100644
--- a/web-ui/app/js/mail_view/ui/no_mails_available_pane.js
+++ b/web-ui/app/js/mail_view/ui/no_mails_available_pane.js
@@ -29,15 +29,17 @@ define(
     return defineComponent(noMailsAvailablePane);
 
     function noMailsAvailablePane() {
+      this.defaultAttrs({
+        tag: null 
+      });
 
       this.render = function() {
-        this.$node.html(templates.noMailsAvailable());
+        this.attr.tag = this.attr.tag.toUpperCase();
+        this.$node.html(templates.noMailsAvailable(this.attr));
       };
 
       this.after('initialize', function () {
         this.render();
-
-        // this.on(document, events.dispatchers.middlePane.clear, this.teardown);
       });
     }
   }
diff --git a/web-ui/app/scss/_mascot.scss b/web-ui/app/scss/_mascot.scss
index 98812ce2..9a8b8bdb 100644
--- a/web-ui/app/scss/_mascot.scss
+++ b/web-ui/app/scss/_mascot.scss
@@ -30,3 +30,19 @@
     margin-bottom: 40px;
   }
 }
+
+#no-mails-available-pane {
+    text-align: center;
+    line-height: 65vh;
+
+  .scene{
+    display:inline-block;
+    vertical-align:middle;
+  }
+
+  .text{
+    color:#666;
+    margin-bottom: 40px;
+  }
+
+}
diff --git a/web-ui/app/templates/compose/no_mails_available.hbs b/web-ui/app/templates/compose/no_mails_available.hbs
index a3ec46b3..ce887267 100644
--- a/web-ui/app/templates/compose/no_mails_available.hbs
+++ b/web-ui/app/templates/compose/no_mails_available.hbs
@@ -1,3 +1,3 @@
 <div class="scene">
-  <div class="text">{{t 'NO MAILS AVAILABLE'}}.</div>
+  <div class="text">{{t 'NO EMAILS IN'}} '{{ tag }}'.</div>
 </div>