diff options
Diffstat (limited to 'addons/web_editor/static/src/xml')
| -rw-r--r-- | addons/web_editor/static/src/xml/wysiwyg.xml | 81 |
1 files changed, 59 insertions, 22 deletions
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml index f358f4ad178..b5372892fe5 100644 --- a/addons/web_editor/static/src/xml/wysiwyg.xml +++ b/addons/web_editor/static/src/xml/wysiwyg.xml @@ -168,52 +168,89 @@ <div class="row"> <div class="o_we_config_column col-lg-6"> <div class="form-group"> - <label class="o_we_title_label" for="o_we_name_input">Name</label> + <label class="o_we_title_label" for="o_we_name_input"> + Name + <i class="fa fa-question-circle-o" title="Give a relevant name to your file to optimize search engine results."/> + </label> <input type="text" class="form-control" id="o_we_name_input" name="filename" aria-describedby="nameHelp" t-att-value="widget.attachment.name" required="required"/> - <small id="nameHelp" class="form-text text-muted">Give a relevant name to your file to optimize search engine results.</small> </div> - <small t-if="widget.disableResize" class="form-text text-muted o_we_no_resize"><span class="fa fa-info-circle"/> Resizing is not supported for images of type <t t-esc="widget.attachment.mimetype"/>.</small> - <div class="form-group" t-else="1"> - <div> - <div class="btn-group btn-group-sm mt-2" role="group" aria-label="Sizes"> - <t t-foreach="widget.suggestedWidths" t-as="suggestedWidth"> - <button t-attf-class="btn btn-link o_we_width_preset #{suggestedWidth.width === widget.attachment.image_width ? ' active' : ''}" t-att-data-width="suggestedWidth.width" t-esc="suggestedWidth.text"/> - </t> + <small t-if="widget.disableResize" class="form-text text-muted o_we_no_resize"> + <span class="fa fa-info-circle"/> Resizing is not supported for images of type <t t-esc="widget.attachment.mimetype"/>. + </small> + <div t-else="1" class="form-group"> + <label class="o_we_title_label" for="o_we_name_input"> + Size + <i class="fa fa-question-circle-o" title="Reduce the size as much as possible to increase performance."/> + </label> + <div class="form-row align-items-center"> + <div class="col"> + <div class="input-group"> + <div class="input-group-prepend"> + <div class="input-group-text">Width</div> + </div> + <input type="number" class="form-control" id="o_we_width" name="width" aria-describedby="sizeHelp" min="1" t-att-max="widget.attachment.image_width" t-att-value="widget.defaultWidth"/> + <div class="input-group-append"> + <div class="input-group-text">px</div> + </div> + </div> + </div> + <div class="col-auto"> + <i class="fa fa-times"/> </div> + <div class="col"> + <div class="input-group"> + <div class="input-group-prepend"> + <div class="input-group-text">Height</div> + </div> + <input type="number" class="form-control" id="o_we_height" name="height" aria-describedby="sizeHelp" min="1" t-att-max="widget.attachment.image_height" t-att-value="widget.defaultHeight"/> + <div class="input-group-append"> + <div class="input-group-text">px</div> + </div> + </div> + </div> + </div> + <div class="form-text small text-right"> + <i class="fa fa-info-circle text-info"/> + <span>Or choose a preset:</span> + <t t-foreach="widget.suggestedWidths" t-as="suggestedWidth"> + <span t-if="suggestedWidth_index > 0">-</span> + <a href="#" class="o_we_width_preset" t-att-data-width="suggestedWidth.width" t-esc="suggestedWidth.text"/> + </t> </div> - <label class="o_we_title_label" for="o_we_width">Width (in px)</label> - <input type="number" class="form-control" id="o_we_width" name="width" aria-describedby="sizeHelp" min="1" t-att-max="widget.attachment.image_width" t-att-value="widget.defaultWidth"/> - <label class="o_we_title_label" for="o_we_height">Height (in px)</label> - <input type="number" class="form-control" id="o_we_height" name="height" aria-describedby="sizeHelp" min="1" t-att-max="widget.attachment.image_height" t-att-value="widget.defaultHeight"/> - <small id="sizeHelp" class="form-text text-muted">Reduce the size as much as possible to increase performance.</small> </div> - <small t-if="widget.disableQuality" class="form-text text-muted o_we_no_quality"><span class="fa fa-info-circle"/> Changing the quality is not supported for images of type <t t-esc="widget.attachment.mimetype"/>.</small> + <small t-if="widget.disableQuality" class="form-text text-muted o_we_no_quality"> + <span class="fa fa-info-circle"/> Changing the quality is not supported for images of type <t t-esc="widget.attachment.mimetype"/>. + </small> <div class="form-group" t-else="1"> <t t-if="widget.toggleQuality"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="o_we_optimize_quality" t-att-checked="widget.isExisting ? undefined : 'checked'" aria-describedby="toggleQualityHelp"/> - <label class="custom-control-label" for="o_we_optimize_quality">Optimize</label> + <label class="custom-control-label" for="o_we_optimize_quality"> + Optimize + <i class="fa fa-question-circle-o" title="This reduces the quality to increase performance."/> + </label> </div> - <small id="toggleQualityHelp" class="form-text text-muted">This reduces the quality to increase performance.</small> </t> <t t-else="1"> - <label class="o_we_title_label" for="o_we_quality_input">Quality</label> - <div class="form-row"> + <label class="o_we_title_label" for="o_we_quality_input"> + Quality + <i class="fa fa-question-circle-o" title="Reduce the quality as much as possible to increase performance."/> + </label> + <div class="form-row align-items-center"> <div class="col-sm-10"> - <input type="range" class="custom-range o_we_quality_range" id="quality_range" name="quality_range" min="1" max="100" step="1" aria-describedby="rangeQualityHelp" t-att-value="widget.defaultQuality"/> + <input type="range" class="custom-range align-middle o_we_quality_range" id="quality_range" name="quality_range" min="1" max="100" step="1" aria-describedby="rangeQualityHelp" t-att-value="widget.defaultQuality"/> </div> <div class="col-sm-2"> <input type="number" class="form-control" id="o_we_quality_input" name="quality" min="1" max="100" step="1" aria-describedby="rangeQualityHelp" t-att-value="widget.defaultQuality"/> </div> </div> - <small id="rangeQualityHelp" class="form-text text-muted">Reduce the quality as much as possible to increase performance.</small> </t> </div> </div> <div class="o_we_preview_column col-lg-6"> - <h4>Preview with the current settings</h4> + <h4>Preview</h4> <div class="mw-100 o_we_preview_area"> <img class="img o_we_preview_image" alt="Image Preview"/> </div> |