Switch from CSS to Table layout for HTML mails so they work in Outlook aka Word

    Remove templates-vector and theme templates with variables instead
    Switch to matrix.to URLs by default for links

1 files changed, 29 insertions, 21 deletions

diff --git a/res/templates/notif.html b/res/templates/notif.html
index 3112df9704..92e80352fc 100644
--- a/res/templates/notif.html
+++ b/res/templates/notif.html
@@ -1,9 +1,9 @@
-<div class="notif">
-    <div>
-        {% for message in notif.messages %}
-            <div class="message {% if message.is_historical %}historical{% endif %}">
+{% for message in notif.messages %}
+    <tr class="{{ "historical_message" if message.is_historical else "message" }}">
+        <td class="sender_avatar">
+            {% if loop.index0 == 0 or notif.messages[loop.index0 - 1].sender_name != notif.messages[loop.index0].sender_name %}
                 {% if message.sender_avatar_url %}
-                    <img class="sender_avatar" src="{{ message.sender_avatar_url|mxc_to_http(48,48) }}"  />
+                    <img alt="" class="sender_avatar" src="{{ message.sender_avatar_url|mxc_to_http(32,32) }}"  />
                 {% else %}
                     {% if message.sender_hash % 3 == 0 %}
                         <img class="sender_avatar" src="https://vector.im/beta/img/76cfa6.png"  />
@@ -14,21 +14,29 @@
                     {% endif %}
                     <img class="sender_avatar" src="{{ message.sender_avatar_url }}"  />
                 {% endif %}
+            {% endif %}
+        </td>
+        <td class="message_contents">
+            {% if loop.index0 == 0 or notif.messages[loop.index0 - 1].sender_name != notif.messages[loop.index0].sender_name %}
                 <div class="sender_name">{{ message.sender_name }}</div>
-                <div class="message_time">{{ message.ts|format_ts("%H:%M") }}</div>
-                <div class="message_body">
-                    {% if message.msgtype == "m.text" %}
-                        {{ message.body_text_html }}
-                    {% elif message.msgtype == "m.image" %}
-                        <img src="{{ message.image_url|mxc_to_http(640, 480, scale) }}" />
-                    {% elif message.msgtype == "m.file" %}
-                        <span class="filename">{{ message.body_text_plain }}</span>
-                    {% endif %}
-                </div>
+            {% endif %}
+            <div class="message_body">
+                {% if message.msgtype == "m.text" %}
+                    {{ message.body_text_html }}
+                {% elif message.msgtype == "m.image" %}
+                    <img src="{{ message.image_url|mxc_to_http(640, 480, scale) }}" />
+                {% elif message.msgtype == "m.file" %}
+                    <span class="filename">{{ message.body_text_plain }}</span>
+                {% endif %}
             </div>
-        {% endfor %}
-    </div>
-    <div class="notif_link">
-        <a href="{{ notif.link }}">View</a>
-    </div>
-</div>
+        </td>
+        <td class="message_time">{{ message.ts|format_ts("%H:%M") }}</td>
+    </tr>
+{% endfor %}
+<tr class="notif_link">
+    <td></td>
+    <td>
+        <a href="{{ notif.link }}">View {{ room.title }}</a>
+    </td>
+    <td></td>
+</tr>