[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

3 files changed, 9 insertions, 162 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index c1af7852fd2..bf7960cc13d 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -674,7 +674,7 @@ options.registry.parallax = options.Class.extend({
      */
     onFocus: function () {
         this.trigger_up('option_update', {
-            optionNames: ['background', 'background_position'],
+            optionNames: ['background', 'BackgroundPosition'],
             name: 'target',
             data: this.$target.find('> .s_parallax_bg'),
         });
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 850f180f903..6e29659612c 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -239,6 +239,14 @@ font[class*='bg-'] {
 .oe_img_bg {
     background-size: cover;
     background-repeat: no-repeat;
+
+    &.o_bg_img_opt_repeat {
+        background-size: auto;
+        background-repeat: repeat;
+    }
+
+    // Compatibility <= 13.0, TODO remove?
+    // -----------------------------------
     &.o_bg_img_opt_contain {
         background-size: contain;
         background-position: center center;
@@ -246,9 +254,6 @@ font[class*='bg-'] {
     &.o_bg_img_opt_custom {
         background-size: auto;
     }
-    &.o_bg_img_opt_repeat {
-        background-repeat: repeat;
-    }
     &.o_bg_img_opt_repeat_x {
         background-repeat: repeat-x;
     }
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 3206e4b027a..4e6fa2bc0c9 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -159,161 +159,3 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         opacity: 0;
     }
 }
-
-// MODALS
-body .modal {
-
-    // BACKGROUND IMAGE OPTIONS
-    .o_bg_img_opt_modal .o_bg_img_opt {
-        margin: 15px 0;
-
-        .help-control {
-            @include o-position-absolute(15px, 15px);
-        }
-
-        .help {
-            margin: 15px 0;
-
-            .simulator {
-                position: relative;
-                float: left;
-                margin-right: 15px;
-                width: 120px;
-                height: 100px;
-
-                .bg {
-                    @include o-position-absolute(0, 0, 0, 0);
-                    border: 1px dotted #888787;
-                    background-image: url(/web/image);
-                    background-position: center center;
-                    background-size: cover;
-                }
-
-                .el {
-                    @include o-position-absolute(10px, 0, 10px, 0);
-                    border: 1px solid #222;
-                }
-
-                &.contain_bg {
-                    .bg {
-                        @include o-position-absolute(0, 12px, 20px, 12px);
-                    }
-
-                    .el {
-                        @include o-position-absolute(0, 0, 20px, 0);
-                    }
-                }
-            }
-
-            +* {
-                clear: left;
-            }
-        }
-
-        .o_bg_img_opt_cover_edition {
-            @include o-we-preview-box;
-            padding: 0 25px 25px 25px;
-
-            h6 {
-                color: white;
-                font-weight: bold;
-            }
-
-            .o_bg_img_opt_object {
-                position: relative;
-                background: white;
-                min-height: 10px;
-                @include o-we-preview-content;
-
-                >img {
-                    cursor: crosshair;
-                    border-top: 1px solid #5A5A5A;
-                    border-bottom: 1px solid #111;
-                }
-
-                &:hover .o_focus_point:before {
-                    opacity: 0.5;
-                }
-            }
-
-            .o_bg_img_opt_ui_info {
-                animation: fadeInOut 2s ease forwards;
-                @include o-position-absolute($bottom: 1px, $right: 0);
-                display: block;
-                padding: 3px 13px;
-                background-color: rgba(255, 255, 255, 0.8);
-                color: #333;
-                text-align: center;
-                font-weight: bold;
-                pointer-events: none;
-
-                span {
-                    font-weight: normal;
-                }
-
-                .o_x {
-                    margin-right: 10px
-                }
-            }
-
-            .grid {
-                @include o-position-absolute($top: 33.33%, $left: 0);
-                display: block;
-                width: 100%;
-                height: 1px;
-                background: fade-out(lighten($o-brand-primary, 30%), 0.5);
-                pointer-events: none;
-
-                &.grid-2 {
-                    top: 66.66%
-                }
-
-                &.grid-3 {
-                    top: 0;
-                    left: 33.33%;
-                    width: 1px;
-                    height: 100%
-                }
-
-                &.grid-4 {
-                    top: 0;
-                    left: 66.66%;
-                    width: 1px;
-                    height: 100%
-                }
-            }
-
-            .o_focus_point {
-                @include o-position-absolute($top: 0, $left: 0);
-                width: 30px;
-                height: 30px;
-                border: 2px solid white;
-                border-radius: 100%;
-                margin-top: -15px;
-                margin-left: -15px;
-                box-shadow: 0 0 1px #333;
-                pointer-events: none;
-
-                &.o_with_transition {
-                    transition: all 0.2s ease 0s;
-                }
-
-                &:before {
-                    pointer-events: none;
-                    content: "";
-                    display: block;
-                    width: 100px;
-                    height: 100px;
-                    margin-top: -37px;
-                    margin-left: -37px;
-                    border: 1px solid #EAEAEA;
-                    background: rgba(247, 76, 76, 0);
-                    border-radius: 100em;
-                    opacity: 1;
-                    box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33);
-                    transition: opacity 0.2s ease 0s;
-                }
-            }
-        }
-    }
-}