diff options
| -rw-r--r-- | web-ui/app/js/mail_view/ui/recipients/recipients.js | 5 | ||||
| -rw-r--r-- | web-ui/app/scss/_mixins.scss | 14 | ||||
| -rw-r--r-- | web-ui/app/templates/compose/recipients.hbs | 24 |
3 files changed, 34 insertions, 9 deletions
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 3d756bd5..2caa8d14 100644 --- a/web-ui/app/js/mail_view/ui/recipients/recipients.js +++ b/web-ui/app/js/mail_view/ui/recipients/recipients.js @@ -32,7 +32,8 @@ define( function recipients() { this.defaultAttrs({ - navigationHandler: '.recipients-navigation-handler' + navigationHandler: '.recipients-navigation-handler', + recipientsList: '.recipients-list' }); function getAddresses(recipients) { @@ -85,7 +86,7 @@ define( }; this.addRecipient = function(recipient) { - var newRecipient = Recipient.prototype.renderAndPrepend(this.$node, recipient); + var newRecipient = Recipient.prototype.renderAndPrepend(this.$node.find(this.attr.recipientsList), recipient); this.attr.recipients.push(newRecipient); }; diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index 0e1edf66..1f3e618e 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -176,13 +176,25 @@ box-sizing: border-box; position: relative; - .recipients-label { + .compose-column-label { width: 5%; + display: inline-block; + } + + .compose-column-recipients { + width: 95%; + display: inline-block; + } + + .recipients-label { + width: 100%; + height: 100%; } .recipients-navigation-handler { z-index: -1; position: absolute; + top: -200px; } .twitter-typeahead { diff --git a/web-ui/app/templates/compose/recipients.hbs b/web-ui/app/templates/compose/recipients.hbs index effe48e2..6dbed714 100644 --- a/web-ui/app/templates/compose/recipients.hbs +++ b/web-ui/app/templates/compose/recipients.hbs @@ -1,19 +1,31 @@ <div id="recipients-fields" style="display:none"> <div id='recipients-to-area' class="recipients-area input-container columns large-12 no-padding"> <input class="recipients-navigation-handler"/> - <label for="recipients-to-box" class="recipients-label column large-1">{{t 'TO'}}: </label> - <input id='recipients-to-box' class="recipients-input" type="text" tabindex="1"/> + <div class='compose-column-label'> + <label for="recipients-to-box" class="recipients-label column large-1">{{t 'TO'}}: </label> + </div> + <div class='recipients-list compose-column-recipients'> + <input id='recipients-to-box' class="recipients-input" type="text" tabindex="1"/> + </div> </div> <div id="recipients-cc-area" class="recipients-area input-container columns large-12 no-padding"> <input class="recipients-navigation-handler"/> - <label for="recipients-cc-box" class="recipients-label column large-1">{{t 'CC'}}: </label> - <input id='recipients-cc-box' class="recipients-input" type="text" tabindex="2"/> + <div class='compose-column-label'> + <label for="recipients-cc-box" class="recipients-label column large-1">{{t 'CC'}}: </label> + </div> + <div class='recipients-list compose-column-recipients'> + <input id='recipients-cc-box' class="recipients-input" type="text" tabindex="2"/> + </div> </div> <div id="recipients-bcc-area" class="recipients-area input-container columns large-12 no-padding"> <input class="recipients-navigation-handler"/> - <label for ="recipients-bcc-box" class="recipients-label column large-1">{{t 'BCC'}}: </label> - <input id='recipients-bcc-box' class="recipients-input" type="text" tabindex="3"/> + <div class='compose-column-label'> + <label for ="recipients-bcc-box" class="recipients-label column large-1">{{t 'BCC'}}: </label> + </div> + <div class='recipients-list compose-column-recipients'> + <input id='recipients-bcc-box' class="recipients-input" type="text" tabindex="3"/> + </div> </div> </div> |