2 files changed, 70 insertions, 8 deletions

diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js
index 8465b45a..d952fed7 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -71,11 +71,55 @@ define(
           attachments: attachments
         }));
 
-        this.$node.find('.bodyArea').html(viewHelpers.formatMailBody(data.mail));
+        var $iframe = $("#read-sandbox");
+        var iframe = $iframe[0];
+
+        var content = viewHelpers.formatMailBody(data.mail);
+
+        iframe.onload = function() {
+          // use iframe-resizer to dynamically adapt iframe size to its content
+          var config = {
+            resizedCallback: scaleToFit,
+            checkOrigin: false
+          };
+          $iframe.iFrameResize(config);
+
+          // transform scale iframe to fit container width
+          // necessary if iframe is wider than container
+          function scaleToFit() {
+              var parentWidth = $iframe.parent().width();
+              var w = $iframe.width();
+              var scale = 'none';
+
+              // only scale html mails
+              var mail = data.mail;
+              if (mail && mail.htmlBody && (w > parentWidth)) {
+                  scale = parentWidth / w;
+                  scale = 'scale(' + scale + ',' + scale + ')';
+              }
+
+              $iframe.css({
+                  '-webkit-transform-origin': '0 0',
+                  '-moz-transform-origin': '0 0',
+                  '-ms-transform-origin': '0 0',
+                  'transform-origin': '0 0',
+                  '-webkit-transform': scale,
+                  '-moz-transform': scale,
+                  '-ms-transform': scale,
+                  'transform': scale
+              });
+          }
+
+          iframe.contentWindow.postMessage({
+            html: content
+          }, '*');
+        };
+
+
 
-        this.trigger(document, events.search.highlightResults, {where: '.bodyArea'});
         this.trigger(document, events.search.highlightResults, {where: '.subjectArea'});
         this.trigger(document, events.search.highlightResults, {where: '.msg-header .recipients'});
+        this.trigger(document, events.ui.replyBox.showReplyContainer);
 
         this.attachTagCompletion(this.attr.mail);
 
@@ -213,9 +257,17 @@ define(
         this.trigger(events.mail.want, {mail: this.attr.ident, caller: this});
       };
 
+      this.highlightMailContent = function (event, data) {
+        // we can't directly manipulate the iFrame to highlight the content
+        // so we need to take an indirection where we directly manipulate
+        // the mail content to accomodate the highlighting
+        this.trigger(document, events.mail.highlightMailContent, data);
+      };
+
       this.after('initialize', function () {
-        this.on(this, events.mail.here, this.displayMail);
         this.on(this, events.mail.notFound, this.openNoMessageSelectedPane);
+        this.on(this, events.mail.here, this.highlightMailContent);
+        this.on(document, events.mail.display, this.displayMail);
         this.on(document, events.dispatchers.rightPane.clear, this.teardown);
         this.on(document, events.mail.tags.updated, this.tagsUpdated);
         this.on(document, events.mail.deleted, this.mailDeleted);
diff --git a/web-ui/app/js/mail_view/ui/reply_section.js b/web-ui/app/js/mail_view/ui/reply_section.js
index 46dfe863..cbe64205 100644
--- a/web-ui/app/js/mail_view/ui/reply_section.js
+++ b/web-ui/app/js/mail_view/ui/reply_section.js
@@ -36,7 +36,8 @@ define(
         replyAllButton: '#reply-all-button',
         forwardButton: '#forward-button',
         replyBox: '#reply-box',
-        replyType: 'reply'
+        replyType: 'reply',
+        replyContainer: '.reply-container'
       });
 
       this.showReply = function() {
@@ -64,9 +65,7 @@ define(
 
       this.checkForDraftReply = function() {
         this.render();
-        this.select('replyButton').hide();
-        this.select('replyAllButton').hide();
-        this.select('forwardButton').hide();
+        this.hideContainer();
 
         this.trigger(document, events.mail.draftReply.want, {ident: this.attr.ident});
       };
@@ -76,11 +75,13 @@ define(
       };
 
       this.showDraftReply = function(ev, data) {
+        this.showContainer();
         this.hideButtons();
         ReplyBox.attachTo(this.select('replyBox'), { mail: data.mail, draftReply: true });
       };
 
       this.showReplyComposeBox = function (ev, data) {
+        this.showContainer();
         this.hideButtons();
         if(this.attr.replyType === 'forward') {
           ForwardBox.attachTo(this.select('replyBox'), { mail: data.mail });
@@ -89,6 +90,14 @@ define(
         }
       };
 
+      this.hideContainer = function() {
+        this.select('replyContainer').hide();
+      };
+
+      this.showContainer = function() {
+        this.select('replyContainer').show();
+      };
+
       this.hideButtons = function() {
         this.select('replyButton').hide();
         this.select('replyAllButton').hide();
@@ -96,6 +105,7 @@ define(
       };
 
       this.showButtons = function () {
+        this.showContainer();
         this.select('replyBox').empty();
         this.select('replyButton').show();
         this.select('replyAllButton').show();
@@ -109,7 +119,7 @@ define(
         this.on(this, events.mail.here, this.showReplyComposeBox);
         this.on(document, events.dispatchers.rightPane.clear, this.teardown);
 
-        this.on(document, events.mail.draftReply.notFound, this.showButtons);
+        this.on(document, events.ui.replyBox.showReplyContainer, this.showContainer);
         this.on(document, events.mail.draftReply.here, this.showDraftReply);
 
         this.checkForDraftReply();