Merge pull request #1074 from Tecnativa/11.0-web_editor_background_color

[MIG] web_editor_background_color: Migrate to v11

web_editor_background_color/README.rst

@@ -0,0 +1,69 @@
+.. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg
+   :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
+   :alt: License: LGPL-3
+
+==================================
+Web Editor Background Color Picker
+==================================
+
+This module extends the functionality of the web editor to support
+setting a custom background color to any snippet allowing you to customize it.
+
+.. figure:: /web_editor_background_color/static/description/mass_mailing_editor.png
+   :alt: Screenshot of color picker in mass mailing editor
+
+Usage
+=====
+
+To use this module, you need to:
+
+#. Install any module that makes use of the web editor, such as
+   ``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 > 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/10.0
+
+Bug Tracker
+===========
+
+Bugs are tracked on `GitHub Issues
+<https://github.com/OCA/web/issues>`_. In case of trouble, please
+check there if your issue has already been reported. If you spotted it first,
+help us smash it by providing detailed and welcomed feedback.
+
+Credits
+=======
+
+External libraries
+------------------
+
+* This addon includes code copied from bootstrap-colorpicker_
+
+.. _bootstrap-colorpicker: https://github.com/itsjavi/bootstrap-colorpicker/tree/2.5.1
+
+Contributors
+------------
+
+* Jairo Llopis <jairo.llopis@tecnativa.com>
+
+Maintainer
+----------
+
+.. image:: https://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+   :target: https://odoo-community.org
+
+This module is maintained by the OCA.
+
+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.
+
+To contribute to this module, please visit https://odoo-community.org.

web_editor_background_color/__manifest__.py

@@ -0,0 +1,22 @@
+# Copyright 2017 Jairo Llopis <jairo.llopis@tecnativa.com>
+# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
+{
+    "name": "Web Editor Background Color Picker",
+    "summary": "Set any background color for web editor snippets",
+    "version": "11.0.1.0.0",
+    "category": "Website",
+    "website": "https://www.tecnativa.com",
+    "author": "Tecnativa, Odoo Community Association (OCA)",
+    "license": "LGPL-3",
+    "application": False,
+    "installable": True,
+    "images": [
+        "static/description/mass_mailing_editor.png",
+    ],
+    "depends": [
+        "web_editor",
+    ],
+    "data": [
+        "templates/assets.xml",
+    ],
+}

web_editor_background_color/i18n/ca.po

@@ -0,0 +1,22 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# * web_editor_background_color
+#
+# Translators:
+# Marc Tormo i Bochaca <mtbochaca@gmail.com>, 2017
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 9.0c\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2017-03-30 08:28+0000\n"
+"PO-Revision-Date: 2017-03-30 08:28+0000\n"
+"Last-Translator: Marc Tormo i Bochaca <mtbochaca@gmail.com>, 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"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#~ msgid "Color"
+#~ msgstr "Color"

web_editor_background_color/i18n/es.po

@@ -0,0 +1,21 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# 	* website_mail_snippet_bg_color
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 8.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-02-09 16:32+0000\n"
+"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"
+"X-Generator: Poedit 1.8.6\n"
+
+#~ msgid "Pick Background Color"
+#~ msgstr "Escoger el color de fondo"

web_editor_background_color/i18n/fr.po

@@ -0,0 +1,23 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# * website_mail_snippet_bg_color
+#
+# Translators:
+# Christophe CHAUVET <christophe.chauvet@gmail.com>, 2016
+msgid ""
+msgstr ""
+"Project-Id-Version: social (8.0)\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-06-30 01:07+0000\n"
+"PO-Revision-Date: 2016-06-17 14:52+0000\n"
+"Last-Translator: Christophe CHAUVET <christophe.chauvet@gmail.com>\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"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+
+#~ msgid "Pick Background Color"
+#~ msgstr "Mettre la couleur de fond"

web_editor_background_color/i18n/sl.po

@@ -0,0 +1,24 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# * website_mail_snippet_bg_color
+#
+# Translators:
+# Matjaž Mozetič <m.mozetic@matmoz.si>, 2016
+msgid ""
+msgstr ""
+"Project-Id-Version: social (8.0)\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2016-02-27 01:40+0000\n"
+"PO-Revision-Date: 2016-02-27 16:56+0000\n"
+"Last-Translator: Matjaž Mozetič <m.mozetic@matmoz.si>\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"
+"Plural-Forms: nplurals=4; plural=(n%100==1 ? 0 : n%100==2 ? 1 : n%100==3 || n"
+"%100==4 ? 2 : 3);\n"
+
+#~ msgid "Pick Background Color"
+#~ msgstr "Izbira barve ozadja"

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"
+

web_editor_background_color/readme/CONTRIBUTORS.rst

@@ -0,0 +1 @@
+* Jairo Llopis <jairo.llopis@tecnativa.com> - https://www.tecnativa.com

web_editor_background_color/readme/CREDITS.rst

@@ -0,0 +1,3 @@
+* This addon includes code copied from bootstrap-colorpicker_
+
+.. _bootstrap-colorpicker: https://github.com/itsjavi/bootstrap-colorpicker/tree/2.5.3

web_editor_background_color/readme/DESCRIPTION.rst

@@ -0,0 +1,5 @@
+This module extends the functionality of the web editor to support
+setting a custom background color to any snippet allowing you to customize it.
+
+.. figure:: https://user-images.githubusercontent.com/973709/46802401-1c915180-cd55-11e8-9397-f198548a690c.gif
+   :alt: Screenshot of color picker in mass mailing editor

web_editor_background_color/readme/USAGE.rst

@@ -0,0 +1,10 @@
+To use this module, you need to:
+
+#. Install any module that makes use of the web editor, such as
+   ``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 > 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.

web_editor_background_color/static/src/css/background_color.less

@@ -0,0 +1,21 @@
+/* Copyright 2017 Jairo Llopis <jairo.llopis@tecnativa.com>
+ * 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;
+    }
+}

web_editor_background_color/static/src/js/background_color.js

@@ -0,0 +1,103 @@
+/* Copyright 2016-2017 Jairo Llopis <jairo.llopis@tecnativa.com>
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
+
+odoo.define("web_editor_background_color.colorpicker", function (require) {
+    "use strict";
+    var options = require("web_editor.snippets.options");
+    var colorpicker = options.registry.colorpicker;
+
+    colorpicker.include({
+        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",
+        }),
+        xmlDependencies: colorpicker.prototype.xmlDependencies.concat([
+            "/web_editor_background_color/static/src/xml/colorpicker.xml",
+        ]),
+
+        /**
+         * @override
+         */
+        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,
+                    },
+                },
+            });
+            // 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"];
+        },
+
+        /**
+         * A HACK to avoid dropdown disappearing when picking colors
+         *
+         * @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);
+        },
+    });
+});

web_editor_background_color/static/src/xml/colorpicker.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2017 Jairo Llopis <jairo.llopis@tecnativa.com>
+     License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
+
+<templates>
+
+    <t t-extend="web_editor.colorpicker">
+        <t t-jquery="colorpicker" t-operation="append">
+            <div
+                class="o_colorpicker_section"
+                data-name="custom_color"
+                data-icon-class="fa fa-code">
+                <input type="text" class="form-control" />
+            </div>
+        </t>
+    </t>
+
+</templates>

web_editor_background_color/templates/assets.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2017 Jairo Llopis <jairo.llopis@tecnativa.com>
+     License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). -->
+
+<odoo>
+
+    <template id="assets_editor" inherit_id="web_editor.assets_editor">
+        <xpath expr=".">
+            <!-- External library bootstrap-colorpicker -->
+            <link rel="stylesheet" href="/web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.css"/>
+            <script type="text/javascript" src="/web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.js"/>
+            <!-- Internal assets -->
+            <link rel="stylesheet" href="/web_editor_background_color/static/src/css/background_color.less"/>
+            <script type="text/javascript" src="/web_editor_background_color/static/src/js/background_color.js"/>
+        </xpath>
+    </template>
+
+</odoo>