Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Implement adjustable line-height

Browse Source 
[MAILPOET-1450]
This commit is contained in:
Jan Jakeš
2019-02-19 11:51:43 +01:00
committed by M. Shull
parent 7d032df7ea
commit 35d39a6ac9
8 changed files with 51 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/js/src/newsletter_editor/components/sidebar.js
View File

@@ -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'),
};

4
assets/js/src/newsletter_editor/components/styles.js
View File

@@ -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',

2
lib/Newsletter/Renderer/Blocks/Footer.php
View File

@@ -10,7 +10,7 @@ class Footer {
$element['text'] = preg_replace('/\n/', '<br />', $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']);

2
lib/Newsletter/Renderer/Blocks/Header.php
View File

@@ -10,7 +10,7 @@ class Header {
$element['text'] = preg_replace('/\n/', '<br />', $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']);

5
lib/Newsletter/Renderer/StylesHelper.php
View File

@@ -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;
}

8
views/newsletter/editor.html
View File

@@ -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',

22
views/newsletter/templates/components/sidebar/styles.hbs
View File

@@ -96,6 +96,28 @@
</span><%= __('Links') %> <label><input type="checkbox" name="underline" value="underline" id="mailpoet_a_font_underline" {{#ifCond model.link.textDecoration '==' 'underline'}}CHECKED{{/ifCond}} class="mailpoet_option_offset_left_small"/> <%= __('Underline') %></label>
</div>
<hr />
<div class="mailpoet_form_field">
<label>
<%= __('Text line height') %>
<select id="mailpoet_text_line_height" name="text-line-height">
{{#each availableStyles.lineHeights}}
<option value="{{ this }}" {{#ifCond this '==' ../model.text.lineHeight}}SELECTED{{/ifCond}}>{{ this }}</option>
{{/each}}
</select>
</label>
</div>
<div class="mailpoet_form_field">
<label>
<%= __('Heading line height') %>
<select id="mailpoet_heading_line_height" name="heading-line-height">
{{#each availableStyles.lineHeights}}
{{!-- Checking against h1 only since all headings have the same line height value. --}}
<option value="{{ this }}" {{#ifCond this '==' ../model.h1.lineHeight}}SELECTED{{/ifCond}}>{{ this }}</option>
{{/each}}
</select>
</label>
</div>
<hr />
<div class="mailpoet_form_field">
<span>
<span><input type="text" class="mailpoet_color" size="6" maxlength="6" name="newsletter-color" value="{{ model.wrapper.backgroundColor }}" id="mailpoet_newsletter_background_color"></span>

4
views/newsletter/templates/components/styles.hbs
View File

@@ -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 }};