[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

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>