From 8209facb5c63c2c44537eea1371f0bc82debc370 Mon Sep 17 00:00:00 2001 From: Amine Ben hammou Date: Tue, 23 Oct 2018 18:57:30 +0200 Subject: [PATCH 1/6] adding custom fonts --- assets/css/src/admin.styl | 4 +- assets/css/src/custom_fonts.styl | 1 + assets/css/src/newsletter_editor/common.styl | 13 +++++ assets/js/src/handlebars_helpers.js | 10 ++++ lib/Newsletter/Renderer/Renderer.php | 2 + lib/Newsletter/Renderer/StylesHelper.php | 51 ++++++++++++++++-- lib/Newsletter/Renderer/Template.html | 1 + .../newsletter_editor/blocks/footer.spec.js | 10 +++- .../newsletter_editor/blocks/header.spec.js | 10 +++- .../components/sidebar.spec.js | 8 ++- .../Newsletter/Renderer/StylesHelperTest.php | 50 ++++++++++++++++++ views/newsletter/editor.html | 52 +++++++++++++++---- .../templates/blocks/footer/settings.hbs | 12 ++++- .../templates/blocks/header/settings.hbs | 13 ++++- .../templates/components/sidebar/styles.hbs | 40 ++++++++++++-- 15 files changed, 249 insertions(+), 28 deletions(-) create mode 100644 assets/css/src/custom_fonts.styl create mode 100644 tests/unit/Newsletter/Renderer/StylesHelperTest.php diff --git a/assets/css/src/admin.styl b/assets/css/src/admin.styl index cc9c26831e..90cc00ecfe 100644 --- a/assets/css/src/admin.styl +++ b/assets/css/src/admin.styl @@ -1,5 +1,7 @@ @import 'nib' +@require 'custom_fonts' + @require 'select2/dist/css/select2.css' @require 'datepicker/datepicker' @require 'badge' @@ -36,4 +38,4 @@ @require 'welcome_wizard' @require 'intro' @require 'in_app_announcements' -@require 'discounts' +@require 'discounts' \ No newline at end of file diff --git a/assets/css/src/custom_fonts.styl b/assets/css/src/custom_fonts.styl new file mode 100644 index 0000000000..91599c7c0a --- /dev/null +++ b/assets/css/src/custom_fonts.styl @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i|Lato:400,400i,700,700i|Lora:400,400i,700,700i|Merriweather:400,400i,700,700i|Merriweather+Sans:400,400i,700,700i|Noticia+Text:400,400i,700,700i|Open+Sans:400,400i,700,700i|Playfair+Display:400,400i,700,700i|Roboto:400,400i,700,700i|Source+Sans+Pro:400,400i,700,700i'); diff --git a/assets/css/src/newsletter_editor/common.styl b/assets/css/src/newsletter_editor/common.styl index 63089d5314..ee7ed781df 100644 --- a/assets/css/src/newsletter_editor/common.styl +++ b/assets/css/src/newsletter_editor/common.styl @@ -236,3 +236,16 @@ select.mailpoet_font-size margin-left: 10px input.mailpoet_option_offset_left_small margin-left: 10px !important + +.mailpoet_form_field span.select2-container + width: 103px !important + +span.select2-container--open > span.select2-dropdown + width: 150px !important + +span.select2-container--open > span.select2-dropdown li.select2-results__option + margin: 0px !important + padding: 2px !important + +.mailpoet-fonts-notice + color: #999 diff --git a/assets/js/src/handlebars_helpers.js b/assets/js/src/handlebars_helpers.js index 447e57940a..7087ec9fb9 100644 --- a/assets/js/src/handlebars_helpers.js +++ b/assets/js/src/handlebars_helpers.js @@ -151,6 +151,16 @@ define('handlebars_helpers', ['handlebars'], function (Handlebars) { case 'Times New Roman': return new Handlebars.SafeString("'Times New Roman', Times, Baskerville, Georgia, serif"); case 'Trebuchet MS': return new Handlebars.SafeString("'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif"); case 'Verdana': return new Handlebars.SafeString('Verdana, Geneva, sans-serif'); + case 'Arvo': return new Handlebars.SafeString('arvo, courier, georgia, serif'); + case 'Lato': return new Handlebars.SafeString("lato, 'helvetica neue', helvetica, arial, sans-serif"); + case 'Lora': return new Handlebars.SafeString("lora, georgia, 'times new roman', serif"); + case 'Merriweather': return new Handlebars.SafeString("merriweather, georgia, 'times new roman', serif"); + case 'Merriweather Sans': return new Handlebars.SafeString("'merriweather sans', 'helvetica neue', helvetica, arial, sans-serif"); + case 'Noticia Text': return new Handlebars.SafeString("'noticia text', georgia, 'times new roman', serif"); + case 'Open Sans': return new Handlebars.SafeString("'open sans', 'helvetica neue', helvetica, arial, sans-serif"); + case 'Playfair Display': return new Handlebars.SafeString("playfair display, georgia, 'times new roman', serif"); + case 'Roboto': return new Handlebars.SafeString("roboto, 'helvetica neue', helvetica, arial, sans-serif"); + case 'Source Sans Pro': return new Handlebars.SafeString("'source sans pro', 'helvetica neue', helvetica, arial, sans-serif"); default: return font; } }); diff --git a/lib/Newsletter/Renderer/Renderer.php b/lib/Newsletter/Renderer/Renderer.php index 087510345d..224c2aa881 100644 --- a/lib/Newsletter/Renderer/Renderer.php +++ b/lib/Newsletter/Renderer/Renderer.php @@ -50,10 +50,12 @@ class Renderer { $content = $this->preProcessALC($content); $rendered_body = $this->renderBody($content); $rendered_styles = $this->renderStyles($styles); + $custom_fonts_links = StylesHelper::getCustomFontsLinks($styles); $template = $this->injectContentIntoTemplate($this->template, array( htmlspecialchars($newsletter['subject']), $rendered_styles, + $custom_fonts_links, $newsletter['preheader'], $rendered_body )); diff --git a/lib/Newsletter/Renderer/StylesHelper.php b/lib/Newsletter/Renderer/StylesHelper.php index 4aadf36772..08ca652812 100644 --- a/lib/Newsletter/Renderer/StylesHelper.php +++ b/lib/Newsletter/Renderer/StylesHelper.php @@ -2,7 +2,7 @@ namespace MailPoet\Newsletter\Renderer; class StylesHelper { - static $css_attributes = array( + static $css_attributes = [ 'backgroundColor' => 'background-color', 'fontColor' => 'color', 'fontFamily' => 'font-family', @@ -15,8 +15,8 @@ class StylesHelper { 'borderColor' => 'border-color', 'borderRadius' => 'border-radius', 'lineHeight' => 'line-height' - ); - static $font = array( + ]; + static $font = [ 'Arial' => "Arial, 'Helvetica Neue', Helvetica, sans-serif", 'Comic Sans MS' => "'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif", 'Courier New' => "'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace", @@ -25,8 +25,30 @@ class StylesHelper { 'Tahoma' => 'Tahoma, Verdana, Segoe, sans-serif', 'Times New Roman' => "'Times New Roman', Times, Baskerville, Georgia, serif", 'Trebuchet MS' => "'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif", - 'Verdana' => 'Verdana, Geneva, sans-serif' - ); + 'Verdana' => 'Verdana, Geneva, sans-serif', + 'Arvo' => "arvo, courier, georgia, serif", + 'Lato' => "lato, helvetica neue, helvetica, arial, sans-serif", + 'Lora' => "lora, georgia, times new roman, serif", + 'Merriweather' => "merriweather, georgia, times new roman, serif", + 'Merriweather Sans' => "merriweather sans, helvetica neue, helvetica, arial, sans-serif", + 'Noticia Text' => "noticia text, georgia, times new roman, serif", + 'Open Sans' => "open sans, helvetica neue, helvetica, arial, sans-serif", + 'Playfair Display' => "playfair display, georgia, times new roman, serif", + 'Roboto' => "roboto, helvetica neue, helvetica, arial, sans-serif", + 'Source Sans Pro' => "source sans pro, helvetica neue, helvetica, arial, sans-serif" + ]; + static $custom_fonts = [ + 'Arvo', + 'Lato', + 'Lora', + 'Merriweather', + 'Merriweather Sans', + 'Noticia Text', + 'Open Sans', + 'Playfair Display', + 'Roboto', + 'Source Sans Pro' + ]; static $line_height_multiplier = 1.6; static $heading_margin_multiplier = 0.3; static $padding_width = 20; @@ -102,4 +124,23 @@ class StylesHelper { $style['lineHeight'] = sprintf('%spx', self::$line_height_multiplier * $font_size); return $style; } + + static function getCustomFontsNames($styles) { + $font_names = []; + foreach($styles as $style) { + if (isset($style['fontFamily']) && in_array($style['fontFamily'], self::$custom_fonts)) + $font_names[$style['fontFamily']] = true; + } + return array_keys($font_names); + } + + static function getCustomFontsLinks($styles) { + $links = []; + foreach(self::getCustomFontsNames($styles) as $name) { + $links[] = ''; + } + return implode("\n", $links); + } } \ No newline at end of file diff --git a/lib/Newsletter/Renderer/Template.html b/lib/Newsletter/Renderer/Template.html index cca8a0fcf4..0042fb9651 100644 --- a/lib/Newsletter/Renderer/Template.html +++ b/lib/Newsletter/Renderer/Template.html @@ -78,6 +78,7 @@ } {{newsletter_styles}} + {{newsletter_custom_fonts}} styles = [ + "text" => [ + "fontColor" => "#565656", + "fontFamily" => "Arial", + "fontSize" => "16px" + ], + "h1" => [ + "fontColor" => "#565656", + "fontFamily" => "Roboto", + "fontSize" => "36px" + ], + "h2" => [ + "fontColor" => "#565656", + "fontFamily" => "Source Sans Pro", + "fontSize" => "26px" + ], + "h3" => [ + "fontColor" => "#565656", + "fontFamily" => "Roboto", + "fontSize" => "18px" + ], + "link" => [ + "fontColor" => "#561ab9", + "textDecoration" => "underline" + ], + ]; + } + + function testItGetsCustomFontsNames() { + expect(StylesHelper::getCustomFontsNames($this->styles)) + ->equals(['Roboto', 'Source Sans Pro']); + } + + function testItGetsCustomFontsLinks() { + expect(StylesHelper::getCustomFontsLinks($this->styles)) + ->equals(implode("\n", [ + '', + '', + ])); + } +} \ No newline at end of file diff --git a/views/newsletter/editor.html b/views/newsletter/editor.html index 91153324c9..3b3bc042fa 100644 --- a/views/newsletter/editor.html +++ b/views/newsletter/editor.html @@ -397,6 +397,21 @@ <%= do_action('mailpoet_newsletter_editor_after_javascript') %> <% endblock %> diff --git a/views/newsletter/templates/blocks/footer/settings.hbs b/views/newsletter/templates/blocks/footer/settings.hbs index 9b1d150362..778f45c293 100644 --- a/views/newsletter/templates/blocks/footer/settings.hbs +++ b/views/newsletter/templates/blocks/footer/settings.hbs @@ -3,9 +3,16 @@
+ \ No newline at end of file diff --git a/views/newsletter/templates/blocks/header/settings.hbs b/views/newsletter/templates/blocks/header/settings.hbs index aa23e0e2a0..690dec3158 100644 --- a/views/newsletter/templates/blocks/header/settings.hbs +++ b/views/newsletter/templates/blocks/header/settings.hbs @@ -3,9 +3,17 @@
+ \ No newline at end of file diff --git a/views/newsletter/templates/components/sidebar/styles.hbs b/views/newsletter/templates/components/sidebar/styles.hbs index e644602d2b..6634367b6f 100644 --- a/views/newsletter/templates/components/sidebar/styles.hbs +++ b/views/newsletter/templates/components/sidebar/styles.hbs @@ -8,9 +8,16 @@ + +

<%= __('If an email client [link]does not support a custom web font[/link], a similar standard font will be used instead.')|replaceLinkTags('https://beta.docs.mailpoet.com/article/176-which-fonts-can-be-used-in-mailpoet#custom-web-fonts', {'target' : '_blank'})|raw %>

+ \ No newline at end of file diff --git a/views/newsletter/templates/blocks/header/settings.hbs b/views/newsletter/templates/blocks/header/settings.hbs index 690dec3158..3fa9cae474 100644 --- a/views/newsletter/templates/blocks/header/settings.hbs +++ b/views/newsletter/templates/blocks/header/settings.hbs @@ -66,6 +66,9 @@
+ +

<%= __('If an email client [link]does not support a custom web font[/link], a similar standard font will be used instead.')|replaceLinkTags('https://beta.docs.mailpoet.com/article/176-which-fonts-can-be-used-in-mailpoet#custom-web-fonts', {'target' : '_blank'})|raw %>

+ \ No newline at end of file From 6e391559fec80b5f793c3df125cc878cec2466a1 Mon Sep 17 00:00:00 2001 From: Amine Ben hammou Date: Tue, 6 Nov 2018 10:58:20 +0100 Subject: [PATCH 5/6] remove unused CSS --- assets/css/src/admin.styl | 2 -- assets/css/src/custom_fonts.styl | 1 - 2 files changed, 3 deletions(-) delete mode 100644 assets/css/src/custom_fonts.styl diff --git a/assets/css/src/admin.styl b/assets/css/src/admin.styl index 90cc00ecfe..92e54b678e 100644 --- a/assets/css/src/admin.styl +++ b/assets/css/src/admin.styl @@ -1,7 +1,5 @@ @import 'nib' -@require 'custom_fonts' - @require 'select2/dist/css/select2.css' @require 'datepicker/datepicker' @require 'badge' diff --git a/assets/css/src/custom_fonts.styl b/assets/css/src/custom_fonts.styl deleted file mode 100644 index 91599c7c0a..0000000000 --- a/assets/css/src/custom_fonts.styl +++ /dev/null @@ -1 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i|Lato:400,400i,700,700i|Lora:400,400i,700,700i|Merriweather:400,400i,700,700i|Merriweather+Sans:400,400i,700,700i|Noticia+Text:400,400i,700,700i|Open+Sans:400,400i,700,700i|Playfair+Display:400,400i,700,700i|Roboto:400,400i,700,700i|Source+Sans+Pro:400,400i,700,700i'); From cca2a1923df5c0369cdeabc84827ecbbc972fe30 Mon Sep 17 00:00:00 2001 From: Amine Ben hammou Date: Tue, 6 Nov 2018 12:38:39 +0100 Subject: [PATCH 6/6] fix code typos and style --- lib/Newsletter/Renderer/StylesHelper.php | 26 +++++++++++++----------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/lib/Newsletter/Renderer/StylesHelper.php b/lib/Newsletter/Renderer/StylesHelper.php index e75e3071e9..5a5ed4deba 100644 --- a/lib/Newsletter/Renderer/StylesHelper.php +++ b/lib/Newsletter/Renderer/StylesHelper.php @@ -26,16 +26,16 @@ class StylesHelper { 'Times New Roman' => "'Times New Roman', Times, Baskerville, Georgia, serif", 'Trebuchet MS' => "'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif", 'Verdana' => 'Verdana, Geneva, sans-serif', - 'Arvo' => "arvo, courier, georgia, serif", - 'Lato' => "lato, helvetica neue, helvetica, arial, sans-serif", - 'Lora' => "lora, georgia, times new roman, serif", - 'Merriweather' => "merriweather, georgia, times new roman, serif", - 'Merriweather Sans' => "merriweather sans, helvetica neue, helvetica, arial, sans-serif", - 'Noticia Text' => "noticia text, georgia, times new roman, serif", - 'Open Sans' => "open sans, helvetica neue, helvetica, arial, sans-serif", - 'Playfair Display' => "playfair display, georgia, times new roman, serif", - 'Roboto' => "roboto, helvetica neue, helvetica, arial, sans-serif", - 'Source Sans Pro' => "source sans pro, helvetica neue, helvetica, arial, sans-serif", + 'Arvo' => 'arvo, courier, georgia, serif', + 'Lato' => "lato, 'helvetica neue', helvetica, arial, sans-serif", + 'Lora' => "lora, georgia, 'times new roman', serif", + 'Merriweather' => "merriweather, georgia, 'times new roman', serif", + 'Merriweather Sans' => "'merriweather sans', 'helvetica neue', helvetica, arial, sans-serif", + 'Noticia Text' => "'noticia text', georgia, 'times new roman', serif", + 'Open Sans' => "'open sans', 'helvetica neue', helvetica, arial, sans-serif", + 'Playfair Display' => "'playfair display', georgia, 'times new roman', serif", + 'Roboto' => "roboto, 'helvetica neue', helvetica, arial, sans-serif", + 'Source Sans Pro' => "'source sans pro', 'helvetica neue', helvetica, arial, sans-serif", ]; static $custom_fonts = [ 'Arvo', @@ -128,8 +128,9 @@ class StylesHelper { private static function getCustomFontsNames($styles) { $font_names = []; foreach($styles as $style) { - if(isset($style['fontFamily']) && in_array($style['fontFamily'], self::$custom_fonts)) + if(isset($style['fontFamily']) && in_array($style['fontFamily'], self::$custom_fonts)) { $font_names[$style['fontFamily']] = true; + } } return array_keys($font_names); } @@ -139,8 +140,9 @@ class StylesHelper { foreach(self::getCustomFontsNames($styles) as $name) { $links[] = urlencode($name) . ':400,400i,700,700i'; } - if(!count($links)) + if(!count($links)) { return ''; + } return '';