From 169bec084afc2b48d9cc46dd94cac19df7cfa8c1 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Mon, 14 Jun 2021 09:36:18 +0000
Subject: [PATCH] [IMP] web_editor: replace media padding select with px input

Currently, adding a padding to media is done with a select, which gives
a limited amount of options based on bootstrap classes.
This opens up the play field for the user by letting them input their
own pixel value.

closes odoo/odoo#72112

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
---
 .../static/src/js/editor/snippets.options.js  | 20 ++++---------------
 addons/web_editor/views/snippets.xml          |  8 +-------
 2 files changed, 5 insertions(+), 23 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 35e3ba52706..bc8cede6c19 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -4148,20 +4148,8 @@ registry.StaticMediaTools = SnippetOptionWidget.extend({
     toggleShapeThumbnail(previewMode) {
         this._toggleShape(previewMode, 'img-thumbnail');
     },
-    setPadding(previewMode, padding, params) {
-        if (previewMode === true) {
-            this.currentPadding = params.possibleValues.find(c => this.$target.hasClass(c)) || '';
-        }
-        for (const value of params.possibleValues) {
-            if (previewMode === 'reset') {
-                this.$target.toggleClass(value, value === this.currentPadding);
-            } else {
-                this.$target.toggleClass(value, value === padding)
-            }
-        }
-        if (previewMode === false) {
-            this.currentPadding = padding;
-        }
+    setPadding(previewMode, padding) {
+        this.$target.css('padding', padding);
     },
     align(previewMode, alignment, params) {
         if (previewMode === true) {
@@ -4187,7 +4175,7 @@ registry.StaticMediaTools = SnippetOptionWidget.extend({
         if (['toggleShapeRounded', 'toggleShapeCircle', 'toggleShapeShadow', 'toggleShapeThumbnail'].includes(methodName)) {
             return params.possibleValues.find(c => this.$target.hasClass(c)) || '';
         } else if (methodName === 'setPadding') {
-            return params.possibleValues.find(c => this.$target.hasClass(c)) || '';
+            return this.$target.css('padding');
         } else if (methodName === 'align') {
             return this._getAlignment();
         }
@@ -4255,7 +4243,7 @@ registry.FontawesomeTools = SnippetOptionWidget.extend({
  * General options of an image.
  */
 registry.ImageTools = SnippetOptionWidget.extend({
-    setWidth(previewMode, width, params) {
+    setWidth(previewMode, width) {
         if (previewMode === true) {
             this.currentWidth = this.$target.css('width');
         }
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 04dee9e63dc..db2db99d142 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -425,13 +425,7 @@
             <we-button data-toggle-shape-thumbnail="img-thumbnail" title="Shape: Thumbnail"><i class="fa fa-picture-o fa-fw"></i></we-button>
         </we-row>
 
-        <we-select string="Padding">
-            <we-button data-set-padding="" title="Padding: None">None</we-button>
-            <we-button data-set-padding="padding-small" title="Padding: Small">Small</we-button>
-            <we-button data-set-padding="padding-medium" title="Padding: Medium">Medium</we-button>
-            <we-button data-set-padding="padding-large" title="Padding: Large">Large</we-button>
-            <we-button data-set-padding="padding-xl" title="Padding: XL">Extra Large</we-button>
-        </we-select>
+        <we-input string="Padding" data-set-padding="" data-unit="px"/>
     </div>
 
     <div data-js="ImageOptimize"