130 lines
7.3 KiB
Handlebars
130 lines
7.3 KiB
Handlebars
|
<h3><%= __('Button') %></h3>
|
||
|
|
<div class="mailpoet_form_field">
|
||
|
|
<label>
|
||
|
|
<div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Label') %></div>
|
||
|
|
<div class="mailpoet_form_field_input_option">
|
||
|
|
<input type="text" name="text" class="mailpoet_input mailpoet_field_button_text" value="{{ model.text }}" />
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{#ifCond renderOptions.hideLink '!==' true}}
|
||
|
|
<div class="mailpoet_form_field">
|
||
|
|
<label>
|
||
|
|
<div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Link') %></div>
|
||
|
|
<div class="mailpoet_form_field_input_option">
|
||
|
|
<input type="text" name="url" class="mailpoet_input mailpoet_field_button_url" value="{{ model.url }}" placeholder="http://" />
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
{{/ifCond}}
|
||
|
|
|
||
|
|
<div class="mailpoet_form_field">
|
||
|
|
<div class="mailpoet_form_field_title"><%= __('Alignment') %></div>
|
||
|
|
<div class="mailpoet_form_field_radio_option">
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="alignment" class="mailpoet_field_button_alignment" value="left" {{#ifCond model.styles.block.textAlign '===' 'left'}}CHECKED{{/ifCond}}/>
|
||
|
|
<%= __('Left') %>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="mailpoet_form_field_radio_option">
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="alignment" class="mailpoet_field_button_alignment" value="center" {{#ifCond model.styles.block.textAlign '===' 'center'}}CHECKED{{/ifCond}}/>
|
||
|
|
<%= __('Center') %>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="mailpoet_form_field_radio_option">
|
||
|
|
<label>
|
||
|
|
<input type="radio" name="alignment" class="mailpoet_field_button_alignment" value="right" {{#ifCond model.styles.block.textAlign '===' 'right'}}CHECKED{{/ifCond}}/>
|
||
|
|
<%= __('Right') %>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mailpoet_form_field mailpoet_form_narrow_select2">
|
||
|
|
<div class="mailpoet_form_field_title"><%= __('Text') %></div>
|
||
|
|
<div class="mailpoet_form_field_input_option mailpoet_form_field_input_nowrap">
|
||
|
|
<input type="text" name="font-color" id="mailpoet_field_button_font_color" class="mailpoet_field_button_font_color mailpoet_color" value="{{ model.styles.block.fontColor }}" />
|
||
|
|
<select id="mailpoet_field_button_font_family" name="font-family" class="mailpoet_select mailpoet_select_medium mailpoet_field_button_font_family mailpoet_font_family">
|
||
|
|
<optgroup label="<%= __('Standard fonts')%>">
|
||
|
|
{{#each availableStyles.fonts.standard}}
|
||
|
|
<option value="{{ this }}" {{#ifCond this '==' ../model.styles.block.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
|
||
|
|
{{/each}}
|
||
|
|
</optgroup>
|
||
|
|
<optgroup label="<%= __('Custom fonts')%>">
|
||
|
|
{{#each availableStyles.fonts.custom}}
|
||
|
|
<option value="{{ this }}" {{#ifCond this '==' ../model.styles.block.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option>
|
||
|
|
{{/each}}
|
||
|
|
</optgroup>
|
||
|
|
</select>
|
||
|
|
<select id="mailpoet_field_button_font_size" name="font-size" class="mailpoet_select mailpoet_select_small mailpoet_field_button_font_size mailpoet_font_size">
|
||
|
|
{{#each availableStyles.headingSizes}}
|
||
|
|
<option value="{{ this }}" {{#ifCond this '==' ../model.styles.block.fontSize}}SELECTED{{/ifCond}}>{{ this }}</option>
|
||
|
|
{{/each}}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mailpoet_form_field">
|
||
|
|
<div class="mailpoet_form_field_checkbox_option">
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" name="fontWeight" class="mailpoet_field_button_font_weight" value="bold" {{#ifCond model.styles.block.fontWeight '===' 'bold'}}CHECKED{{/ifCond}}/>
|
||
|
|
<%= __('Bold') %>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mailpoet_form_field">
|
||
|
|
<div class="mailpoet_form_field_input_option">
|
||
|
|
<input type="text" name="background-color" class="mailpoet_field_button_background_color mailpoet_color" value="{{ model.styles.block.backgroundColor }}" />
|
||
|
|
</div>
|
||
|
|
<div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Background') %></div>
|
||
|
|
</div>
|
||
|
|
<div class="mailpoet_form_field">
|
||
|
|
<div class="mailpoet_form_field_input_option">
|
||
|
|
<input type="text" name="border-color" class="mailpoet_field_button_border_color mailpoet_color" value="{{ model.styles.block.borderColor }}" />
|
||
|
|
</div>
|
||
|
|
<div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Border') %></div>
|
||
|
|
<div class="mailpoet_form_field_input_option">
|
||
|
|
<input type="number" name="border-width-input" class="mailpoet_input mailpoet_input_small mailpoet_field_button_border_width_input" value="{{getNumber model.styles.block.borderWidth}}" min="0" max="10" step="1" /> px
|
||
|
|
<input type="range" min="0" max="10" step="1" name="border-width" class="mailpoet_range mailpoet_range_small mailpoet_field_button_border_width" value="{{getNumber model.styles.block.borderWidth}}" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mailpoet_form_field">
|
||
|
|
<label>
|
||
|
|
<div class="mailpoet_form_field_title"><%= __('Rounded corners') %></div>
|
||
|
|
<div class="mailpoet_form_field_input_option">
|
||
|
|
<input type="number" name="border-radius-input" class="mailpoet_input mailpoet_input_small mailpoet_field_button_border_radius_input" value="{{getNumber model.styles.block.borderRadius}}" min="0" max="40" step="1" /> px
|
||
|
|
<input type="range" min="0" max="40" step="1" name="border-radius" class="mailpoet_range mailpoet_range_medium mailpoet_field_button_border_radius" value="{{getNumber model.styles.block.borderRadius }}" />
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="mailpoet_form_field">
|
||
|
|
<label>
|
||
|
|
<div class="mailpoet_form_field_title"><%= __('Width') %></div>
|
||
|
|
<div class="mailpoet_form_field_input_option">
|
||
|
|
<input type="number" name="width-input" class="mailpoet_input mailpoet_input_small mailpoet_field_button_width_input" value="{{getNumber model.styles.block.width}}" min="50" max="288" step="1" /> px
|
||
|
|
<input type="range" min="50" max="288" step="1" name="width" class="mailpoet_range mailpoet_range_medium mailpoet_field_button_width" value="{{getNumber model.styles.block.width }}" />
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<div class="mailpoet_form_field">
|
||
|
|
<label>
|
||
|
|
<div class="mailpoet_form_field_title"><%= __('Height') %></div>
|
||
|
|
<div class="mailpoet_form_field_input_option">
|
||
|
|
<input type="number" name="line-height-input" class="mailpoet_input mailpoet_input_small mailpoet_field_button_line_height_input" value="{{getNumber model.styles.block.lineHeight}}" min="20" max="50" step="1" /> px
|
||
|
|
<input type="range" min="20" max="50" step="1" name="line-height" class="mailpoet_range mailpoet_range_medium mailpoet_field_button_line_height" value="{{getNumber model.styles.block.lineHeight }}" />
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
{{#ifCond renderOptions.hideApplyToAll '!==' true}}
|
||
|
|
<div class="mailpoet_form_field">
|
||
|
|
<input type="button" name="replace-all-button-styles" class="button button-secondary mailpoet_button_full mailpoet_field_button_replace_all_styles" value="<%= __('Apply styles to all buttons') | escape('html_attr') %>" />
|
||
|
|
</div>
|
||
|
|
{{/ifCond}}
|
||
|
|
|
||
|
|
<div class="mailpoet_form_field">
|
||
|
|
<input type="button" class="button button-primary mailpoet_done_editing" value="<%= __('Done') | escape('html_attr') %>" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
fontsSelect('#mailpoet_field_button_font_family');
|
||
|
|
</script>
|