Extend overwriting properties

bsi-software · Sep 22, 2023 · 9ce6f12 · 9ce6f12
1 parent 896360b
commit 9ce6f12
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.4] - 22.09.2023
+
+### Changes
+* Extension of overwriting properties: Pre-Header text and colored footer width
+* Dependency updates
+
+[1.1.4]: https://github.com/bsi-software/bsi-cx-design-standard-library-email/releases/tag/1.1.4
+
+
 ## [1.1.3] - 05.06.2023
 
 ### Changes

diff --git a/content-elements/base/header-preheader/prototype/template.twig b/content-elements/base/header-preheader/prototype/template.twig
@@ -7,20 +7,22 @@
     {% set preHeaderElementId = elementId ?: 'header-preheader-cVwk8f' %}
     {% set preHeaderPreviewPartId = previewPartId ?: 'header-preheader-part-preview-rWi96c' %}
     {% set preHeaderTextPartId = textPartId ?: 'header-preheader-part-text-dpjafj' %}
+    {% set preHeaderInfoText = (infoText ?: properties.preHeaderInfoText) ?: 'Pre-header text here. | ' %}
+    {% set preHeaderLinkText = (linkText ?: properties.preHeaderLinkText) ?: 'View in Browser' %}
     {% set preHeaderTextColor = (textColor ?: properties.baseTextColor) ?: '#000000' %}
     {% set preHeaderLinkColor = (linkColor ?: properties.linkColor) ?: '#93C120' %}
     {% set preHeaderFontFamily = (fontFamily ?: properties.baseFontFamily) ?: 'Open Sans, Segoe UI, Apple SD Gothic Neo, Lucida Grande, Lucida Sans Unicode, sans‑serif' %}
-    {% set preHeaderFontSize = (fontSize ?: properties.fontSizePreheader) ?: 14 %}
+    {% set preHeaderFontSize = (fontSize ?: properties.fontSizePreHeader) ?: 14 %}
     {% set preHeaderLineHeight = preHeaderFontSize + 4 %}
     {% set preHeaderMarginBottom = (marginBottom ?: properties.baseMarginBottom) ?: 12 %}
 
     <div data-bsi-element="{{ preHeaderElementId }}" style="text-align: center; margin-top: 0; margin-bottom: {{ preHeaderMarginBottom }}px; font-size: {{ preHeaderFontSize }}px; line-height: {{ preHeaderLineHeight }}px; font-family: {{ preHeaderFontFamily }};">
         <div data-bsi-element-part="{{ preHeaderPreviewPartId }}" style="display: none;" class="show-preheader-if-edit"></div>
         {# insert white space after preview text to ensure that no other text is pulled in #}
-        <div style="display: none; max-height: 0px; overflow: hidden;">&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;</div>
-        <div data-bsi-element-part="{{ preHeaderTextPartId }}" class="bsi-dm-text-color" style="color: {{ preHeaderTextColor }};">Pre-header text here. |&nbsp;
+        <div style="display: none; max-height: 0; overflow: hidden;">&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;</div>
+        <div data-bsi-element-part="{{ preHeaderTextPartId }}" class="bsi-dm-text-color" style="color: {{ preHeaderTextColor }};">{{ preHeaderInfoText }}
             <span style="color: {{ preHeaderLinkColor }};">
-                <a href="[Webversion]" target="_blank" style="text-decoration: underline; color: {{ preHeaderLinkColor }};">View in Browser</a>
+                <a href="[Webversion]" target="_blank" style="text-decoration: underline; color: {{ preHeaderLinkColor }};">{{ preHeaderLinkText }}</a>
             </span>
         </div>
         <!--[if mso]>

diff --git a/content-elements/layout/layout-base/prototype/template.twig b/content-elements/layout/layout-base/prototype/template.twig
@@ -18,7 +18,7 @@
                     <!--[if mso]>
                     <table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="width: {{ layoutBaseWidth }}px;">
                     <tr>
-                    <td style="padding: 20px 0;">
+                    <td style="padding: 6px 0;">
                     <![endif]-->
                     <div class="outer" style="width: 96%; padding: 0 4px 0 4px; max-width: {{ layoutBaseWidth }}px; margin: 0 auto;" data-bsi-dropzone="{{ layoutBaseDropzoneId }}">
                         {% block layout_base_dropzone %}

diff --git a/content-elements/layout/layout-dark-footer/prototype/template.twig b/content-elements/layout/layout-dark-footer/prototype/template.twig
@@ -1,4 +1,4 @@
-{% macro render(elementId = null, dropzoneId = null, backgroundColor = null, textColor = null, padding = null, width = null) %}{% apply spaceless %}
+{% macro render(elementId = null, dropzoneId = null, backgroundColor = null, textColor = null, padding = null, width = null, fillsFullScreen = null, widthBackgroundColor = null) %}{% apply spaceless %}
     {% deprecated 'The usage of "element.render(...)" is deprecated, use "include ... with {...}" instead. For detailed information, visit: https://github.com/bsi-software/bsi-cx-design-master-template-email/blob/main/MIGRATION_GUIDE.md"' %}
     {% include './template.twig' %}
 {% endapply %}{% endmacro %}
@@ -9,12 +9,18 @@
     {% set layoutDarkFooterBackgroundColor = (backgroundColor ?: properties.footerDarkBackgroundColor) ?: '#383e42' %}
     {% set layoutDarkFooterTextColor = (textColor ?: properties.footerDarkTextColor) ?: '#ffffff' %}
     {% set layoutDarkFooterPadding = (padding ?: properties.footerDarkPadding) ?: 30 %}
-    {% set layoutDarkFooterWidth = ((width ?: properties.layoutWidth) ?: 660) + 8 %}
+    {% set layoutDarkFooterWidthContent = ((width ?: properties.layoutWidth) ?: 660) + 8 %}
+    {% set layoutDarkFooterFillsFullScreen = fillsFullScreen ?: properties.footerBackgroundColorFillsFullScreen %}
+    {% set layoutDarkFooterWidthBackgroundColor = ((widthBackgroundColor ?: properties.footerBackgroundColorWidth) ?: 660) + 8 %}
     {% set layoutDarkFooterDarkModeClass = darkModeClass ?: 'bsi-dm-bg-color-footer' %}
 
     {# keep layout structure implementation in sync with 'layout-base' #}
     <div data-bsi-element="{{ layoutDarkFooterElementId }}">
-        <table class="{{ layoutDarkFooterDarkModeClass }}" width="100%" role="presentation" style="border: 0; border-spacing: 0; background-color: {{ layoutDarkFooterBackgroundColor }}; width: 100%;">
+        {% if layoutDarkFooterFillsFullScreen %}
+        <table class="{{ layoutDarkFooterDarkModeClass }}" align="center" width="100%" role="presentation" style="border: 0; border-spacing: 0; background-color: {{ layoutDarkFooterBackgroundColor }}; width: 100%;">
+        {% else %}
+        <table class="{{ layoutDarkFooterDarkModeClass }} bsi-bg-color-footer" align="center" width="{{ layoutDarkFooterWidthBackgroundColor }}" role="presentation" style="border: 0; border-spacing: 0; background-color: {{ layoutDarkFooterBackgroundColor }}; width: {{ layoutDarkFooterWidthBackgroundColor }}px;">
+        {% endif %}
             <tr>
                 <td align="center">
                     <!--[if mso]>