From 3c39fa89027452cc4472ceb85d5d91a254cb2f50 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 5 May 2016 01:58:58 +0100 Subject: [PATCH] First cut at Vector-branded mail templates --- res/templates-vector/mail.css | 112 +++++++++++++++++++++++++++ res/templates-vector/notif.html | 34 ++++++++ res/templates-vector/notif.txt | 12 +++ res/templates-vector/notif_mail.html | 25 ++++++ res/templates-vector/notif_mail.txt | 10 +++ res/templates-vector/room.html | 27 +++++++ res/templates-vector/room.txt | 9 +++ 7 files changed, 229 insertions(+) create mode 100644 res/templates-vector/mail.css create mode 100644 res/templates-vector/notif.html create mode 100644 res/templates-vector/notif.txt create mode 100644 res/templates-vector/notif_mail.html create mode 100644 res/templates-vector/notif_mail.txt create mode 100644 res/templates-vector/room.html create mode 100644 res/templates-vector/room.txt diff --git a/res/templates-vector/mail.css b/res/templates-vector/mail.css new file mode 100644 index 000000000..642948fdc --- /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 000000000..97ea42501 --- /dev/null +++ b/res/templates-vector/notif.html @@ -0,0 +1,34 @@ +
+
+ {% for message in notif.messages %} +
+ {% if message.sender_avatar_url %} + + {% else %} + {% if message.sender_hash % 3 == 0 %} + + {% elif message.sender_hash % 3 == 1 %} + + {% else %} + + {% endif %} + + {% endif %} +
{{ message.sender_name }}
+
{{ message.ts|format_ts("%H:%M") }}
+
+ {% if message.msgtype == "m.text" %} + {{ message.body_text_html }} + {% elif message.msgtype == "m.image" %} + + {% elif message.msgtype == "m.file" %} + {{ message.body_text_plain }} + {% endif %} +
+
+ {% endfor %} +
+
+ View {{ room.title }} +
+
diff --git a/res/templates-vector/notif.txt b/res/templates-vector/notif.txt new file mode 100644 index 000000000..b515f394c --- /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 000000000..86e7b6e86 --- /dev/null +++ b/res/templates-vector/notif_mail.html @@ -0,0 +1,25 @@ + + + + + + +
+
+ +
Hi {{ user_display_name }},
+
{{ summary_text|replace("%app%", "Vector") }}
+
+
+ {% for room in rooms %} + {% include 'room.html' with context %} + {% endfor %} +
+
+ Unsubscribe +
+
+ + diff --git a/res/templates-vector/notif_mail.txt b/res/templates-vector/notif_mail.txt new file mode 100644 index 000000000..24843042a --- /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 000000000..ab1149257 --- /dev/null +++ b/res/templates-vector/room.html @@ -0,0 +1,27 @@ +
+
+
+ {% if room.avatar_url %} + + {% else %} + {% if room.hash % 3 == 0 %} + + {% elif room.hash % 3 == 1 %} + + {% else %} + + {% endif %} + {% endif %} +
+

{{ room.title }}

+
+
+ {% if room.invite %} + Join the conversation. + {% else %} + {% for notif in room.notifs %} + {% include 'notif.html' with context %} + {% endfor %} + {% endif %} +
+
diff --git a/res/templates-vector/room.txt b/res/templates-vector/room.txt new file mode 100644 index 000000000..84648c710 --- /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 %}