diff --git a/res/templates-vector/mail.css b/res/templates-vector/mail.css
deleted file mode 100644
index 103c5ff8ca..0000000000
--- a/res/templates-vector/mail.css
+++ /dev/null
@@ -1,115 +0,0 @@
-body {
- margin: 0px;
-}
-
-#page {
- font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
- font-size: 12pt;
-
- margin: auto;
- max-width: 640px;
- padding: 20px;
-}
-
-.header {
- height: 87px;
- border-bottom: 4px solid #e4f7ed;
-}
-
-.logo {
- float: right;
- margin-left: 20px;
-}
-
-.salutation {
- padding-top: 10px;
- font-weight: bold;
-}
-
-.summarytext {
-}
-
-.room_header {
- padding-top: 38px;
- padding-bottom: 10px;
- border-bottom: 1px solid #e5e5e5;
-}
-
-.room_header h2 {
- margin-top: 0px;
- margin-left: 75px;
- font-size: 20px;
-}
-
-.room_avatar {
- float: left;
- margin-top: -8px;
-}
-
-.room_avatar img {
- width: 48px;
- height: 48px;
- object-fit: cover;
- border-radius: 24px;
- margin-left: 7px;
-}
-
-.room_content {
- clear: left;
-}
-
-.notif {
- border-bottom: 1px solid #e5e5e5;
- margin-top: 16px;
- padding-bottom: 16px;
-}
-
-.historical {
- opacity: 0.3;
-}
-
-.message {
- position: relative;
- margin-bottom: 10px;
-}
-
-.sender_avatar {
- width: 32px;
- height: 32px;
- border-radius: 16px;
- position: absolute;
- margin-left: 14px;
- margin-top: -2px;
-}
-
-.sender_name {
- margin-left: 75px;
- display: inline;
- font-size: 13px;
- color: #a2a2a2;
-}
-
-.message_time {
- float: right;
- font-size: 11px;
- color: #a2a2a2;
-}
-
-.message_body {
- margin-left: 75px;
-}
-
-.notif_link {
- margin-left: 75px;
- font-weight: bold;
-}
-
-.notif_link a, .footer a {
- color: #76CFA6;
- text-decoration: none;
-}
-
-.footer {
- margin-top: 20px;
- text-align: center;
-}
diff --git a/res/templates-vector/notif.html b/res/templates-vector/notif.html
deleted file mode 100644
index 97ea425011..0000000000
--- a/res/templates-vector/notif.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<div class="notif">
- <div>
- {% for message in notif.messages %}
- <div class="message {% if message.is_historical %}historical{% endif %}">
- {% if message.sender_avatar_url %}
- <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" />
- {% elif message.sender_hash % 3 == 1 %}
- <img class="sender_avatar" src="https://vector.im/beta/img/50e2c2.png" />
- {% else %}
- <img class="sender_avatar" src="https://vector.im/beta/img/f4c371.png" />
- {% endif %}
- <img class="sender_avatar" src="{{ message.sender_avatar_url }}" />
- {% endif %}
- <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>
- </div>
- {% endfor %}
- </div>
- <div class="notif_link">
- <a href="{{ notif.link }}">View {{ room.title }}</a>
- </div>
-</div>
diff --git a/res/templates-vector/notif.txt b/res/templates-vector/notif.txt
deleted file mode 100644
index b515f394c3..0000000000
--- a/res/templates-vector/notif.txt
+++ /dev/null
@@ -1,12 +0,0 @@
-{% for message in notif.messages %}
-{{ message.sender_name }} ({{ message.ts|format_ts("%H:%M") }})
-{% if message.msgtype == "m.text" %}
-{{ message.body_text_plain }}
-{% elif message.msgtype == "m.image" %}
-{{ message.body_text_plain }}
-{% elif message.msgtype == "m.file" %}
-{{ message.body_text_plain }}
-{% endif %}
-{% endfor %}
-
-View at {{ notif.link }}
diff --git a/res/templates-vector/notif_mail.html b/res/templates-vector/notif_mail.html
deleted file mode 100644
index c49cc66548..0000000000
--- a/res/templates-vector/notif_mail.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!doctype html>
-<html lang="en">
- <head>
- <style type="text/css">
- {% include 'mail.css' without context %}
- </style>
- </head>
- <body>
- <div id="page">
- <div class="header">
- <img class="logo" src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
- <div class="salutation">Hi {{ user_display_name }},</div>
- <div class="summarytext">{{ summary_text }}</div>
- </div>
- <div class="content">
- {% for room in rooms %}
- {% include 'room.html' with context %}
- {% endfor %}
- </div>
- <div class="footer">
- <a href="{{ unsubscribe_link }}">Unsubscribe</a>
- </div>
- </div>
- </body>
-</html>
diff --git a/res/templates-vector/notif_mail.txt b/res/templates-vector/notif_mail.txt
deleted file mode 100644
index 24843042a5..0000000000
--- a/res/templates-vector/notif_mail.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-Hi {{ user_display_name }},
-
-{{ summary_text }}
-
-{% for room in rooms %}
-{% include 'room.txt' with context %}
-{% endfor %}
-
-You can disable these notifications at {{ unsubscribe_link }}
-
diff --git a/res/templates-vector/room.html b/res/templates-vector/room.html
deleted file mode 100644
index ab11492578..0000000000
--- a/res/templates-vector/room.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div class="room">
- <div class="room_header">
- <div class="room_avatar">
- {% if room.avatar_url %}
- <img alt="" src="{{ room.avatar_url|mxc_to_http(48,48) }}" />
- {% else %}
- {% if room.hash % 3 == 0 %}
- <img alt="" src="https://vector.im/beta/img/76cfa6.png" />
- {% elif room.hash % 3 == 1 %}
- <img alt="" src="https://vector.im/beta/img/50e2c2.png" />
- {% else %}
- <img alt="" src="https://vector.im/beta/img/f4c371.png" />
- {% endif %}
- {% endif %}
- </div>
- <h2>{{ room.title }}</h2>
- </div>
- <div class="room_content">
- {% if room.invite %}
- <a href="{{ room.link }}">Join the conversation.</a>
- {% else %}
- {% for notif in room.notifs %}
- {% include 'notif.html' with context %}
- {% endfor %}
- {% endif %}
- </div>
-</div>
diff --git a/res/templates-vector/room.txt b/res/templates-vector/room.txt
deleted file mode 100644
index 84648c710e..0000000000
--- a/res/templates-vector/room.txt
+++ /dev/null
@@ -1,9 +0,0 @@
-{{ room.title }}
-
-{% if room.invite %}
- You've been invited, join at {{ room.link }}
-{% else %}
- {% for notif in room.notifs %}
- {% include 'notif.txt' with context %}
- {% endfor %}
-{% endif %}
diff --git a/res/templates/mail.css b/res/templates/mail.css
index 61953ba51c..b02f509e58 100644
--- a/res/templates/mail.css
+++ b/res/templates/mail.css
@@ -1,21 +1,146 @@
+body {
+ margin: 0px;
+}
+
+#page {
+ font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+ font-color: #454545;
+ font-size: 12pt;
+ width: 100%;
+ padding: 20px;
+}
+
+#inner {
+ width: 640px;
+}
+
+.header {
+ width: 100%;
+ height: 87px;
+ color: #454545;
+ border-bottom: 4px solid #e5e5e5;
+}
+
+.logo {
+ text-align: right;
+ margin-left: 20px;
+}
+
+.salutation {
+ padding-top: 10px;
+ font-weight: bold;
+}
+
+.summarytext {
+}
+
+.room {
+ width: 100%;
+ color: #454545;
+ border-bottom: 1px solid #e5e5e5;
+}
+
+.room_header td {
+ padding-top: 38px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #e5e5e5;
+}
+
+.room_name {
+ vertical-align: middle;
+ font-size: 18px;
+ font-weight: bold;
+}
+
+.room_header h2 {
+ margin-top: 0px;
+ margin-left: 75px;
+ font-size: 20px;
+}
+
.room_avatar {
+ width: 56px;
+ line-height: 0px;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.room_avatar img {
width: 48px;
height: 48px;
- float: left;
+ object-fit: cover;
+ border-radius: 24px;
+}
+
+.notif {
+ border-bottom: 1px solid #e5e5e5;
+ margin-top: 16px;
+ padding-bottom: 16px;
+}
+
+.historical_message .sender_avatar {
+ opacity: 0.3;
+}
+
+/* spell out opacity and historical_message class names for Outlook aka Word */
+.historical_message .sender_name {
+ color: #e3e3e3;
+}
+
+.historical_message .message_time {
+ color: #e3e3e3;
+}
+
+.historical_message .message_body {
+ color: #c7c7c7;
+}
+
+.historical_message td,
+.message td {
+ padding-top: 10px;
}
-.room_content {
- clear: left;
+.sender_avatar {
+ width: 56px;
+ text-align: center;
+ vertical-align: top;
}
-.historical {
- color: #888;
+.sender_avatar img {
+ margin-top: -2px;
+ width: 32px;
+ height: 32px;
+ border-radius: 16px;
}
.sender_name {
display: inline;
+ font-size: 13px;
+ color: #a2a2a2;
}
.message_time {
- display: inline;
+ text-align: right;
+ width: 100px;
+ font-size: 11px;
+ color: #a2a2a2;
+}
+
+.message_body {
}
+
+.notif_link td {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ font-weight: bold;
+}
+
+.notif_link a, .footer a {
+ color: #454545;
+ text-decoration: none;
+}
+
+.footer {
+ margin-top: 20px;
+ text-align: center;
+}
\ No newline at end of file
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>
diff --git a/res/templates/notif.txt b/res/templates/notif.txt
index b515f394c3..a3ddac80ce 100644
--- a/res/templates/notif.txt
+++ b/res/templates/notif.txt
@@ -9,4 +9,4 @@
{% endif %}
{% endfor %}
-View at {{ notif.link }}
+View {{ room.title }} at {{ notif.link }}
diff --git a/res/templates/notif_mail.html b/res/templates/notif_mail.html
index cc3573e65a..4034f3c601 100644
--- a/res/templates/notif_mail.html
+++ b/res/templates/notif_mail.html
@@ -3,20 +3,38 @@
<head>
<style type="text/css">
{% include 'mail.css' without context %}
+ {% include "mail-%s.css" % app_name ignore missing without context %}
</style>
</head>
<body>
- <div id="page">
- <div className="salutation">Hi {{ user_display_name }},</div>
- <div className="summarytext">{{ summary_text }}</div>
- <div class="content">
- {% for room in rooms %}
- {% include 'room.html' with context %}
- {% endfor %}
- </div>
- <div class="footer">
- <a href="{{ unsubscribe_link }}">Unsubscribe</a>
- </div>
- </div>
+ <table id="page">
+ <tr>
+ <td> </td>
+ <td id="inner">
+ <table class="header">
+ <tr>
+ <td>
+ <div class="salutation">Hi {{ user_display_name }},</div>
+ <div class="summarytext">{{ summary_text }}</div>
+ </td>
+ <td class="logo">
+ {% if app_name == "Vector" %}
+ <img src="http://matrix.org/img/vector-logo-email.png" width="64" height="83" alt="[Vector]"/>
+ {% else %}
+ <img src="http://matrix.org/img/matrix-94px-white.png" width="94" height="40" alt="[matrix]"/>
+ {% endif %}
+ </td>
+ </tr>
+ </table>
+ {% for room in rooms %}
+ {% include 'room.html' with context %}
+ {% endfor %}
+ <div class="footer">
+ <a href="{{ unsubscribe_link }}">Unsubscribe</a>
+ </div>
+ </td>
+ <td> </td>
+ </tr>
+ </table>
</body>
</html>
diff --git a/res/templates/room.html b/res/templates/room.html
index 3c0a4607b3..723c222d25 100644
--- a/res/templates/room.html
+++ b/res/templates/room.html
@@ -1,25 +1,33 @@
-<div class="room">
- <div class="room_avatar">
- {% if room.avatar_url %}
- <img src="{{ room.avatar_url|mxc_to_http(48,48) }}" />
- {% else %}
- {% if room.hash % 3 == 0 %}
- <img src="https://vector.im/beta/img/76cfa6.png" />
- {% elif room.hash % 3 == 1 %}
- <img src="https://vector.im/beta/img/50e2c2.png" />
+<table class="room">
+ <tr class="room_header">
+ <td class="room_avatar">
+ {% if room.avatar_url %}
+ <img alt="" src="{{ room.avatar_url|mxc_to_http(48,48) }}" />
{% else %}
- <img src="https://vector.im/beta/img/f4c371.png" />
+ {% if room.hash % 3 == 0 %}
+ <img alt="" src="https://vector.im/beta/img/76cfa6.png" />
+ {% elif room.hash % 3 == 1 %}
+ <img alt="" src="https://vector.im/beta/img/50e2c2.png" />
+ {% else %}
+ <img alt="" src="https://vector.im/beta/img/f4c371.png" />
+ {% endif %}
{% endif %}
- {% endif %}
- </div>
- <h2>{{ room.title }}</h2>
- <div class="room_content">
- {% if room.invite %}
- <a href="{{ room.link }}">Join the conversation.</a>
- {% else %}
- {% for notif in room.notifs %}
- {% include 'notif.html' with context %}
- {% endfor %}
- {% endif %}
- </div>
-</div>
+ </td>
+ <td class="room_name" colspan="2">
+ {{ room.title }}
+ </td>
+ </tr>
+ {% if room.invite %}
+ <tr>
+ <td></td>
+ <td>
+ <a href="{{ room.link }}">Join the conversation.</a>
+ </td>
+ <td></td>
+ </tr>
+ {% else %}
+ {% for notif in room.notifs %}
+ {% include 'notif.html' with context %}
+ {% endfor %}
+ {% endif %}
+</table>
|
