settings.hbs
130 lines
| 1 | <h3><%= __('Button') %></h3> |
| 2 | <div class="mailpoet_form_field"> |
| 3 | <label> |
| 4 | <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Label') %></div> |
| 5 | <div class="mailpoet_form_field_input_option"> |
| 6 | <input type="text" name="text" class="mailpoet_input mailpoet_field_button_text" value="{{ model.text }}" /> |
| 7 | </div> |
| 8 | </label> |
| 9 | </div> |
| 10 | |
| 11 | {{#ifCond renderOptions.hideLink '!==' true}} |
| 12 | <div class="mailpoet_form_field"> |
| 13 | <label> |
| 14 | <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Link') %></div> |
| 15 | <div class="mailpoet_form_field_input_option"> |
| 16 | <input type="text" name="url" class="mailpoet_input mailpoet_field_button_url" value="{{ model.url }}" placeholder="http://" /> |
| 17 | </div> |
| 18 | </label> |
| 19 | </div> |
| 20 | {{/ifCond}} |
| 21 | |
| 22 | <div class="mailpoet_form_field"> |
| 23 | <div class="mailpoet_form_field_title"><%= __('Alignment') %></div> |
| 24 | <div class="mailpoet_form_field_radio_option"> |
| 25 | <label> |
| 26 | <input type="radio" name="alignment" class="mailpoet_field_button_alignment" value="left" {{#ifCond model.styles.block.textAlign '===' 'left'}}CHECKED{{/ifCond}}/> |
| 27 | <%= __('Left') %> |
| 28 | </label> |
| 29 | </div> |
| 30 | <div class="mailpoet_form_field_radio_option"> |
| 31 | <label> |
| 32 | <input type="radio" name="alignment" class="mailpoet_field_button_alignment" value="center" {{#ifCond model.styles.block.textAlign '===' 'center'}}CHECKED{{/ifCond}}/> |
| 33 | <%= __('Center') %> |
| 34 | </label> |
| 35 | </div> |
| 36 | <div class="mailpoet_form_field_radio_option"> |
| 37 | <label> |
| 38 | <input type="radio" name="alignment" class="mailpoet_field_button_alignment" value="right" {{#ifCond model.styles.block.textAlign '===' 'right'}}CHECKED{{/ifCond}}/> |
| 39 | <%= __('Right') %> |
| 40 | </label> |
| 41 | </div> |
| 42 | </div> |
| 43 | <div class="mailpoet_form_field mailpoet_form_narrow_select2"> |
| 44 | <div class="mailpoet_form_field_title"><%= __('Text') %></div> |
| 45 | <div class="mailpoet_form_field_input_option mailpoet_form_field_input_nowrap"> |
| 46 | <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 }}" /> |
| 47 | <select id="mailpoet_field_button_font_family" name="font-family" class="mailpoet_select mailpoet_select_medium mailpoet_field_button_font_family mailpoet_font_family"> |
| 48 | <optgroup label="<%= __('Standard fonts')%>"> |
| 49 | {{#each availableStyles.fonts.standard}} |
| 50 | <option value="{{ this }}" {{#ifCond this '==' ../model.styles.block.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option> |
| 51 | {{/each}} |
| 52 | </optgroup> |
| 53 | <optgroup label="<%= __('Custom fonts')%>"> |
| 54 | {{#each availableStyles.fonts.custom}} |
| 55 | <option value="{{ this }}" {{#ifCond this '==' ../model.styles.block.fontFamily}}SELECTED{{/ifCond}}>{{ this }}</option> |
| 56 | {{/each}} |
| 57 | </optgroup> |
| 58 | </select> |
| 59 | <select id="mailpoet_field_button_font_size" name="font-size" class="mailpoet_select mailpoet_select_small mailpoet_field_button_font_size mailpoet_font_size"> |
| 60 | {{#each availableStyles.headingSizes}} |
| 61 | <option value="{{ this }}" {{#ifCond this '==' ../model.styles.block.fontSize}}SELECTED{{/ifCond}}>{{ this }}</option> |
| 62 | {{/each}} |
| 63 | </select> |
| 64 | </div> |
| 65 | </div> |
| 66 | <div class="mailpoet_form_field"> |
| 67 | <div class="mailpoet_form_field_checkbox_option"> |
| 68 | <label> |
| 69 | <input type="checkbox" name="fontWeight" class="mailpoet_field_button_font_weight" value="bold" {{#ifCond model.styles.block.fontWeight '===' 'bold'}}CHECKED{{/ifCond}}/> |
| 70 | <%= __('Bold') %> |
| 71 | </label> |
| 72 | </div> |
| 73 | </div> |
| 74 | <div class="mailpoet_form_field"> |
| 75 | <div class="mailpoet_form_field_input_option"> |
| 76 | <input type="text" name="background-color" class="mailpoet_field_button_background_color mailpoet_color" value="{{ model.styles.block.backgroundColor }}" /> |
| 77 | </div> |
| 78 | <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Background') %></div> |
| 79 | </div> |
| 80 | <div class="mailpoet_form_field"> |
| 81 | <div class="mailpoet_form_field_input_option"> |
| 82 | <input type="text" name="border-color" class="mailpoet_field_button_border_color mailpoet_color" value="{{ model.styles.block.borderColor }}" /> |
| 83 | </div> |
| 84 | <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Border') %></div> |
| 85 | <div class="mailpoet_form_field_input_option"> |
| 86 | <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 |
| 87 | <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}}" /> |
| 88 | </div> |
| 89 | </div> |
| 90 | <div class="mailpoet_form_field"> |
| 91 | <label> |
| 92 | <div class="mailpoet_form_field_title"><%= __('Rounded corners') %></div> |
| 93 | <div class="mailpoet_form_field_input_option"> |
| 94 | <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 |
| 95 | <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 }}" /> |
| 96 | </div> |
| 97 | </label> |
| 98 | </div> |
| 99 | <div class="mailpoet_form_field"> |
| 100 | <label> |
| 101 | <div class="mailpoet_form_field_title"><%= __('Width') %></div> |
| 102 | <div class="mailpoet_form_field_input_option"> |
| 103 | <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 |
| 104 | <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 }}" /> |
| 105 | </div> |
| 106 | </label> |
| 107 | </div> |
| 108 | <div class="mailpoet_form_field"> |
| 109 | <label> |
| 110 | <div class="mailpoet_form_field_title"><%= __('Height') %></div> |
| 111 | <div class="mailpoet_form_field_input_option"> |
| 112 | <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 |
| 113 | <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 }}" /> |
| 114 | </div> |
| 115 | </label> |
| 116 | </div> |
| 117 | {{#ifCond renderOptions.hideApplyToAll '!==' true}} |
| 118 | <div class="mailpoet_form_field"> |
| 119 | <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') %>" /> |
| 120 | </div> |
| 121 | {{/ifCond}} |
| 122 | |
| 123 | <div class="mailpoet_form_field"> |
| 124 | <input type="button" class="button button-primary mailpoet_done_editing" value="<%= __('Done') | escape('html_attr') %>" /> |
| 125 | </div> |
| 126 | |
| 127 | <script type="text/javascript"> |
| 128 | fontsSelect('#mailpoet_field_button_font_family'); |
| 129 | </script> |
| 130 |