[ADD][web_editor_background_color] Custom background color picker

web_editor_background_color/README.rst

@@ -0,0 +1,82 @@
+.. 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 > 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.
+
+.. 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.
+
+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/__openerp__.py

@@ -0,0 +1,24 @@
+# -*- coding: utf-8 -*-
+# 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": "9.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": [
+        "views/assets.xml",
+        "views/snippets.xml",
+    ],
+}

web_editor_background_color/i18n/es.po

@@ -0,0 +1,23 @@
+# 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"
+"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"

web_editor_background_color/i18n/fr.po

@@ -0,0 +1,24 @@
+# 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"
+"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"

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"
+"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"
+
+#. module: website_mail_snippet_bg_color
+#: view:website:website_mail.email_designer_snippets
+msgid "Pick Background Color"
+msgstr "Izbira barve ozadja"

web_editor_background_color/static/src/css/background_color.less

@@ -0,0 +1,14 @@
+/* Copyright 2017 Jairo Llopis <jairo.llopis@tecnativa.com>
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
+
+@colorpicker-img-path: "./";
+
+.colorpicker {
+    .bg-custom {
+        display: inherit;
+        .colorpicker-visible {
+            min-width: initial;
+            padding: 1ex;
+        }
+    }
+}

web_editor_background_color/static/src/js/background_color.js

@@ -0,0 +1,72 @@
+/* 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 ajax = require("web.ajax");
+    var core = require("web.core");
+    var options = require("web_editor.snippets.options");
+
+    var ready = ajax.loadXML(
+        "/web_editor_background_color/static/src/xml/colorpicker.xml",
+        core.qweb
+    );
+
+    options.registry.colorpicker.include({
+        bind_events: function () {
+            this._super();
+            // Remove inline background-color for normal class-based buttons
+            this.$el.find(".colorpicker button").on(
+                "click",
+                $.proxy(this.remove_inline_background_color, this)
+            );
+            // Enable custom color picker
+            this.$custom = this.$el.find(".bg-custom");
+            this.$custom.colorpicker({
+                color: this.$target.css("background-color"),
+                container: true,
+            });
+            this.$custom.on(
+                "changeColor",
+                $.proxy(this.set_inline_background_color, this)
+            );
+            this.$custom.on("click", $.proxy(this.custom_click, this));
+            this.$custom.on(
+                "click",
+                "input",
+                $.proxy(this.input_select, 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) {
+            // 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", "");
+            }
+        },
+        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);
+            }
+        },
+    });
+
+    return {
+        ready: ready,
+        colorpicker: options.registry.colorpicker,
+    };
+});