5 files changed, 30 insertions, 15 deletions

diff --git a/web-ui/app/js/mail_list/ui/mail_items/generic_mail_item.js b/web-ui/app/js/mail_list/ui/mail_items/generic_mail_item.js
index 3d426447..d5dfbf28 100644
--- a/web-ui/app/js/mail_list/ui/mail_items/generic_mail_item.js
+++ b/web-ui/app/js/mail_list/ui/mail_items/generic_mail_item.js
@@ -51,7 +51,8 @@ define(
 
       function updateMailStatusToRead() {
         if (!_.contains(this.attr.mail.status, this.status.READ)) {
-          this.trigger(document, events.mail.read, { ident: this.attr.ident, tags: this.attr.mail.tags });
+          var mail_read_data = { ident: this.attr.ident, tags: this.attr.tags, mailbox: this.attr.mailbox };
+          this.trigger(document, events.mail.read, mail_read_data);
           this.attr.mail.status.push(this.status.READ);
           this.$node.addClass(viewHelpers.formatStatusClasses(this.attr.mail.status));
         }
diff --git a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
index 5a4192e6..5f1f354a 100644
--- a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
+++ b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
@@ -1,6 +1,6 @@
 /*
  * 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
@@ -64,6 +64,7 @@ define(
       this.attr.ident = mail.ident;
       this.attr.statuses = viewHelper.formatStatusClasses(mail.status);
       this.attr.tags = mail.tags;
+      this.attr.mailbox = mail.mailbox;
       this.attr.header.formattedDate = this.formattedDate(mail.header.date);
     };
 
diff --git a/web-ui/app/js/tags/ui/tag.js b/web-ui/app/js/tags/ui/tag.js
index c2b7f588..2cf45764 100644
--- a/web-ui/app/js/tags/ui/tag.js
+++ b/web-ui/app/js/tags/ui/tag.js
@@ -52,9 +52,13 @@ define(
       };
 
       this.decreaseReadCountIfMatchingTag = function (ev, data) {
-        if (_.contains(data.tags, this.attr.tag.name)) {
+        var mailbox_and_tags = _.flatten([data.tags, data.mailbox]);
+        if (_.contains(mailbox_and_tags, this.attr.tag.name)) {
           this.attr.tag.counts.read++;
           this.$node.html(this.viewFor(this.attr.tag, templates.tags.tagInner));
+          if (!_.isUndefined(this.attr.shortcut)) {
+            this.attr.shortcut.reRender();
+          }
         }
       };
 
diff --git a/web-ui/app/js/tags/ui/tag_list.js b/web-ui/app/js/tags/ui/tag_list.js
index 5bbac8ca..b5b4d555 100644
--- a/web-ui/app/js/tags/ui/tag_list.js
+++ b/web-ui/app/js/tags/ui/tag_list.js
@@ -55,7 +55,7 @@ define(
       });
 
       this.renderShortcut = function (tag, tagComponent) {
-        TagShortcut.appendedTo($('#tags-shortcuts'), { linkTo: tag, trigger: tagComponent});
+        return TagShortcut.appendedTo($('#tags-shortcuts'), { linkTo: tag, trigger: tagComponent});
       };
 
       function renderTag(tag, defaultList, customList) {
@@ -63,7 +63,7 @@ define(
 
         var tagComponent = Tag.appendedTo(list, {tag: tag});
         if (_.contains(_.keys(ORDER), tag.name)) {
-          this.renderShortcut(tag, tagComponent);
+          tagComponent.attr.shortcut = this.renderShortcut(tag, tagComponent);
         }
       }
 
diff --git a/web-ui/app/js/tags/ui/tag_shortcut.js b/web-ui/app/js/tags/ui/tag_shortcut.js
index 5710592e..0fe92550 100644
--- a/web-ui/app/js/tags/ui/tag_shortcut.js
+++ b/web-ui/app/js/tags/ui/tag_shortcut.js
@@ -26,7 +26,7 @@ define(
 
   function (describeComponent, templates, events, tagBase, utils) {
 
-    var TagShortcut =  describeComponent(tagShortcut, tagBase);
+    var TagShortcut = describeComponent(tagShortcut, tagBase);
 
     TagShortcut.appendedTo = function (parent, data) {
       var res = new this();
@@ -38,9 +38,7 @@ define(
 
     function tagShortcut() {
 
-      this.renderAndAttach = function (parent, options) {
-        var linkTo = options.linkTo;
-
+      this.renderTemplate = function (linkTo) {
         var model = {
           tagName: linkTo.name,
           displayBadge: this.displayBadge(linkTo),
@@ -48,11 +46,16 @@ define(
           count: this.badgeType(linkTo) === 'total' ? linkTo.counts.total : (linkTo.counts.total - linkTo.counts.read),
           icon: iconFor[linkTo.name]
         };
+        return templates.tags.shortcut(model);
+      };
 
-        var rendered = templates.tags.shortcut(model);
-        parent.append(rendered);
+      this.renderAndAttach = function (parent, options) {
+        parent.append(this.renderTemplate(options.linkTo));
+        this.initialize(parent.children().last(), options);
+      };
 
-        this.initialize(parent.children().last(),options);
+      this.reRender = function () {
+        this.$node.html(this.renderTemplate(this.attr.linkTo));
       };
 
       var iconFor = {
@@ -64,8 +67,12 @@ define(
       };
 
       this.selectTag = function (ev, data) {
-        if(data.tag === this.attr.linkTo.name) { this.doSelect(); }
-        else { this.doUnselect(); }
+        if (data.tag === this.attr.linkTo.name) {
+          this.doSelect();
+        }
+        else {
+          this.doUnselect();
+        }
       };
 
       this.doUnselect = function () {
@@ -83,7 +90,9 @@ define(
       };
 
       this.after('initialize', function () {
-        this.on('click', function () { this.attr.trigger.triggerSelect(); });
+        this.on('click', function () {
+          this.attr.trigger.triggerSelect();
+        });
         this.on(document, events.ui.tag.select, this.selectTag);
         this.on(document, events.tags.shortcuts.teardown, this.doTeardown);
       });