Add auto-hide/show magic to message recipients field when viewing

tailbone/templates/messages/view.mako

@@ -4,6 +4,10 @@
 <%def name="head_tags()">
   ${parent.head_tags()}
   <style type="text/css">
+    .field-wrapper.recipients .everyone {
+        cursor: pointer;
+        display: none;
+    }
     .message-tools {
         margin-bottom: 15px;
     }
@@ -11,12 +15,31 @@
         border-top: 1px solid black;
         border-bottom: 1px solid black;
         margin-bottom: 15px;
+        padding: 0 5em;
         white-space: pre-line;
     }
     .message-body p {
         margin-bottom: 15px;
     }
   </style>
+  <script type="text/javascript">
+
+    $(function() {
+
+        $('.field-wrapper.recipients .more').click(function() {
+            $(this).hide();
+            $(this).siblings('.everyone').css('display', 'inline-block');
+            return false;
+        });
+
+        $('.field-wrapper.recipients .everyone').click(function() {
+            $(this).hide();
+            $(this).siblings('.more').show();
+        });
+
+    });
+
+  </script>
 </%def>
 
 <%def name="context_menu_items()">

tailbone/views/messages.py

@@ -97,6 +97,12 @@ class RecipientsFieldRenderer(formalchemy.FieldRenderer):
         recips = sorted([r.recipient.display_name for r in recips])
         if len(recips) < len(recipients):
             recips.insert(0, 'you')
+        max_display = 5
+        if len(recips) > max_display:
+            basic = HTML.literal("{}, ".format(', '.join(recips[:max_display-1])))
+            more = tags.link_to("({} more)".format(len(recips[max_display-1:])), '#', class_='more')
+            everyone = HTML.tag('span', class_='everyone', c=', '.join(recips[max_display-1:]))
+            return basic + more + everyone
         return ', '.join(recips)