Issue#377 - Add ability to allow users to delete emails from recipient input.

5 files changed, 66 insertions, 6 deletions

diff --git a/web-ui/app/js/mail_view/ui/recipients/recipient.js b/web-ui/app/js/mail_view/ui/recipients/recipient.js
index f8909fe1..2048a978 100644
--- a/web-ui/app/js/mail_view/ui/recipients/recipient.js
+++ b/web-ui/app/js/mail_view/ui/recipients/recipient.js
@@ -19,10 +19,11 @@
 define(
   [
     'flight/lib/component',
-    'views/templates'
+    'views/templates',
+    'page/events'
   ],
 
-  function (defineComponent, templates) {
+  function (defineComponent, templates, events) {
 
     return defineComponent(recipient);
 
@@ -36,6 +37,24 @@ define(
         return component;
       };
 
+      this.recipientDelActions = function () {
+        this.on(this.$node.find('.recipient-del'), 'click', function (event) {
+          this.doSelect();
+          this.trigger(events.ui.recipients.deleteRecipient, {recipientsName : this.attr.address});
+          event.preventDefault();
+        });
+
+        this.on(this.$node.find('.recipient-del'), 'mouseover', function () {
+          this.$node.find('.recipient-value').addClass('deleting');
+          this.$node.find('.recipient-del').addClass('deleteTooltip');
+        });
+
+        this.on(this.$node.find('.recipient-del'), 'mouseout', function () {
+          this.$node.find('.recipient-value').removeClass('deleting');
+          this.$node.find('.recipient-del').removeClass('deleteTooltip');
+        });
+      };
+
       this.destroy = function () {
         this.$node.remove();
         this.teardown();
@@ -49,6 +68,10 @@ define(
         this.$node.find('.recipient-value').removeClass('selected');
       };
 
+      this.isSelected = function () {
+        return this.$node.find('.recipient-value').hasClass('selected');
+      }
+
       this.discoverEncryption = function () {
         this.$node.addClass('discorver-encryption');
         var p = $.getJSON('/keys?search=' + this.attr.address).promise();
@@ -58,11 +81,12 @@ define(
         }.bind(this));
           p.fail(function () {
             this.$node.find('.recipient-value').addClass('not-encrypted');
-          this.$node.removeClass('discorver-encryption');
+            this.$node.removeClass('discorver-encryption');
         }.bind(this));
       };
 
       this.after('initialize', function () {
+        this.recipientDelActions();
         this.discoverEncryption();
       });
     }
diff --git a/web-ui/app/js/mail_view/ui/recipients/recipients.js b/web-ui/app/js/mail_view/ui/recipients/recipients.js
index d2a5160d..d9a894a6 100644
--- a/web-ui/app/js/mail_view/ui/recipients/recipients.js
+++ b/web-ui/app/js/mail_view/ui/recipients/recipients.js
@@ -20,11 +20,12 @@ define(
     'flight/lib/component',
     'views/templates',
     'page/events',
+    'helpers/iterator',
     'mail_view/ui/recipients/recipients_input',
     'mail_view/ui/recipients/recipient',
     'mail_view/ui/recipients/recipients_iterator'
   ],
-  function (defineComponent, templates, events, RecipientsInput, Recipient, RecipientsIterator) {
+  function (defineComponent, templates, events, Iterator, RecipientsInput, Recipient, RecipientsIterator) {
     'use strict';
 
     return defineComponent(recipients);
@@ -62,6 +63,17 @@ define(
         this.addressesUpdated();
       };
 
+      this.deleteRecipient = function (event, recipient) {
+        var iter = new Iterator(this.attr.recipients, /*startingIndex=*/-1);
+
+        while(iter.hasNext() && iter.next()) {
+          if (iter.current().isSelected() && iter.current().address === recipient.address) {
+            iter.removeCurrent().destroy();
+            break;
+          }
+        }
+      };
+
       this.deleteLastRecipient = function () {
         this.attr.recipients.pop().destroy();
         this.addressesUpdated();
@@ -127,6 +139,7 @@ define(
         this.attachInput();
         this.initializeAddresses();
 
+        this.on(events.ui.recipients.deleteRecipient, this.deleteRecipient);
         this.on(events.ui.recipients.deleteLast, this.deleteLastRecipient);
         this.on(events.ui.recipients.selectLast, this.selectLastRecipient);
         this.on(events.ui.recipients.entered, this.recipientEntered);
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index cf1b29ad..dfc2b852 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -82,6 +82,7 @@ define(function () {
       recipients: {
         entered: 'ui:recipients:entered',
         updated: 'ui:recipients:updated',
+        deleteRecipient: 'ui:recipients:deleteRecipient',
         deleteLast: 'ui:recipients:deleteLast',
         selectLast: 'ui:recipients:selectLast',
         unselectAll: 'ui:recipients:unselectAll',
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index e1f06425..6546c224 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -197,12 +197,12 @@
       display: inline-block;
       margin-right: -3px;
       flex: none;
+      position: relative;
 
       .recipient-value {
         &.selected {
           border: 1px solid #666666;
         }
-
         &:before {
           font-family: FontAwesome;
           padding-right: 4px;
@@ -224,12 +224,32 @@
             content: "\f13e ";
           }
         }
+        &.deleting span {
+          text-decoration: line-through;
+        }
         background-color: #F5F5F5;
         border: 1px solid #D9D9D9;
         border-radius: 2px;
         margin: 3px;
         padding: 5px;
       }
+
+      .recipient-del {
+        position: relative;
+
+        &:before {
+          margin-left: 0.4em;
+          # padding-left: 0.4em;
+          font-weight: bold;
+          content: "x"
+        }
+        &.deleteTooltip:hover:after {
+          position: absolute;
+          content: "click to remove";
+          font-size: 0.5rem;
+          @include tooltip(25px, 0px);
+        }
+      }
     }
   }
 }
diff --git a/web-ui/app/templates/compose/fixed_recipient.hbs b/web-ui/app/templates/compose/fixed_recipient.hbs
index 2f773c76..cd6b0c26 100644
--- a/web-ui/app/templates/compose/fixed_recipient.hbs
+++ b/web-ui/app/templates/compose/fixed_recipient.hbs
@@ -1,6 +1,8 @@
 <div class="fixed-recipient">
   <span class="recipient-area">
-    <div class="recipient-value">{{ address }}</div>
+    <div class="recipient-value">
+      <span>{{ address }}</span> <a class="recipient-del" href="#"/>
+    </div>
   </span>
   <input type="hidden" value="{{ address }}" name="{{ name }}" />
 </div>