feat: improved margin of text within image-gallery + imageSide

rocketbase-io · May 31, 2021 · 982c918 · 982c918
1 parent d9c7ca3
commit 982c918
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 8 deletions.
diff --git a/email-template-builder/src/main/java/io/rocketbase/mail/config/TbConfiguration.java b/email-template-builder/src/main/java/io/rocketbase/mail/config/TbConfiguration.java
@@ -10,6 +10,7 @@ public class TbConfiguration {
 
     static final TbConfiguration DEFAULT = new TbConfiguration(TbFontConfig.newInstance(),
             TbTextConfig.newInstance(),
+            TbTextConfig.newInstanceSmall(),
             TbButtonConfig.newInstance(),
             TbAttributeConfig.newInstance(),
             TbBoxConfig.newInstance(),
@@ -25,6 +26,7 @@ public static final TbConfiguration newInstance() {
 
     private TbFontConfig font;
     private TbTextConfig text;
+    private TbTextConfig imageText;
     private TbButtonConfig button;
     private TbAttributeConfig attribute;
     private TbBoxConfig box;
@@ -37,6 +39,7 @@ public static final TbConfiguration newInstance() {
     public TbConfiguration(TbConfiguration other) {
         this.font = new TbFontConfig(other.font);
         this.text = new TbTextConfig(other.text);
+        this.imageText = new TbTextConfig(other.imageText);
         this.button = new TbButtonConfig(other.button);
         this.attribute = new TbAttributeConfig(other.attribute);
         this.box = new TbBoxConfig(other.box);

diff --git a/email-template-builder/src/main/java/io/rocketbase/mail/config/config/TbTextConfig.java b/email-template-builder/src/main/java/io/rocketbase/mail/config/config/TbTextConfig.java
@@ -11,10 +11,19 @@ public class TbTextConfig extends TbFont {
             "1.625",
             "#3869D4");
 
+    static final TbTextConfig SMALL = new TbTextConfig(new TbFont("16px", "#51545E"),
+            ".4em 0 .4em",
+            "1.325",
+            "#3869D4");
+
     public static final TbTextConfig newInstance() {
         return new TbTextConfig(DEFAULT);
     }
 
+    public static final TbTextConfig newInstanceSmall() {
+        return new TbTextConfig(SMALL);
+    }
+
     private String margin;
     private String lineHeight;
     private String linkColor;

diff --git a/email-template-builder/src/main/resources/templates/email/layout.html b/email-template-builder/src/main/resources/templates/email/layout.html
@@ -243,10 +243,22 @@
             padding: 0;
         }
 
+        .body-side-image {
+            width: 100%;
+            padding: 0;
+        }
+
         .body-gallery {;
             padding: 0;
         }
 
+        .body-side-image p,
+        .body-gallery p {
+            color: {{ c.imageText.color | default('#51545E') }};
+            margin: {{ c.imageText.margin | default('.4em 0 .4em') }};
+            line-height: {{ c.imageText.lineHeight | default('1.325') }};
+        }
+
         .body-sub {
             margin-top: 25px;
             padding-top: 25px;
@@ -393,7 +405,7 @@
         </table>
 
     {% elseif line.type == 'SIDE_IMAGE' %}
-        <table class="body-image" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="margin: {{ line.margin | default('margin: 20px auto') }}; padding: 0;" border="0">
+        <table class="body-side-image" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="margin: {{ line.margin | default('margin: 20px auto') }}; padding: 0;" border="0">
             <tr>
                 {% if line.side == 'LEFT' %}
                 <td align="left" 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.imageVerticalAlign.value }}">
@@ -410,10 +422,10 @@
                     <hr {% if subLine.margin is not empty %}style="margin: {{ subLine.margin}}" {% endif %}>
 
                     {% elseif subLine.type == 'TEXT' %}
-                    <p class="f-fallback" style="{% if subLine.alignment is not empty %}text-align: {{ subLine.alignment.value }}; {% endif %}{% if subLine.fontWeight is not empty %}font-weight: {{ subLine.fontWeight.value }}{% endif %}; {% if subLine.fontStyle is not empty %}font-style: {{ subLine.fontStyle.value }}{% endif %}; {% if subLine.textDecoration is not empty %}text-decoration: {{ subLine.textDecoration.value }}{% endif %}; color: {{ subLine.color | default(c.text.color) | default('#51545E') }}; font-size: {{ subLine.fontSize | default(c.text.size) | default('16px') }}; line-height: {{ c.text.lineHeight | default('1.625') }}; margin: {{ c.text.margin | default('.4em 0 1.1875em') }};">{% if subLine.linkUrl is not empty %}<a target="_blank" href="{{- subLine.linkUrl | raw -}}" style="color: {{ subLine.color | default(c.text.linkColor) | default('#3869D4')  }};">{% endif %}{{ subLine.text | escape | br | raw }}{% if subLine.linkUrl is not empty %}</a>{% endif %}</p>
+                    <p class="f-fallback" style="{% if subLine.alignment is not empty %}text-align: {{ subLine.alignment.value }}; {% endif %}{% if subLine.fontWeight is not empty %}font-weight: {{ subLine.fontWeight.value }}{% endif %}; {% if subLine.fontStyle is not empty %}font-style: {{ subLine.fontStyle.value }}{% endif %}; {% if subLine.textDecoration is not empty %}text-decoration: {{ subLine.textDecoration.value }}{% endif %}; color: {{ subLine.color | default(c.imageText.color) | default('#51545E') }}; font-size: {{ subLine.fontSize | default(c.imageText.size) | default('16px') }}; line-height: {{ c.imageText.lineHeight | default('1.325') }}; margin: {{ c.imageText.margin | default('.4em 0 .4em') }};">{% if subLine.linkUrl is not empty %}<a target="_blank" href="{{- subLine.linkUrl | raw -}}" style="color: {{ subLine.color | default(c.imageText.linkColor) | default('#3869D4')  }};">{% endif %}{{ subLine.text | escape | br | raw }}{% if subLine.linkUrl is not empty %}</a>{% endif %}</p>
 
                     {% elseif subLine.type == 'HTML' %}
-                    <p class="f-fallback" style="color: {{ c.text.color | default('#51545E') }}; line-height: {{ c.text.lineHeight | default('1.625') }}; margin: {{ c.text.margin | default('.4em 0 1.1875em') }};">{{ subLine.html | raw }}</p>
+                    <p class="f-fallback" style="color: {{ c.imageText.color | default('#51545E') }}; line-height: {{ c.imageText.lineHeight | default('1.625') }}; margin: {{ c.imageText.margin | default('.4em 0 .4em') }};">{{ subLine.html | raw }}</p>
 
                     {% elseif subLine.type == 'BUTTON' %}
                     <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="margin: 30px auto; padding: 0; text-align: center;" border="0">
@@ -458,7 +470,7 @@
                     {% if photo.linkUrl is not empty %}</a>{% endif %}
 
                     {% for text in photo.textLines %}
-                    <p class="f-fallback" style="{% if text.alignment is not empty %}text-align: {{ text.alignment.value }}; {% endif %}{% if text.fontWeight is not empty %}font-weight: {{ text.fontWeight.value }}{% endif %}; {% if text.fontStyle is not empty %}font-style: {{ text.fontStyle.value }}{% endif %}; {% if text.textDecoration is not empty %}text-decoration: {{ text.textDecoration.value }}{% endif %}; color: {{ text.color | default(c.text.color) | default('#51545E') }}; font-size: {{ text.fontSize | default(c.text.size) | default('16px') }}; line-height: {{ c.text.lineHeight | default('1.625') }}; margin: {{ c.text.margin | default('.4em 0 1.1875em') }};">{% if text.linkUrl is not empty %}<a target="_blank" href="{{- text.linkUrl | raw -}}" style="color: {{ text.color | default(c.text.linkColor) | default('#3869D4')  }};">{% endif %}{{ text.text | escape | br | raw }}{% if text.linkUrl is not empty %}</a>{% endif %}</p>
+                    <p class="f-fallback" style="{% if text.alignment is not empty %}text-align: {{ text.alignment.value }}; {% endif %}{% if text.fontWeight is not empty %}font-weight: {{ text.fontWeight.value }}{% endif %}; {% if text.fontStyle is not empty %}font-style: {{ text.fontStyle.value }}{% endif %}; {% if text.textDecoration is not empty %}text-decoration: {{ text.textDecoration.value }}{% endif %}; color: {{ text.color | default(c.text.color) | default('#51545E') }}; font-size: {{ text.fontSize | default(c.imageText.size) | default('16px') }}; line-height: {{ c.imageText.lineHeight | default('1.325') }}; margin: {{ c.imageText.margin | default('.4em 0 .4em') }};">{% if text.linkUrl is not empty %}<a target="_blank" href="{{- text.linkUrl | raw -}}" style="color: {{ text.color | default(c.imageText.linkColor) | default('#3869D4')  }};">{% endif %}{{ text.text | escape | br | raw }}{% if text.linkUrl is not empty %}</a>{% endif %}</p>
                     {% endfor %}
 
                 </td>

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
@@ -148,17 +148,17 @@ public void gallery() {
 
 
 
-                .text("Welcome, {{name}}!").h1().center().and()
-                .text("Thanks for trying [Product Name]. We’re thrilled to have you on board. To get the most out of [Product Name], do this primary next step:").and()
+                .text("Impressions from somewhere").h1().center().and()
+                .text("Hi hope you do well. We've prepared some pictures for you:").and()
 
                 .gallery()
                 .newRowAfter(3)
                 .cellPadding(5)
                 .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()
 
-                .button("Do this Next", "http://localhost").blue().and()
-                .text("For reference, here's your login information:").and()
+                .button("Here could be an action", "http://localhost").blue().and()
+                .text("Would be great if you could click :)").and()
 
                 .gallery()
                 .verticalAlign(VerticalAlignment.TOP)
@@ -175,6 +175,18 @@ public void gallery() {
                 .and()
                 .and()
 
+                .text("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.").and()
+
+
+
+                .sideImage("https://images.unsplash.com/photo-1622267391720-bf19770a7879?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60").width(200).linkUrl("https://www.rocketbase.io")
+                .imageVerticalAlign(VerticalAlignment.TOP)
+                .text("SideImage").h2().and()
+                .text("some text could be below....").and()
+                .hr().and()
+                .button("action", "http://localhost").red().right().and()
+                .and()
+
                 .text("Cheers,\n" +
                         "The [Product Name] Team").and()
                 .copyright("rocketbase").url("https://www.rocketbase.io").suffix(". All rights reserved.").and()