diff --git a/assets/js/src/newsletter_editor/components/sidebar.js b/assets/js/src/newsletter_editor/components/sidebar.js index d1bfd62bb0..562c68f923 100644 --- a/assets/js/src/newsletter_editor/components/sidebar.js +++ b/assets/js/src/newsletter_editor/components/sidebar.js @@ -197,6 +197,14 @@ Module.SidebarStylesView = Marionette.View.extend({ 'change #mailpoet_a_font_underline': function (event) { this.model.set('link.textDecoration', (event.target.checked) ? event.target.value : 'none'); }, + 'change #mailpoet_text_line_height': function (event) { + this.model.set('text.lineHeight', event.target.value); + }, + 'change #mailpoet_heading_line_height': function (event) { + this.model.set('h1.lineHeight', event.target.value); + this.model.set('h2.lineHeight', event.target.value); + this.model.set('h3.lineHeight', event.target.value); + }, 'change #mailpoet_newsletter_background_color': _.partial(this.changeColorField, 'wrapper.backgroundColor'), 'change #mailpoet_background_color': _.partial(this.changeColorField, 'body.backgroundColor'), }; diff --git a/assets/js/src/newsletter_editor/components/styles.js b/assets/js/src/newsletter_editor/components/styles.js index b4324b0be5..4215e0c942 100644 --- a/assets/js/src/newsletter_editor/components/styles.js +++ b/assets/js/src/newsletter_editor/components/styles.js @@ -11,21 +11,25 @@ Module.StylesModel = SuperModel.extend({ fontColor: '#000000', fontFamily: 'Arial', fontSize: '16px', + lineHeight: '1.6', }, h1: { fontColor: '#111111', fontFamily: 'Arial', fontSize: '40px', + lineHeight: '1.6', }, h2: { fontColor: '#222222', fontFamily: 'Tahoma', fontSize: '32px', + lineHeight: '1.6', }, h3: { fontColor: '#333333', fontFamily: 'Verdana', fontSize: '24px', + lineHeight: '1.6', }, link: { fontColor: '#21759B', diff --git a/lib/Newsletter/Renderer/Blocks/Footer.php b/lib/Newsletter/Renderer/Blocks/Footer.php index a4a919afb3..0cf12da067 100644 --- a/lib/Newsletter/Renderer/Blocks/Footer.php +++ b/lib/Newsletter/Renderer/Blocks/Footer.php @@ -10,7 +10,7 @@ class Footer { $element['text'] = preg_replace('/\n/', '
', $element['text']); $element['text'] = preg_replace('/(<\/?p.*?>)/i', '', $element['text']); $line_height = sprintf( - '%spx', StylesHelper::$line_height_multiplier * (int)$element['styles']['text']['fontSize'] + '%spx', StylesHelper::$default_line_height * (int)$element['styles']['text']['fontSize'] ); $DOM_parser = new pQuery(); $DOM = $DOM_parser->parseStr($element['text']); diff --git a/lib/Newsletter/Renderer/Blocks/Header.php b/lib/Newsletter/Renderer/Blocks/Header.php index e25ce6bc31..5fbd359b24 100644 --- a/lib/Newsletter/Renderer/Blocks/Header.php +++ b/lib/Newsletter/Renderer/Blocks/Header.php @@ -10,7 +10,7 @@ class Header { $element['text'] = preg_replace('/\n/', '
', $element['text']); $element['text'] = preg_replace('/(<\/?p.*?>)/i', '', $element['text']); $line_height = sprintf( - '%spx', StylesHelper::$line_height_multiplier * (int)$element['styles']['text']['fontSize'] + '%spx', StylesHelper::$default_line_height * (int)$element['styles']['text']['fontSize'] ); $DOM_parser = new pQuery(); $DOM = $DOM_parser->parseStr($element['text']); diff --git a/lib/Newsletter/Renderer/StylesHelper.php b/lib/Newsletter/Renderer/StylesHelper.php index 26fd2d7e27..aa06a7f53a 100644 --- a/lib/Newsletter/Renderer/StylesHelper.php +++ b/lib/Newsletter/Renderer/StylesHelper.php @@ -57,7 +57,7 @@ class StylesHelper { 'Permanent Marker', 'Pacifico', ]; - static $line_height_multiplier = 1.6; + static $default_line_height = 1.6; static $heading_margin_multiplier = 0.3; static $padding_width = 20; @@ -128,8 +128,9 @@ class StylesHelper { static function applyLineHeight($style, $selector) { if (!preg_match('/mailpoet_paragraph|h[1-4]/i', $selector)) return $style; + $line_height = isset($style['lineHeight']) ? (float)$style['lineHeight'] : self::$default_line_height; $font_size = (int)$style['fontSize']; - $style['lineHeight'] = sprintf('%spx', self::$line_height_multiplier * $font_size); + $style['lineHeight'] = sprintf('%spx', $line_height * $font_size); return $style; } diff --git a/views/newsletter/editor.html b/views/newsletter/editor.html index e78960ada7..6427ff50ae 100644 --- a/views/newsletter/editor.html +++ b/views/newsletter/editor.html @@ -615,6 +615,14 @@ '10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '30px', '36px', '40px' ], + lineHeights: [ + '1.0', + '1.2', + '1.4', + '1.6', + '1.8', + '2.0', + ], fonts: { standard: [ 'Arial', diff --git a/views/newsletter/templates/components/sidebar/styles.hbs b/views/newsletter/templates/components/sidebar/styles.hbs index b3495c760a..ab09e61b8a 100644 --- a/views/newsletter/templates/components/sidebar/styles.hbs +++ b/views/newsletter/templates/components/sidebar/styles.hbs @@ -96,6 +96,28 @@ <%= __('Links') %>
+
+ +
+
+ +
+
diff --git a/views/newsletter/templates/components/styles.hbs b/views/newsletter/templates/components/styles.hbs index bad0e0fb04..95422ff8f6 100644 --- a/views/newsletter/templates/components/styles.hbs +++ b/views/newsletter/templates/components/styles.hbs @@ -4,21 +4,25 @@ color: {{ text.fontColor }}; font-size: {{ text.fontSize }}; font-family: {{fontWithFallback text.fontFamily }}; + line-height: {{ text.lineHeight }}; } .mailpoet_text_block .mailpoet_content h1 { color: {{ h1.fontColor }}; font-size: {{ h1.fontSize }}; font-family: {{fontWithFallback h1.fontFamily }}; + line-height: {{ h1.lineHeight }}; } .mailpoet_text_block .mailpoet_content h2 { color: {{ h2.fontColor }}; font-size: {{ h2.fontSize }}; font-family: {{fontWithFallback h2.fontFamily }}; + line-height: {{ h2.lineHeight }}; } .mailpoet_text_block .mailpoet_content h3 { color: {{ h3.fontColor }}; font-size: {{ h3.fontSize }}; font-family: {{fontWithFallback h3.fontFamily }}; + line-height: {{ h3.lineHeight }}; } .mailpoet_content a { color: {{ link.fontColor }};