diff --git a/web_editor_background_color/README.rst b/web_editor_background_color/README.rst index 3a4d3cfb..24a2f466 100644 --- a/web_editor_background_color/README.rst +++ b/web_editor_background_color/README.rst @@ -21,27 +21,14 @@ To use this module, you need to: ``mass_mailing`` or ``website``. #. Use that module's facilities to edit some web content. #. Drag & drop any snippet into the web editor body. -#. Click on *Customize > Color*. -#. Choose: - - * A color from the theme preset. - * A custom color by clicking on the text input and then either: - - * Writing the HTML color code. - * Selecting a color from the color picker. - * Writing "transparent" to remove it. +#. Click on *Customize > Text-Image > Background Color > icon*. +#. Choose a custom color by either: + * Writing any valid HTML color code in the text input. + * Selecting a color from the color picker. .. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas :alt: Try me on Runbot - :target: https://runbot.odoo-community.org/runbot/162/9.0 - -Known issues / Roadmap -====================== - -* When migrating to v10, adapt this option again to its brand new built-in - colorpicker. -* While you write to the text input, you may notice it disappears for a moment, - but don't worry, you are still writing. + :target: https://runbot.odoo-community.org/runbot/162/10.0 Bug Tracker =========== diff --git a/web_editor_background_color/__openerp__.py b/web_editor_background_color/__manifest__.py similarity index 87% rename from web_editor_background_color/__openerp__.py rename to web_editor_background_color/__manifest__.py index 5d993b7b..05668139 100644 --- a/web_editor_background_color/__openerp__.py +++ b/web_editor_background_color/__manifest__.py @@ -4,7 +4,7 @@ { "name": "Web Editor Background Color Picker", "summary": "Set any background color for web editor snippets", - "version": "9.0.1.0.0", + "version": "10.0.1.0.0", "category": "Website", "website": "https://www.tecnativa.com", "author": "Tecnativa, Odoo Community Association (OCA)", @@ -18,7 +18,6 @@ "web_editor", ], "data": [ - "views/assets.xml", - "views/snippets.xml", + "templates/assets.xml", ], } diff --git a/web_editor_background_color/static/description/mass_mailing_editor.png b/web_editor_background_color/static/description/mass_mailing_editor.png index fdedda2f..ac8324a8 100644 Binary files a/web_editor_background_color/static/description/mass_mailing_editor.png and b/web_editor_background_color/static/description/mass_mailing_editor.png differ diff --git a/web_editor_background_color/static/src/css/background_color.less b/web_editor_background_color/static/src/css/background_color.less index 22d32161..52629bdf 100644 --- a/web_editor_background_color/static/src/css/background_color.less +++ b/web_editor_background_color/static/src/css/background_color.less @@ -3,12 +3,21 @@ @colorpicker-img-path: "./"; -.colorpicker { - .bg-custom { - display: inherit; - .colorpicker-visible { - min-width: initial; - padding: 1ex; - } +.colorpicker-element { + @colorpicker-width: 170px; + @colorpicker-height: 118px; + + .colorpicker-inline { + min-width: initial; + display: block; + margin-top: 3px !important; + } + .colorpicker-saturation { + width: @colorpicker-height; + height: @colorpicker-height; + } + .colorpicker-hue, .colorpicker-alpha { + width: (@colorpicker-width - @colorpicker-height) / 2; + height: @colorpicker-height; } } diff --git a/web_editor_background_color/static/src/js/background_color.js b/web_editor_background_color/static/src/js/background_color.js index f7d1687b..7516560b 100644 --- a/web_editor_background_color/static/src/js/background_color.js +++ b/web_editor_background_color/static/src/js/background_color.js @@ -7,54 +7,69 @@ odoo.define("web_editor_background_color.colorpicker", function (require) { var core = require("web.core"); var options = require("web_editor.snippets.options"); - var ready = ajax.loadXML( + ajax.loadXML( "/web_editor_background_color/static/src/xml/colorpicker.xml", core.qweb ); - options.registry.colorpicker.include({ + return options.registry.colorpicker.include({ bind_events: function () { this._super(); // Remove inline background-color for normal class-based buttons - this.$el.find(".colorpicker button").on( + this.$el.find(".o_colorpicker_section button[data-color]").on( "click", $.proxy(this.remove_inline_background_color, this) ); // Enable custom color picker - this.$custom = this.$el.find(".bg-custom"); + this.$custom = this.$el.find('[data-name="custom_color"]'); this.$custom.colorpicker({ color: this.$target.css("background-color"), container: true, + inline: true, + sliders: { + saturation: { + maxLeft: 118, + maxTop: 118, + }, + hue: { + maxTop: 118, + }, + alpha: { + maxTop: 118, + }, + }, }); this.$custom.on( "changeColor", - $.proxy(this.set_inline_background_color, this) - ); - this.$custom.on("click", $.proxy(this.custom_click, this)); + $.proxy(this.set_inline_background_color, this)); + this.$custom.on( + "click keypress keyup keydown", + $.proxy(this.custom_abort_event, this)); this.$custom.on( + "click", "input", + $.proxy(this.input_select, this)); + this.$el.find(".note-color-reset").on( "click", - "input", - $.proxy(this.input_select, this) - ); + $.proxy(this.remove_inline_background_color, this)); // Activate border color changes if it matches background's var style = this.$target.prop("style"); this.change_border = style["border-color"] && style["background-color"] === style["border-color"]; }, - custom_click: function (event) { + custom_abort_event: function (event) { // HACK Avoid dropdown disappearing when picking colors event.stopPropagation(); }, input_select: function (event) { $(event.target).focus().select(); - this.$custom.colorpicker("show"); }, remove_inline_background_color: function (event) { this.$target.css("background-color", ""); if (this.change_border) { this.$target.css("border-color", ""); } + this.$target.trigger("background-color-event", event.type); }, set_inline_background_color: function (event) { var color = String(event.color); @@ -62,11 +77,7 @@ odoo.define("web_editor_background_color.colorpicker", function (require) { if (this.change_border) { this.$target.css("border-color", color); } + this.$target.trigger("background-color-event", event.type); }, }); - - return { - ready: ready, - colorpicker: options.registry.colorpicker, - }; }); diff --git a/web_editor_background_color/static/src/xml/colorpicker.xml b/web_editor_background_color/static/src/xml/colorpicker.xml index e9514f9e..3b331a2c 100644 --- a/web_editor_background_color/static/src/xml/colorpicker.xml +++ b/web_editor_background_color/static/src/xml/colorpicker.xml @@ -5,14 +5,13 @@ - - - -
- -
- - + +
+ +
diff --git a/web_editor_background_color/views/assets.xml b/web_editor_background_color/templates/assets.xml similarity index 92% rename from web_editor_background_color/views/assets.xml rename to web_editor_background_color/templates/assets.xml index f36f037d..a850fcde 100644 --- a/web_editor_background_color/views/assets.xml +++ b/web_editor_background_color/templates/assets.xml @@ -4,7 +4,7 @@ -