First cut at Vector-branded mail templates

7 files changed, 229 insertions, 0 deletions

diff --git a/res/templates-vector/mail.css b/res/templates-vector/mail.css
new file mode 100644
index 0000000000..642948fdc1
--- /dev/null
+++ b/res/templates-vector/mail.css
@@ -0,0 +1,112 @@
+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-weight: bold;
+}
+
+.message_time  {
+    float: right;
+}
+
+.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
new file mode 100644
index 0000000000..97ea425011
--- /dev/null
+++ b/res/templates-vector/notif.html
@@ -0,0 +1,34 @@
+<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
new file mode 100644
index 0000000000..b515f394c3
--- /dev/null
+++ b/res/templates-vector/notif.txt
@@ -0,0 +1,12 @@
+{% 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
new file mode 100644
index 0000000000..86e7b6e867
--- /dev/null
+++ b/res/templates-vector/notif_mail.html
@@ -0,0 +1,25 @@
+<!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|replace("%app%", "Vector") }}</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
new file mode 100644
index 0000000000..24843042a5
--- /dev/null
+++ b/res/templates-vector/notif_mail.txt
@@ -0,0 +1,10 @@
+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
new file mode 100644
index 0000000000..ab11492578
--- /dev/null
+++ b/res/templates-vector/room.html
@@ -0,0 +1,27 @@
+<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
new file mode 100644
index 0000000000..84648c710e
--- /dev/null
+++ b/res/templates-vector/room.txt
@@ -0,0 +1,9 @@
+{{ 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 %}