[IMP] web_editor: review optimize dialog design
This commit makes the UX of the optimize dialog clearer. Part of https://github.com/odoo/odoo/pull/34422 task-2026299
This commit is contained in:
qsm-odoo
@@ -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>
|
||||
<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 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>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user