diff --git a/web_editor_background_color/README.rst b/web_editor_background_color/README.rst index 7a6ffd78..bd166b3b 100644 --- a/web_editor_background_color/README.rst +++ b/web_editor_background_color/README.rst @@ -14,13 +14,13 @@ Web Editor Background Color Picker :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html :alt: License: LGPL-3 .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github - :target: https://github.com/OCA/web/tree/11.0/web_editor_background_color + :target: https://github.com/OCA/web/tree/12.0/web_editor_background_color :alt: OCA/web .. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png - :target: https://translation.odoo-community.org/projects/web-11-0/web-11-0-web_editor_background_color + :target: https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_editor_background_color :alt: Translate me on Weblate .. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png - :target: https://runbot.odoo-community.org/runbot/162/11.0 + :target: https://runbot.odoo-community.org/runbot/162/12.0 :alt: Try me on Runbot |badge1| |badge2| |badge3| |badge4| |badge5| @@ -50,13 +50,22 @@ To use this module, you need to: * Writing any valid HTML color code in the text input. * Selecting a color from the color picker. +Known issues / Roadmap +====================== + +* Preview when user plays with colors. + See https://github.com/OCA/web/pull/1327#issuecomment-509621572 to understand + the (co/i)mplications. +* When (& if) Odoo merges https://github.com/odoo/odoo/pull/34687, this + module will no longer be needed. + Bug Tracker =========== Bugs are tracked on `GitHub Issues `_. In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us smashing it by providing a detailed and welcomed -`feedback `_. +`feedback `_. Do not contact contributors directly about support or help with technical issues. @@ -93,6 +102,6 @@ OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use. -This module is part of the `OCA/web `_ project on GitHub. +This module is part of the `OCA/web `_ project on GitHub. You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/web_editor_background_color/__manifest__.py b/web_editor_background_color/__manifest__.py index 29fda211..3b719bf7 100644 --- a/web_editor_background_color/__manifest__.py +++ b/web_editor_background_color/__manifest__.py @@ -3,9 +3,9 @@ { "name": "Web Editor Background Color Picker", "summary": "Set any background color for web editor snippets", - "version": "11.0.1.0.0", + "version": "12.0.1.0.0", "category": "Website", - "website": "https://www.tecnativa.com", + "website": "https://github.com/OCA/web", "author": "Tecnativa, Odoo Community Association (OCA)", "license": "LGPL-3", "application": False, @@ -18,5 +18,6 @@ ], "data": [ "templates/assets.xml", + "templates/editor.xml", ], } diff --git a/web_editor_background_color/readme/ROADMAP.rst b/web_editor_background_color/readme/ROADMAP.rst new file mode 100644 index 00000000..e04cb524 --- /dev/null +++ b/web_editor_background_color/readme/ROADMAP.rst @@ -0,0 +1,5 @@ +* Preview when user plays with colors. + See https://github.com/OCA/web/pull/1327#issuecomment-509621572 to understand + the (co/i)mplications. +* When (& if) Odoo merges https://github.com/odoo/odoo/pull/34687, this + module will no longer be needed. diff --git a/web_editor_background_color/static/description/index.html b/web_editor_background_color/static/description/index.html index d8bc819f..94d5a9e3 100644 --- a/web_editor_background_color/static/description/index.html +++ b/web_editor_background_color/static/description/index.html @@ -367,7 +367,7 @@ ul.auto-toc { !! This file is generated by oca-gen-addon-readme !! !! changes will be overwritten. !! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --> -

Beta License: LGPL-3 OCA/web Translate me on Weblate Try me on Runbot

+

Beta License: LGPL-3 OCA/web Translate me on Weblate Try me on Runbot

This module extends the functionality of the web editor to support setting a custom background color to any snippet allowing you to customize it.

@@ -377,12 +377,13 @@ setting a custom background color to any snippet allowing you to customize it.
+
+

Known issues / Roadmap

+ +
-

Bug Tracker

+

Bug Tracker

Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us smashing it by providing a detailed and welcomed -feedback.

+feedback.

Do not contact contributors directly about support or help with technical issues.

-

Credits

+

Credits

-

Authors

+

Authors

  • Tecnativa
-

Other credits

+

Other credits

-

Maintainers

+

Maintainers

This module is maintained by the OCA.

Odoo Community Association

OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.

-

This module is part of the OCA/web project on GitHub.

+

This module is part of the OCA/web project on GitHub.

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

diff --git a/web_editor_background_color/static/src/css/background_color.less b/web_editor_background_color/static/src/css/background_color.less deleted file mode 100644 index 52680a2d..00000000 --- a/web_editor_background_color/static/src/css/background_color.less +++ /dev/null @@ -1,21 +0,0 @@ -/* Copyright 2017 Jairo Llopis - * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ - -.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/css/background_color.scss b/web_editor_background_color/static/src/css/background_color.scss new file mode 100644 index 00000000..52b7bda8 --- /dev/null +++ b/web_editor_background_color/static/src/css/background_color.scss @@ -0,0 +1,14 @@ +/* Copyright 2017-2019 Jairo Llopis + * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ + +.snippet-option-colorpicker { + .o_colorpicker_section[data-name="custom"] > .text-muted { + cursor: pointer; + border-radius: 5px; + + &:hover { + background-color: gray("400"); + color: $black; + } + } +} 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 8b33cc64..0e9763e6 100644 --- a/web_editor_background_color/static/src/js/background_color.js +++ b/web_editor_background_color/static/src/js/background_color.js @@ -1,103 +1,49 @@ -/* Copyright 2016-2017 Jairo Llopis +/* Copyright 2016-2019 Jairo Llopis * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ odoo.define("web_editor_background_color.colorpicker", function (require) { "use strict"; + var ColorpickerDialog = require('web.colorpicker'); var options = require("web_editor.snippets.options"); var colorpicker = options.registry.colorpicker; colorpicker.include({ + custom_events: _.extend({}, colorpicker.prototype.custom_events, { + "colorpicker:saved": "_onCustomColorSave", + }), events: _.extend({}, colorpicker.prototype.events, { - "changeColor [data-name=custom_color]": - "set_inline_background_color", - // Remove inline background-color for normal class-based buttons - "click .o_colorpicker_section button[data-color]": - "remove_inline_background_color", - "click [data-name=custom_color] input": "input_select", - "click [data-name=custom_color]": "custom_abort_event", - "keydown [data-name=custom_color]": "custom_abort_event", - "keypress [data-name=custom_color]": "custom_abort_event", - "keyup [data-name=custom_color]": "custom_abort_event", + "click .o_colorpicker_section[data-name=custom]>.text-muted": + "_onCustomColorAsk", }), - xmlDependencies: colorpicker.prototype.xmlDependencies.concat([ - "/web_editor_background_color/static/src/xml/colorpicker.xml", - ]), /** - * @override + * Called when the user clicks on "Custom color" section header */ - start: function () { - this._super(); - // Enable custom color picker - 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, - }, - }, + _onCustomColorAsk: function () { + var dialog = new ColorpickerDialog(this, { + defaultColor: this.$target.css("background-color"), }); - // 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"]; + dialog.open(); }, /** - * A HACK to avoid dropdown disappearing when picking colors + * Called when the user saves a custom color * * @param {Event} event */ - custom_abort_event: function (event) { - event.stopPropagation(); - }, - - /** - * Select the color picker input - * - * @param {Event} event - */ - input_select: function (event) { - $(event.target).focus().select(); - }, - - /** - * Undo the inline background color, besides upstream color classes - * - * @override - */ - _onColorResetButtonClick: function (event) { - this._super.apply(this, arguments); - this.$target.css("background-color", ""); - if (this.change_border) { - this.$target.css("border-color", ""); - } - this.$target.trigger("background-color-event", event.type); - }, - - /** - * Apply the chosen color as an inline style - * - * @param {Event} event - */ - set_inline_background_color: function (event) { - var color = String(event.color); - this.$target.css("background-color", color); - if (this.change_border) { - this.$target.css("border-color", color); - } - this.$target.trigger("background-color-event", event.type); + _onCustomColorSave: function (event) { + // Add a button to remind recent choices + var $button = $("