Home Esplora Aiuto
Accedi
RISCI_ATOM
/
synapse
mirror da https://github.com/matrix-org/synapse.git
1
0
Forka 0
File Problemi 3 Wiki
Sfoglia il codice sorgente

First cut at Vector-branded mail templates

Matthew Hodgson 8 anni fa
parent
ce81ccb063
commit
3c39fa8902
7 ha cambiato i file con 229 aggiunte e 0 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 112 0
      res/templates-vector/mail.css
  2. 34 0
      res/templates-vector/notif.html
  3. 12 0
      res/templates-vector/notif.txt
  4. 25 0
      res/templates-vector/notif_mail.html
  5. 10 0
      res/templates-vector/notif_mail.txt
  6. 27 0
      res/templates-vector/room.html
  7. 9 0
      res/templates-vector/room.txt

+ 112 - 0
res/templates-vector/mail.css
Vedi File 

@@ -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;
 
+}

+ 34 - 0
res/templates-vector/notif.html
Vedi File 

@@ -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>

+ 12 - 0
res/templates-vector/notif.txt
Vedi File 

@@ -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 }}

+ 25 - 0
res/templates-vector/notif_mail.html
Vedi File 

@@ -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>

+ 10 - 0
res/templates-vector/notif_mail.txt
Vedi File 

@@ -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 }}
 
+

+ 27 - 0
res/templates-vector/room.html
Vedi File 

@@ -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>

+ 9 - 0
res/templates-vector/room.txt
Vedi File 

@@ -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 %}