[#2059] Cleaned up tables, linked to different maileditor PR

maykinmedia · Feb 8, 2024 · a047754 · a047754
1 parent e52758d
commit a047754
Show file tree

Hide file tree

Showing 12 changed files with 238 additions and 251 deletions.
diff --git a/requirements/base.in b/requirements/base.in
@@ -38,7 +38,7 @@ django-view-breadcrumbs
 markdown
 django_better_admin_arrayfield
 humanfriendly
-git+https://github.com/maykinmedia/mail-editor.git@8e287350acd8dd4adb7b391dd0152b0e90199165#egg=mail-editor
+git+https://github.com/maykinmedia/mail-editor.git@b414db1052b832638e35b6ab77804996a517c3bf#egg=mail-editor
 fontawesomefree
 django-timeline-logger
 django-csp

diff --git a/requirements/base.txt b/requirements/base.txt
@@ -347,7 +347,7 @@ lxml==4.9.1
     #   maykin-python3-saml
     #   svglib
     #   xmlsec
-mail-editor @ git+https://github.com/maykinmedia/mail-editor.git@8e287350acd8dd4adb7b391dd0152b0e90199165
+mail-editor @ git+https://github.com/maykinmedia/mail-editor.git@b414db1052b832638e35b6ab77804996a517c3bf
     # via -r requirements/base.in
 mail-parser==3.15.0
     # via django-yubin

diff --git a/requirements/ci.txt b/requirements/ci.txt
@@ -607,7 +607,7 @@ lxml==4.9.1
     #   pyquery
     #   svglib
     #   xmlsec
-mail-editor @ git+https://github.com/maykinmedia/mail-editor.git@8e287350acd8dd4adb7b391dd0152b0e90199165
+mail-editor @ git+https://github.com/maykinmedia/mail-editor.git@b414db1052b832638e35b6ab77804996a517c3bf
     # via
     #   -c requirements/base.txt
     #   -r requirements/base.txt

diff --git a/requirements/dev.txt b/requirements/dev.txt
@@ -698,7 +698,7 @@ lxml==4.9.1
     #   pyquery
     #   svglib
     #   xmlsec
-mail-editor @ git+https://github.com/maykinmedia/mail-editor.git@8e287350acd8dd4adb7b391dd0152b0e90199165
+mail-editor @ git+https://github.com/maykinmedia/mail-editor.git@b414db1052b832638e35b6ab77804996a517c3bf
     # via
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt
@@ -1146,7 +1146,7 @@ xlwt==1.3.0
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt
     #   tablib
-xmlsec==1.3.12
+# xmlsec==1.3.12
     # via
     #   -c requirements/ci.txt
     #   -r requirements/ci.txt

diff --git a/src/open_inwoner/conf/parts/case_status_notification.html b/src/open_inwoner/conf/parts/case_status_notification.html
@@ -1,34 +1,46 @@
-<table border="0" cellspacing="0" width="100%" class="table-mail">
+<table border="0" width="100%" class="table-mail">
     <tbody>
     <tr>
         <td class="td-mail td__padding-all" colspan="6">
             <p>Beste inwoner,</p>
-            <p>Er is een update over &eacute;&eacute;n van uw aanvragen beschikbaar:</p>
+            <p>Er is iets veranderd in &eacute;&eacute;n van uw aanvragen.</p>
         </td>
     </tr>
     <tr>
         <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
-        <!--[if mso]>
-            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ case_link }}" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#ffffff" fillcolor="#ffffff">
-                <w:anchorlock/>
-                <span style="color:#704000;font-family:'Lato','Helvetica',Arial,sans-serif;font-size:16px;">Upload documenten</span>
-            </v:roundrect>
-        <![endif]-->
-            <div style="mso-hide:all;" class="td-mail__bg-white">
+            <h1>Nieuw:</h1>
+        </td>
+    </tr>
+    <tr>
+        <td class="td-mail td-mail__bg-info td__padding-all" colspan="3">
+            <p><span class="text-color__small-gray-900">Aanvraag: </span></p>
+            <h2 class="heading-font">{{ type_description }}</h2>
+        </td>
+        <td class="td-mail td-mail__bg-info td__padding-all" colspan="3">
+            <p><span class="text-color__small-gray-900">Zaaknummer: </span><br/>{{ identification }}</p>
+        </td>
+    </tr>
+
+    <!-- Table with different column-widths -->
+    <tr>
+        <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
+            <div class="td-mail__bg-white">
                 <p>
-                <table border="0" cellspacing="0" width="100%">
+                <table border="0" width="100%">
                     <tr>
-                        <td width="35" class="td-mail td__padding-left td__padding-top align-center">
-                            <p><img src="/static/img/mail/info_info-blue.jpg" alt=""></p>
+                        <td width="35" class="td-mail td__padding-left align-center">
+                            <img src="/static/img/mail/info_info-blue.jpg" alt="">
                         </td>
                         <td class="td__padding-top td__padding-right td__padding-bottom">
-                            <p class="text-color__danger">De status is gewijzigd naar <span class="status_current"><strong>{{ case.status_title }} case.status_title</strong></span>.</p>
+                            <p class="text-color__info">De status is gewijzigd naar {{ case_status }}.</p>
                         </td>
                     </tr>
                 </table>
             </div>
         </td>
     </tr>
+    <!-- end of Table with differing column-widths -->
+
     <tr>
         <td class="td-mail td-mail__bg-info td__padding-all" colspan="6">
             <p>U hoeft niets te doen. Zodra er weer een update beschikbaar is ontvangt u hier een melding over. U kunt wel inloggen om uw aanvraag te bekijken.</p>
@@ -40,12 +52,10 @@
             <p>Met vriendelijke groet,</p>
             <p>&nbsp;</p>
             <p>{{ site_name }}</p>
-            <p>&nbsp;</p>
-            <p>&nbsp;</p>
         </td>
     </tr>
-    <tr class="tr-mail border-top">
-        <td class="td-mail border-top td__padding-zero" colspan="6">
+    <tr class="tr-mail">
+        <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
             <!-- <hr> styling --> &nbsp;
         </td>
     </tr>
@@ -54,15 +64,12 @@
             <p>Dit bericht is automatisch verzonden. U kunt <strong>niet reageren</strong> op deze e-mail. </p>
             <p>&nbsp;</p>
             <p><strong>Contact opnemen</strong></p>
-            <p>
-                Wilt u contact opnemen met ons?
-            </p>
         </td>
     </tr>
     <tr>
-        <td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="https://example.com/contactformulier/" class="color--secondary">Bekijk onze contactpagina</a>
+        <td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="https://example.com/contactformulier/" class="color--secondary">Ga naar onze contactpagina</a>
         </td>
-        <td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="tel:+14050" class="color--secondary">Bel naar 14050</a></td>
+        <td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="tel:+14050" class="color--secondary">Bel 14050</a></td>
     </tr>
     <tr class="tr-mail border-top">
         <td class="td-mail border-top td__padding-zero" colspan="6">

diff --git a/src/open_inwoner/conf/parts/case_status_notification_action_required.html b/src/open_inwoner/conf/parts/case_status_notification_action_required.html
@@ -1,15 +1,14 @@
-<table border="0" cellspacing="0" width="100%" class="table-mail">
+<table border="0" width="100%" class="table-mail">
     <tbody>
-
     <tr>
         <td class="td-mail td__padding-all" colspan="6">
             <p>Beste inwoner,</p>
-            <p>Er is een update over &eacute;&eacute;n van uw aanvragen beschikbaar:</p>
+            <p>Er is iets veranderd in &eacute;&eacute;n van uw aanvragen.</p>
         </td>
     </tr>
     <tr>
         <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
-            <h1>Update</h1>
+            <h1>Nieuw:</h1>
         </td>
     </tr>
     <tr>
@@ -23,22 +22,16 @@ <h2 class="heading-font">{{ type_description }}</h2>
     </tr>
     <tr>
         <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
-        <!--[if mso]>
-        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ case_link }}" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#ffffff" fillcolor="#ffffff">
-            <w:anchorlock/>
-            <span style="color:#704000;font-family:'Lato','Helvetica',Arial,sans-serif;font-size:16px;">Upload documenten</span>
-        </v:roundrect>
-        <![endif]-->
-            <div style="mso-hide:all;" class="td-mail__bg-white">
+            <div class="td-mail__bg-white">
                 <p>
-                <table border="0" cellspacing="0" width="100%">
+                <table border="0" width="100%">
                     <tr>
-                        <td width="35" class="td-mail td__padding-left td__padding-top align-center">
-                            <p><img src="/static/img/mail/alarm_danger-orange.jpg" alt=""></p>
+                        <td width="35" class="td-mail td__padding-left align-center">
+                            <img src="/static/img/mail/alarm_danger-orange.jpg" alt="">
                         </td>
                         <td class="td__padding-top td__padding-right td__padding-bottom">
                             <p class="text-color__danger"><strong>Wij hebben documenten van u nodig</strong><br>
-                                Upload de documenten tot {{ datum }} 2024</p>
+                                Upload de documenten tot {{ end_date }}</p>
                         </td>
                     </tr>
                 </table>
@@ -47,13 +40,7 @@ <h2 class="heading-font">{{ type_description }}</h2>
     </tr>
     <tr>
         <td class="td-mail td-mail__bg-danger td__padding-all" colspan="6">
-        <!--[if mso]>
-        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ case_link }}" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#0065BD" fillcolor="#0065BD">
-            <w:anchorlock/>
-            <center style="color:#ffffff;font-family:'Lato','Helvetica',Arial,sans-serif;font-size:16px;">Upload documenten</center>
-        </v:roundrect>
-        <![endif]-->
-        <a href="{{ case_link }}" style="mso-hide:all;" class="button--primary">Upload documenten</a>
+            <a href="{{ case_link }}" class="button--primary">Upload documenten</a>
         </td>
     </tr>
     <tr>
@@ -67,12 +54,10 @@ <h2 class="heading-font">{{ type_description }}</h2>
             <p>Met vriendelijke groet,</p>
             <p>&nbsp;</p>
             <p>{{ site_name }}</p>
-            <p>&nbsp;</p>
-            <p>&nbsp;</p>
         </td>
     </tr>
-    <tr class="tr-mail border-top">
-        <td class="td-mail border-top td__padding-zero" colspan="6">
+    <tr class="tr-mail">
+        <td class="td-mail spacer-bottom td__padding-zero" colspan="6">
             <!-- <hr> styling --> &nbsp;
         </td>
     </tr>
@@ -81,15 +66,12 @@ <h2 class="heading-font">{{ type_description }}</h2>
             <p>Dit bericht is automatisch verzonden. U kunt <strong>niet reageren</strong> op deze e-mail. </p>
             <p>&nbsp;</p>
             <p><strong>Contact opnemen</strong></p>
-            <p>
-                Wilt u contact opnemen met ons?
-            </p>
         </td>
     </tr>
     <tr>
-        <td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="https://example.com/contactformulier/" class="color--secondary">Bekijk onze contactpagina</a>
+        <td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="https://example.com/contactformulier/" class="color--secondary">Ga naar onze contactpagina</a>
         </td>
-        <td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="tel:+14050" class="color--secondary">Bel naar 14050</a></td>
+        <td class="td-mail td__padding-right td__padding-bottom td__padding-left" colspan="3"><a href="tel:+14050" class="color--secondary">Bel 14050</a></td>
     </tr>
     <tr class="tr-mail border-top">
         <td class="td-mail border-top td__padding-zero" colspan="6">

diff --git a/src/open_inwoner/conf/parts/contactform_registration.html b/src/open_inwoner/conf/parts/contactform_registration.html
@@ -1,29 +1,34 @@
-<p>Beste</p>
-
 <table>
     <tr>
-        <th>Onderwerp:</th>
-        <td>{{ subject }}</td>
-    </tr>
-    <tr>
-        <th>Naam:</th>
-        <td>{{ name }}</td>
-    </tr>
-    <tr>
-        <th>Email:</th>
-        <td>{{ email }}</td>
-    </tr>
-    <tr>
-        <th>Telefoonnummer:</th>
-        <td>{{ phonenumber }}</td>
-    </tr>
-    <tr>
-        <th colspan="2">Vraag:</th>
-    </tr>
-    <tr>
-        <td colspan="2">{{ question }}</td>
+        <td><p>Beste</p>
+
+            <table>
+                <tr>
+                    <th>Onderwerp:</th>
+                    <td>{{ subject }}</td>
+                </tr>
+                <tr>
+                    <th>Naam:</th>
+                    <td>{{ name }}</td>
+                </tr>
+                <tr>
+                    <th>Email:</th>
+                    <td>{{ email }}</td>
+                </tr>
+                <tr>
+                    <th>Telefoonnummer:</th>
+                    <td>{{ phonenumber }}</td>
+                </tr>
+                <tr>
+                    <th colspan="2">Vraag:</th>
+                </tr>
+                <tr>
+                    <td colspan="2">{{ question }}</td>
+                </tr>
+            </table>
+
+            <p>Met vriendelijke groet,
+                {{ site_name }} </p>
+        </td>
     </tr>
 </table>
-
-<p>Met vriendelijke groet,
-    {{ site_name }} </p>
diff --git a/src/open_inwoner/conf/parts/maileditor.py b/src/open_inwoner/conf/parts/maileditor.py
@@ -220,6 +220,10 @@ def _readfile(name):
                 "name": "case_link",
                 "description": _("The link to the case details."),
             },
+            # {
+            #     "name": "start_date",
+            #     "description": _("The start date of the case"),
+            # },
             {
                 "name": "end_date",
                 "description": _("The planned final date of the case"),
@@ -236,22 +240,6 @@ def _readfile(name):
                 "name": "site_name",
                 "description": _("Name of the site"),
             },
-            {
-                "name": "footer.logo_url",
-                "description": _("URL of the site logo."),
-            },
-            {
-                "name": "theming.accent",
-                "description": _("Configured accent background color"),
-            },
-            {
-                "name": "theming.primary",
-                "description": _("Configured primary background color"),
-            },
-            {
-                "name": "theming.secondary",
-                "description": _("Configured secondary background color"),
-            },
         ],
     },
     "case_document_notification": {

diff --git a/src/open_inwoner/static/img/mail/open-link.svg b/src/open_inwoner/static/img/mail/open-link.svg
diff --git a/src/open_inwoner/static/img/mail/receiver.svg b/src/open_inwoner/static/img/mail/receiver.svg