From bdf746131f4f5cedaf1f9beab5780f44a67cb827 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 12 Apr 2016 20:58:30 +0100
Subject: [PATCH] =?UTF-8?q?Only=20collapse=20email=20templates=20if=20they?=
 =?UTF-8?q?=E2=80=99re=20long?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It’s a bit silly to have email templates expandable if you’re only going
to reveal a couple more lines.

This commit adds a data attribute which specifies how high (in pixels)
the email template can be before it gets truncated. It then changes the
script to only truncate emails which are naturally taller than this
height.

Currently the cut off is at 200px, which is approximately 8 lines of
text: `200px / (font-size: 19px * line-height: 1.31) = 8.03`
---
 app/assets/javascripts/expandCollapse.js    | 6 +++++-
 app/templates/components/email-message.html | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/expandCollapse.js b/app/assets/javascripts/expandCollapse.js
index 1ae95a5b1..a624b3605 100644
--- a/app/assets/javascripts/expandCollapse.js
+++ b/app/assets/javascripts/expandCollapse.js
@@ -5,7 +5,11 @@
 
     this.start = function(component) {
 
-      this.$component = $(component)
+      this.$component = $(component);
+
+      if (this.$component.height() < this.$component.data('max-height')) return;
+
+      this.$component      
         .append(`
           <div class='toggle' tabindex='0'>...<span class='visually-hidden'>show full email</span></div>
         `)
diff --git a/app/templates/components/email-message.html b/app/templates/components/email-message.html
index 25b8733fd..9df0f3d26 100644
--- a/app/templates/components/email-message.html
+++ b/app/templates/components/email-message.html
@@ -31,7 +31,7 @@
         </tbody>
       </table>
     {% endif %}
-    <div class="email-message-body" data-module="expand-collapse">
+    <div class="email-message-body" data-module="expand-collapse" data-max-height="200">
       <div class="email-message-body-wrapper">
       {{ body|nl2br }}
       </div>