[IMP] opacity more when mouseover

[IMP] link black when mouseover
[IMP] semicolon between recipients
[IMP] more 4 recipients hidden under "more..." and appear when mouseover

mail_to/static/src/css/mail_to.css

@@ -1,9 +1,33 @@
-.grey {
+.recipient_link {
     color: grey;
 }
-.o_mail_thread .o_thread_message span.recipients_info {
-    opacity: 0;
+.recipient_link:hover {
+    color: #0d0d0d;
 }
-.o_mail_thread .o_thread_message:hover span.recipients_info {
+
+.o_mail_thread .o_thread_message span.recipients_info,
+.o_mail_thread .o_thread_message i.o_thread_message_star,
+.o_mail_thread .o_thread_message i.o_thread_message_reply,
+.o_mail_thread .o_thread_message i.o_thread_message_needaction
+{
+    opacity: 0.5;
+}
+.o_mail_thread .o_thread_message:hover span.recipients_info,
+.o_mail_thread .o_thread_message:hover i.o_thread_message_star,
+.o_mail_thread .o_thread_message:hover i.o_thread_message_reply,
+.o_mail_thread .o_thread_message:hover i.o_thread_message_needaction
+{
     opacity: 1;
 }
+.more_4 {
+    display: none;
+}
+.more_4_link {
+    display: block;
+}
+.o_mail_thread .o_thread_message:hover span.more_4_link {
+    display: none;
+}
+.o_mail_thread .o_thread_message:hover span.more_4 {
+    display: block;
+}

mail_to/static/src/xml/recipient.xml

@@ -4,10 +4,20 @@
         <t t-jquery="p[class=o_mail_info]>span" t-operation="after">
             <span class="recipients_info">
                 <t t-if="message.partner_ids.length > 0">To: </t>
-                <t t-foreach="message.partner_ids" t-as="p">
-                    <a t-att-href="_.str.sprintf('/web?#id=%s&amp;view_type=form&amp;model=res.partner', p[0])"
-                       class="grey">
-                        <i t-att-data-message-id="message.id" title="Recipients Info" t-esc="p[1]"/>
+                <t t-foreach="message.partner_ids.length" t-as="i">
+                    <a t-att-href="_.str.sprintf('/web?#id=%s&amp;view_type=form&amp;model=res.partner', message.partner_ids[i][0])"
+                       class="recipient_link">
+                        <t t-if="i &lt; 4">
+                            <i t-esc="message.partner_ids[i][1]"/><t t-if="i &lt; message.partner_ids.length - 1">; </t>
+                        </t>
+                        <t t-if="i &gt; 3">
+                            <span class="more_4">
+                                <i t-esc="message.partner_ids[i][1]"/><t t-if="i &lt; message.partner_ids.length - 1">; </t>
+                            </span>
+                        </t>
+                        <t t-if="i == 4">
+                            <span class="more_4_link"><b>and <t t-esc="message.partner_ids.length - 4"> more...</t></b></span>
+                        </t>
                     </a>
                 </t>
             </span>