fix: when newRowAfter set for gallery fill with empty same width cells

rocketbase-io · Apr 3, 2022 · fee36ec · fee36ec
1 parent c68ca23
commit fee36ec
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/email-template-builder/src/main/java/io/rocketbase/mail/GalleryLine.java b/email-template-builder/src/main/java/io/rocketbase/mail/GalleryLine.java
@@ -95,6 +95,28 @@ public GalleryLine verticalAlign(VerticalAlignment verticalAlignment) {
         return this;
     }
 
+    /**
+     * used only by template to easyily fill empty cells
+     */
+    public List<String> getEmptyCells() {
+        List<String> result = new ArrayList<>();
+        if (photoElements != null && !photoElements.isEmpty() && newRowAfter != null) {
+            int startModulo = (photoElements.size() % (newRowAfter + 1));
+            if (startModulo > 0) {
+                for (int x = startModulo; x < newRowAfter; x++) {
+                    result.add("");
+                }
+            }
+        }
+        return result;
+    }
+
+    /**
+     * used only by template to easyily fill empty cells
+     */
+    public String getColumnWidth() {
+        return newRowAfter == null ? null : (Math.round(10000.0/(newRowAfter.intValue() * 1.0))/100.0+"%");
+    }
 
     @Override
     public TemplateLineType getType() {

diff --git a/email-template-builder/src/main/resources/templates/email/layout.html b/email-template-builder/src/main/resources/templates/email/layout.html
@@ -484,7 +484,7 @@
 
             {% for photo in line.photoElements %}
             {% if (loop.index % perRowCount) == 0 %}<tr>{% endif %}
-                <td width="100%" align="{{- line.alignment | default('center') -}}"  style="color: {{ c.font.table.color | default('#333333') }}; font-family: {{ c.font.family | default("'Nunito Sans', Helvetica, Arial, sans-serif") | raw }}; font-size: {{ c.font.table.size | default('16px') }}; word-break: break-word; vertical-align: {{ line.contentVerticalAlign.value }};">
+                <td {% if line.columnWidth is not empty %}width="{{- line.columnWidth -}}"{% endif %}} align="{{- line.alignment | default('center') -}}"  style="color: {{ c.font.table.color | default('#333333') }}; font-family: {{ c.font.family | default("'Nunito Sans', Helvetica, Arial, sans-serif") | raw }}; font-size: {{ c.font.table.size | default('16px') }}; word-break: break-word; vertical-align: {{ line.contentVerticalAlign.value }};">
 
                     {% if photo.linkUrl is not empty %}<a target="_blank" href="{{- photo.linkUrl | raw -}}" style="color: {{ c.text.linkColor | default('#3869D4') }};">{% endif %}
                       {% if c.darkModeEnabled and photo.srcDark is not empty %}<img  class="dark-img"border="0" vspace="0" hspace="0" src="{{- photo.srcDark | raw -}}" alt="{{- photo.alt | default('') -}}" title="{{- photo.title | escape -}}" {% if not c.content.full %}width="{{- ((c.content.width-(line.cellPadding*(perRowCount+1))-(line.cellSpacing*(perRowCount+1)))/perRowCount) -}}"{% endif %} style="border: none;">{% endif %}
@@ -496,7 +496,12 @@
                     {% endfor %}
 
                 </td>
-            {% if ((loop.index+1) % perRowCount) == 0 or loop.last %}</tr>{% endif %}
+            {% if ((loop.index+1) % perRowCount) == 0 %}</tr>{% endif %}
+            {% endfor %}
+
+            {% for c in line.emptyCells %}
+                <td {% if line.columnWidth is not empty %}width="{{- line.columnWidth -}}"{% endif %}}>&nbsp;</td>
+                {% if loop.last %}</tr>{% endif %}
             {% endfor %}
         </table>
 

diff --git a/email-template-builder/src/test/java/io/rocketbase/mail/EmailTemplateBuilderTest.java b/email-template-builder/src/test/java/io/rocketbase/mail/EmailTemplateBuilderTest.java
@@ -157,6 +157,12 @@ public void gallery() {
                 .photos(Arrays.asList("https://source.unsplash.com/random/800x600?sig=1", "https://source.unsplash.com/random/800x600?sig=2", "https://source.unsplash.com/random/800x600?sig=3", "https://source.unsplash.com/random/800x600?sig=4", "https://source.unsplash.com/random/800x600?sig=5","https://source.unsplash.com/random/800x600?sig=6","https://source.unsplash.com/random/800x600?sig=7"))
                 .and()
 
+                .gallery()
+                .newRowAfter(3)
+                .cellPadding(5)
+                .photos(Arrays.asList("https://source.unsplash.com/random/800x600?sig=1"))
+                .and()
+
                 .button("Here could be an action", "http://localhost").blue().and()
                 .text("Would be great if you could click :)").and()