From dfd98f49e7f2ab5c94dcae3af2d14750d301fa0a Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Thu, 24 Oct 2019 13:15:55 +0000
Subject: [IMP] web_editor: rework background-sizing option

Previously, background size and position for snippets was configured in
a modal, the user could choose a "focus point", which is rather
unintuitive. They could also choose to use the "contain" background
mode, with or without repeat, or a third option, where they could
customize everything, from the background size in both directions to
whether to repeat the background in only one or in both directions.

This commit streamlines the background-sizing options, only the "cover"
and "repeat pattern" options have been kept, as they cover almost every
use case. Their configuration has been moved into the options menu for
consistency with the rest of the editor, and the background's position
is now chosen by clicking on the corresponding menu option, and dragging
the background to the desired place.

Part of https://github.com/odoo/odoo/pull/38959
maintask-2066614
task-2088304
---
 addons/web_editor/static/src/xml/editor.xml | 104 +++-------------------------
 1 file changed, 9 insertions(+), 95 deletions(-)

(limited to 'addons/web_editor/static/src/xml')

diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index ca653c5d7ea..b1d7128e2c1 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -13,102 +13,16 @@
     <!-- Snippet options -->
     <!--=================-->
 
-    <!-- Background position option dialog -->
-    <div t-name="web_editor.dialog.background_position" class="o_bg_img_opt_modal">
-        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="cover"/> Cover</label>
-        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="contain"/> Contain</label>
-        <label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="custom"/> Custom</label>
-
-        <div class="o_bg_img_opt" data-value="cover">
-            <div class="o_bg_img_opt_cover_edition">
-                <h6>Assign a focal point that will always be visible</h6>
-                <div class="o_bg_img_opt_object">
-                    <span class="grid grid-1"/>
-                    <span class="grid grid-2"/>
-                    <span class="grid grid-3"/>
-                    <span class="grid grid-4"/>
-                    <span class="o_focus_point"/>
-                    <div class="o_bg_img_opt_ui_info">X: <span class="o_x"/> Y: <span class="o_y"/></div>
+    <!-- Background position option overlay -->
+    <t t-name="web_editor.background_position_overlay">
+        <div class="o_we_background_position_overlay oe_overlay">
+            <div class="o_we_overlay_content position-absolute">
+                <div class="o_overlay_background"/>
+                <div class="position-absolute d-flex m-1" style="top: 0">
+                    <button class="btn btn-primary mr-1 o_btn_apply">Apply</button>
+                    <button class="btn btn-danger o_btn_discard">Discard</button>
                 </div>
             </div>
         </div>
-        <div class="o_bg_img_opt" data-value="contain">
-            <form>
-                <div class="form-group row">
-                    <label class="col-md-2 col-form-label" for="repeatInput">Repeat</label>
-                    <div class="col-md-5">
-                        <div class="checkbox">
-                            <label>
-                                <input type="checkbox" id="o_bg_img_opt_contain_repeat"/>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <form class="o_bg_img_opt" data-value="custom">
-            <fieldset>
-                <legend>Background size</legend>
-                <p>Sets the width and height of the background image in percent of the parent element.</p>
-                <div class="form-group row">
-                    <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_size_x">Background width</label>
-                    <div class="col-md-5">
-                        <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control" id="o_bg_img_opt_custom_size_x" placeholder="auto"/>
-                            <div class="input-group-append">
-                                <div class="input-group-text">%</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_size_y">Background height</label>
-                    <div class="col-md-5">
-                        <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control" id="o_bg_img_opt_custom_size_y" placeholder="auto"/>
-                            <div class="input-group-append">
-                                <div class="input-group-text">%</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </fieldset>
-            <fieldset>
-                <legend>Background position</legend>
-                <p>Set the starting position of the background image.</p>
-                <div class="form-group row">
-                    <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label>
-                    <div class="col-md-5">
-                        <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control " id="o_bg_img_opt_custom_pos_x" placeholder="auto"/>
-                            <div class="input-group-append">
-                                <div class="input-group-text">%</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_pos_y">Vertical</label>
-                    <div class="col-md-5">
-                        <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/>
-                            <div class="input-group-append">
-                                <div class="input-group-text">%</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </fieldset>
-            <fieldset>
-                <legend>Background repeat</legend>
-                <p>Define if/how the background image will be repeated</p>
-                <select class="form-control" id="o_bg_img_opt_custom_repeat">
-                    <option value="">No repeat</option>
-                    <option value="o_bg_img_opt_repeat">Repeat both</option>
-                    <option value="o_bg_img_opt_repeat_x">Repeat x</option>
-                    <option value="o_bg_img_opt_repeat_y">Repeat y</option>
-                </select>
-            </fieldset>
-        </form>
-    </div>
+    </t>
 </templates>
-- 
cgit v1.2.3