Add no mails availabe message to middle pane

- Issue #503

5 files changed, 74 insertions, 2 deletions

diff --git a/web-ui/app/js/dispatchers/middle_pane_dispatcher.js b/web-ui/app/js/dispatchers/middle_pane_dispatcher.js
index f988454c..59263af2 100644
--- a/web-ui/app/js/dispatchers/middle_pane_dispatcher.js
+++ b/web-ui/app/js/dispatchers/middle_pane_dispatcher.js
@@ -14,14 +14,25 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
  */
-define(['flight/lib/component', 'page/events', 'helpers/triggering'], function(defineComponent, events, triggering) {
+define(['flight/lib/component', 'page/events', 'helpers/triggering', 'mail_view/ui/no_mails_available_pane'], function(defineComponent, events, triggering, NoMailsAvailablePane) {
   'use strict';
 
   return defineComponent(function() {
     this.defaultAttrs({
-      middlePane: '#middle-pane'
+      middlePane: '#middle-pane',
+      noMailsAvailablePane: 'no-mails-available-pane'
     });
 
+    this.createChildDiv = function (component_id) {
+      var child_div = $('<div>', {id: component_id});
+      this.select('middlePane').append(child_div);
+      return child_div;
+    };
+
+    this.resetChildDiv = function() {
+      this.select('middlePane').empty();
+    };
+
     this.refreshMailList =  function (ev, data) {
       this.trigger(document, events.ui.mails.fetchByTag, data);
     };
@@ -40,10 +51,21 @@ define(['flight/lib/component', 'page/events', 'helpers/triggering'], function(d
         this.select('middlePane').css({height: (vh - top) + 'px'});
     };
 
+    this.onMailsChange = function (ev, data) {
+      if (data.mails.length > 0) {
+        NoMailsAvailablePane.teardownAll();
+        this.resetChildDiv();
+      } else {
+        var child_div = this.createChildDiv(this.attr.noMailsAvailablePane);
+        NoMailsAvailablePane.attachTo(child_div);
+      }
+    };
+
     this.after('initialize', function () {
       this.on(document, events.dispatchers.middlePane.refreshMailList, this.refreshMailList);
       this.on(document, events.dispatchers.middlePane.cleanSelected, this.cleanSelected);
       this.on(document, events.dispatchers.middlePane.resetScroll, this.resetScroll);
+      this.on(document, events.mails.available, this.onMailsChange);
 
       this.updateMiddlePaneHeight();
       $(window).on('resize', this.updateMiddlePaneHeight.bind(this));
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
new file mode 100644
index 00000000..edcaade0
--- /dev/null
+++ b/web-ui/app/js/mail_view/ui/no_mails_available_pane.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2014 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+define(
+  [
+    'flight/lib/component',
+    'views/templates',
+    'mixins/with_hide_and_show',
+    'page/events'
+  ],
+
+  function(defineComponent, templates, withHideAndShow, events) {
+    'use strict';
+
+    //return defineComponent(noMailsAvailablePane, withHideAndShow);
+    return defineComponent(noMailsAvailablePane);
+
+    function noMailsAvailablePane() {
+
+      this.render = function() {
+        this.$node.html(templates.noMailsAvailable());
+      };
+
+      this.after('initialize', function () {
+        this.render();
+
+        // this.on(document, events.dispatchers.middlePane.clear, this.teardown);
+      });
+    }
+  }
+);
diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js
index 1189d1ad..c3d39cd3 100644
--- a/web-ui/app/js/page/default.js
+++ b/web-ui/app/js/page/default.js
@@ -21,6 +21,7 @@ define(
     'user_alerts/ui/user_alerts',
     'mail_list/ui/mail_list',
     'mail_view/ui/no_message_selected_pane',
+    'mail_view/ui/no_mails_available_pane',
     'mail_view/ui/mail_view',
     'mail_view/ui/mail_actions',
     'mail_view/ui/reply_section',
@@ -55,6 +56,7 @@ define(
     userAlerts,
     mailList,
     noMessageSelectedPane,
+    noMailsAvailablePane,
     mailView,
     mailViewActions,
     replyButton,
diff --git a/web-ui/app/js/views/templates.js b/web-ui/app/js/views/templates.js
index 61fb0486..80752e8e 100644
--- a/web-ui/app/js/views/templates.js
+++ b/web-ui/app/js/views/templates.js
@@ -53,6 +53,7 @@ define(['hbs/templates'], function (templates) {
       paginationTrigger: window.Pixelated['app/templates/mail_actions/pagination_trigger.hbs']
     },
     noMessageSelected: window.Pixelated['app/templates/compose/no_message_selected.hbs'],
+    noMailsAvailable: window.Pixelated['app/templates/compose/no_mails_available.hbs'],
     search: {
       trigger: window.Pixelated['app/templates/search/search_trigger.hbs']
     },
diff --git a/web-ui/app/templates/compose/no_mails_available.hbs b/web-ui/app/templates/compose/no_mails_available.hbs
new file mode 100644
index 00000000..a3ec46b3
--- /dev/null
+++ b/web-ui/app/templates/compose/no_mails_available.hbs
@@ -0,0 +1,3 @@
+<div class="scene">
+  <div class="text">{{t 'NO MAILS AVAILABLE'}}.</div>
+</div>