[IMP] web: add noTransparency option for colorpicker dialog

Added a boolean option to toggle opacity settings on the colorpicker dialog widget.
When set to true, both the opacity slider and the opacity input are hidden in the
dialog. When not set or set to false, opacity settings remain unchanged.

3 files changed, 23 insertions, 11 deletions

diff --git a/addons/web/static/src/js/widgets/colorpicker_dialog.js b/addons/web/static/src/js/widgets/colorpicker_dialog.js
index d6314c6b8b3..bf0d656a8c6 100644
--- a/addons/web/static/src/js/widgets/colorpicker_dialog.js
+++ b/addons/web/static/src/js/widgets/colorpicker_dialog.js
@@ -23,6 +23,7 @@ var ColorpickerDialog = Dialog.extend({
      * @param {Widget} parent
      * @param {Object} [options]
      * @param {string} [options.defaultColor='#FF0000']
+     * @param {string} [options.noTransparency=false]
      */
     init: function (parent, options) {
         options = options || {};
@@ -125,13 +126,15 @@ var ColorpickerDialog = Dialog.extend({
         var y = this.colorComponents.hue * height / 360;
         this.$colorSliderPointer.css('top', Math.round(y - 2));
 
-        // Update opacity slider position
-        var heightOpacity = this.$opacitySlider.height();
-        var z = heightOpacity * (1 - this.colorComponents.opacity / 100.0);
-        this.$opacitySliderPointer.css('top', Math.round(z - 2));
+        if (! this.options.noTransparency) {
+            // Update opacity slider position
+            var heightOpacity = this.$opacitySlider.height();
+            var z = heightOpacity * (1 - this.colorComponents.opacity / 100.0);
+            this.$opacitySliderPointer.css('top', Math.round(z - 2));
 
-        // Add gradient color on opacity slider
-        this.$opacitySlider.css('background', 'linear-gradient(' + this.colorComponents.hex + ' 0%, transparent 100%)');
+            // Add gradient color on opacity slider
+            this.$opacitySlider.css('background', 'linear-gradient(' + this.colorComponents.hex + ' 0%, transparent 100%)');
+        }
     },
     /**
      * Updates colors according to given hex value. Opacity is left unchanged.
@@ -300,7 +303,7 @@ var ColorpickerDialog = Dialog.extend({
      * @param {Event} ev
      */
     _onMouseMoveOpacitySlider: function (ev) {
-        if (!this.opacitySliderFlag) {
+        if (!this.opacitySliderFlag || this.options.noTransparency) {
             return;
         }
 
diff --git a/addons/web/static/src/scss/colorpicker.scss b/addons/web/static/src/scss/colorpicker.scss
index 707897861d0..ade14ca9c7c 100644
--- a/addons/web/static/src/scss/colorpicker.scss
+++ b/addons/web/static/src/scss/colorpicker.scss
@@ -53,6 +53,16 @@
         }
     }
     .o_color_picker_inputs {
+        display: -webkit-flex;
+        flex-direction: column;
+        & > .form-row {
+            flex: 1;
+            .col {
+                display: -webkit-flex;
+                flex-direction: column;
+                justify-content: space-around;
+            }
+        }
         .o_color_preview_parent {
             background-image: url('/web_editor/static/src/img/transparent.png');
         }
diff --git a/addons/web/static/src/xml/colorpicker_dialog.xml b/addons/web/static/src/xml/colorpicker_dialog.xml
index e58c70b6acd..edcb9376026 100644
--- a/addons/web/static/src/xml/colorpicker_dialog.xml
+++ b/addons/web/static/src/xml/colorpicker_dialog.xml
@@ -11,7 +11,7 @@
                 <div class="o_color_slider d-inline-block ml-2 border">
                     <div class="o_slider_pointer" />
                 </div>
-                <div class="o_opacity_slider d-inline-block ml-2 border">
+                <div class="o_opacity_slider d-inline-block ml-2 border" t-if="!widget.options.noTransparency">
                     <div class="o_opacity_pointer" />
                 </div>
             </div>
@@ -52,7 +52,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group">
+                <div class="form-group" t-if="!widget.options.noTransparency">
                     <label for="opacity">Opacity %</label>
                     <input type="text" class="form-control o_opacity_input" data-color-method="opacity" id="opacity" />
                 </div>
@@ -60,5 +60,4 @@
         </div>
     </div>
 </t>
-
-</templates>
\ No newline at end of file
+</templates>