Automatically condense long messages

Addresses Trac #747.

(imported from commit 057f08f2fcef43070b0838a600f6a89c479b4ee8)

zephyr/static/js/message_list.js

@@ -396,6 +396,18 @@ MessageList.prototype = {
                               }});
         }
 
+        $.each(rendered_elems, function (index, elem) {
+            var row = $(elem);
+
+            var content = $(elem).find(".message_content")[0];
+            if (content !== undefined) {
+                if( content.offsetHeight < content.scrollHeight ||
+                    content.offsetWidth < content.scrollWidth) {
+                    $(elem).find(".message_expander").show();
+                }
+            }
+        });
+
         // Re-add the fading of messages that is lost when we re-render.
         compose.update_faded_messages();
 

zephyr/static/js/ui.js

@@ -877,7 +877,8 @@ $(function () {
 
     $("#main_div").on("click", ".messagebox", function (e) {
         var target = $(e.target);
-        if (target.is("a") || target.is("img.message_inline_image") || target.is("img.twitter-avatar")) {
+        if (target.is("a") || target.is("img.message_inline_image") || target.is("img.twitter-avatar") ||
+            target.is("div.message_length_controller")) {
             // If this click came from a hyperlink, don't trigger the
             // reply action.  The simple way of doing this is simply
             // to call e.stopPropagation() from within the link's
@@ -933,6 +934,20 @@ $(function () {
         toggle_star(rows.id($(this).closest(".message_row")));
     });
 
+    $("#home").on("click", ".message_expander", function (e) {
+        var row = $(this).closest(".message_row");
+        row.find(".message_content").addClass("expanded");
+        $(this).hide();
+        row.find(".message_collapser").show();
+    });
+
+    $("#home").on("click", ".message_collapser", function (e) {
+        var row = $(this).closest(".message_row");
+        row.find(".message_content").removeClass("expanded");
+        $(this).hide();
+        row.find(".message_expander").show();
+    });
+
     $("#home").on("click", ".narrows_by_recipient", function (e) {
         var nearest = current_msg_list.get(rows.id($(this).closest(".recipient_row")));
         var selected = current_msg_list.selected_message();

zephyr/static/styles/zephyr.css

@@ -432,6 +432,9 @@ table.focused_table {
 .message_content {
     margin-left: 5px;
     margin-right: 35px; /* size of the timestamp */
+    line-height: 1.5em;
+    max-height: 9.0em;
+    overflow: hidden;
 }
 @media (max-width: 480px) {
     .message_content {
@@ -439,6 +442,20 @@ table.focused_table {
     }
 }
 
+.message_content.expanded {
+    max-height: none;
+}
+
+.message_length_controller {
+    display: none;
+    text-align: center;
+    color: #0088CC;
+}
+
+.message_length_controller:hover {
+    text-decoration: underline;
+}
+
 blockquote {
     margin-bottom: 6px;
 }
@@ -1113,4 +1130,4 @@ li.expanded_subject {
 .sub-unsub-message {
     text-align: center;
     padding-bottom: 10px; /* same as .bookend */
-}
+}

zephyr/static/templates/message.handlebars

@@ -85,6 +85,8 @@
         </div>
         </div>
         <div class="message_content">{{{content}}}</div>
+        <div class="message_expander message_length_controller" title="See the rest of this message">[More...]</div>
+        <div class="message_collapser message_length_controller" title="Make this message take up less space on the screen">[Collapse this message]</div>
     </td>
 </tr>
 {{/with}}