summaryrefslogtreecommitdiff
path: root/web-ui/app
diff options
context:
space:
mode:
authorJefferson Stachelski <jstachel@thoughtworks.com>2015-10-21 17:50:48 -0200
committerJefferson Stachelski <jstachel@thoughtworks.com>2015-10-21 17:50:48 -0200
commit1c149819bd57de8b85351cd4a631a181faac9eee (patch)
tree624c715e3ab83850cd965ed5171cb78d84b80c28 /web-ui/app
parent4d5f54625b13542237bd5a157fc3238828dd1e26 (diff)
parent949885a3ba8ba23a2e7a5785814be08d31708562 (diff)
Merge branch 'master' of https://github.com/SamuelToh/pixelated-user-agent
Diffstat (limited to 'web-ui/app')
-rw-r--r--web-ui/app/js/mail_view/ui/recipients/recipient.js30
-rw-r--r--web-ui/app/js/mail_view/ui/recipients/recipients.js15
-rw-r--r--web-ui/app/js/page/events.js1
-rw-r--r--web-ui/app/scss/_mixins.scss22
-rw-r--r--web-ui/app/templates/compose/fixed_recipient.hbs4
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>