diff --git a/web_editor_background_color/README.rst b/web_editor_background_color/README.rst index 3a4d3cfb9..24a2f4668 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 5d993b7bc..056681393 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/i18n/ca.po b/web_editor_background_color/i18n/ca.po index 18042bfb1..5e97c5832 100644 --- a/web_editor_background_color/i18n/ca.po +++ b/web_editor_background_color/i18n/ca.po @@ -1,7 +1,7 @@ # Translation of Odoo Server. # This file contains the translation of the following modules: # * web_editor_background_color -# +# # Translators: # Marc Tormo i Bochaca , 2017 msgid "" @@ -12,13 +12,11 @@ msgstr "" "PO-Revision-Date: 2017-03-30 08:28+0000\n" "Last-Translator: Marc Tormo i Bochaca , 2017\n" "Language-Team: Catalan (https://www.transifex.com/oca/teams/23907/ca/)\n" +"Language: ca\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: \n" -"Language: ca\n" "Plural-Forms: nplurals=2; plural=(n != 1);\n" -#. module: web_editor_background_color -#: model:ir.ui.view,arch_db:web_editor_background_color.snippet_options -msgid "Color" -msgstr "Color" +#~ msgid "Color" +#~ msgstr "Color" diff --git a/web_editor_background_color/i18n/es.po b/web_editor_background_color/i18n/es.po index 9d82bffe7..bab232fcb 100644 --- a/web_editor_background_color/i18n/es.po +++ b/web_editor_background_color/i18n/es.po @@ -10,14 +10,12 @@ msgstr "" "PO-Revision-Date: 2016-02-09 17:33+0100\n" "Last-Translator: <>\n" "Language-Team: \n" +"Language: es\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: \n" -"Language: es\n" "X-Generator: Poedit 1.8.6\n" -#. module: website_mail_snippet_bg_color -#: view:website:website_mail.email_designer_snippets -msgid "Pick Background Color" -msgstr "Escoger el color de fondo" +#~ msgid "Pick Background Color" +#~ msgstr "Escoger el color de fondo" diff --git a/web_editor_background_color/i18n/fr.po b/web_editor_background_color/i18n/fr.po index f7272f61e..0a3d95a3f 100644 --- a/web_editor_background_color/i18n/fr.po +++ b/web_editor_background_color/i18n/fr.po @@ -1,7 +1,7 @@ # Translation of Odoo Server. # This file contains the translation of the following modules: # * website_mail_snippet_bg_color -# +# # Translators: # Christophe CHAUVET , 2016 msgid "" @@ -11,14 +11,13 @@ msgstr "" "POT-Creation-Date: 2016-06-30 01:07+0000\n" "PO-Revision-Date: 2016-06-17 14:52+0000\n" "Last-Translator: Christophe CHAUVET \n" -"Language-Team: French (http://www.transifex.com/oca/OCA-social-8-0/language/fr/)\n" +"Language-Team: French (http://www.transifex.com/oca/OCA-social-8-0/language/" +"fr/)\n" +"Language: fr\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: \n" -"Language: fr\n" "Plural-Forms: nplurals=2; plural=(n > 1);\n" -#. module: website_mail_snippet_bg_color -#: view:website:website_mail.email_designer_snippets -msgid "Pick Background Color" -msgstr "Mettre la couleur de fond" +#~ msgid "Pick Background Color" +#~ msgstr "Mettre la couleur de fond" diff --git a/web_editor_background_color/i18n/sl.po b/web_editor_background_color/i18n/sl.po index 1bd31b99b..a06a2d19a 100644 --- a/web_editor_background_color/i18n/sl.po +++ b/web_editor_background_color/i18n/sl.po @@ -1,7 +1,7 @@ # Translation of Odoo Server. # This file contains the translation of the following modules: # * website_mail_snippet_bg_color -# +# # Translators: # Matjaž Mozetič , 2016 msgid "" @@ -11,14 +11,14 @@ msgstr "" "POT-Creation-Date: 2016-02-27 01:40+0000\n" "PO-Revision-Date: 2016-02-27 16:56+0000\n" "Last-Translator: Matjaž Mozetič \n" -"Language-Team: Slovenian (http://www.transifex.com/oca/OCA-social-8-0/language/sl/)\n" +"Language-Team: Slovenian (http://www.transifex.com/oca/OCA-social-8-0/" +"language/sl/)\n" +"Language: sl\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: \n" -"Language: sl\n" -"Plural-Forms: nplurals=4; plural=(n%100==1 ? 0 : n%100==2 ? 1 : n%100==3 || n%100==4 ? 2 : 3);\n" +"Plural-Forms: nplurals=4; plural=(n%100==1 ? 0 : n%100==2 ? 1 : n%100==3 || n" +"%100==4 ? 2 : 3);\n" -#. module: website_mail_snippet_bg_color -#: view:website:website_mail.email_designer_snippets -msgid "Pick Background Color" -msgstr "Izbira barve ozadja" +#~ msgid "Pick Background Color" +#~ msgstr "Izbira barve ozadja" diff --git a/web_editor_background_color/i18n/web_editor_background_color.pot b/web_editor_background_color/i18n/web_editor_background_color.pot new file mode 100644 index 000000000..b662aad9b --- /dev/null +++ b/web_editor_background_color/i18n/web_editor_background_color.pot @@ -0,0 +1,14 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 10.0\n" +"Report-Msgid-Bugs-To: \n" +"Last-Translator: <>\n" +"Language-Team: \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: \n" + 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 fdedda2f5..ac8324a84 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 22d321618..52629bdfd 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 f7d1687b6..7516560bf 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 e9514f9ea..3b331a2c5 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 f36f037df..a850fcde4 100644 --- a/web_editor_background_color/views/assets.xml +++ b/web_editor_background_color/templates/assets.xml @@ -4,7 +4,7 @@ -