diff options
Diffstat (limited to 'web-ui/app')
| -rw-r--r-- | web-ui/app/js/mail_view/ui/recipients/recipient.js | 30 | ||||
| -rw-r--r-- | web-ui/app/js/mail_view/ui/recipients/recipients.js | 15 | ||||
| -rw-r--r-- | web-ui/app/js/page/events.js | 1 | ||||
| -rw-r--r-- | web-ui/app/scss/_mixins.scss | 22 | ||||
| -rw-r--r-- | web-ui/app/templates/compose/fixed_recipient.hbs | 4 |
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..f4e6e9a6 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 0196ee24..cfc3d7db 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> |