[ADD][web_editor_background_color] Custom background color picker (#582)

* [ADD][web_editor_background_color] Custom background color picker

This addon lets the user choose a preferred background color when editing some web content.

Works out of the box with `website` and `mass_mailing` addons, although requires none of those.

* [FIX] Avoid clicks removing dropdown menu

This happened specifically in Chrome as demonstrated in
https://github.com/OCA/web/pull/582#issuecomment-287057052.

* [FIX] Use strict equality operator.

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,
+    };
+});

web_editor_background_color/static/src/lib/bootstrap-colorpicker/colorpicker.less

@@ -0,0 +1,273 @@
+/*!
+ * Bootstrap Colorpicker v2.5.1
+ * https://itsjavi.com/bootstrap-colorpicker/
+ *
+ * Originally written by (c) 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0.txt
+ *
+ */
+@colorpicker-img-path: "../img/bootstrap-colorpicker/";
+
+.bgImg(@imgFilename) {
+  background-image: url("@{colorpicker-img-path}@{imgFilename}");
+}
+
+.borderRadius(@size) {
+  -webkit-border-radius: @size;
+  -moz-border-radius: @size;
+  border-radius: @size;
+}
+
+.colorpicker-saturation {
+  width: 100px;
+  height: 100px;
+  .bgImg('saturation.png');
+  cursor: crosshair;
+  float: left;
+  i {
+    display: block;
+    height: 5px;
+    width: 5px;
+    border: 1px solid #000;
+    .borderRadius(5px);
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: -4px 0 0 -4px;
+    b {
+      display: block;
+      height: 5px;
+      width: 5px;
+      border: 1px solid #fff;
+      .borderRadius(5px);
+    }
+  }
+}
+
+.colorpicker-hue,
+.colorpicker-alpha {
+  width: 15px;
+  height: 100px;
+  float: left;
+  cursor: row-resize;
+  margin-left: 4px;
+  margin-bottom: 4px;
+}
+
+.colorpicker-hue i,
+.colorpicker-alpha i {
+  display: block;
+  height: 1px;
+  background: #000;
+  border-top: 1px solid #fff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin-top: -1px;
+}
+
+.colorpicker-hue {
+  .bgImg('hue.png');
+}
+
+.colorpicker-alpha {
+  .bgImg('alpha.png');
+  display: none;
+}
+
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-alpha {
+  background-size: contain;
+}
+
+.colorpicker {
+  padding: 4px;
+  min-width: 130px;
+  margin-top: 1px;
+  .borderRadius(4px);
+  z-index: 2500;
+}
+
+.colorpicker:before,
+.colorpicker:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+
+.colorpicker:after {
+  clear: both;
+}
+
+.colorpicker:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  top: -7px;
+  left: 6px;
+}
+
+.colorpicker:after {
+  content: '';
+  display: inline-block;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #ffffff;
+  position: absolute;
+  top: -6px;
+  left: 7px;
+}
+
+.colorpicker div {
+  position: relative;
+}
+
+.colorpicker.colorpicker-with-alpha {
+  min-width: 140px;
+}
+
+.colorpicker.colorpicker-with-alpha .colorpicker-alpha {
+  display: block;
+}
+
+.colorpicker-color {
+  height: 10px;
+  margin-top: 5px;
+  clear: both;
+  .bgImg('alpha.png');
+  background-position: 0 100%;
+}
+
+.colorpicker-color div {
+  height: 10px;
+}
+
+.colorpicker-selectors {
+  display: none;
+  height: 10px;
+  margin-top: 5px;
+  clear: both;
+}
+
+.colorpicker-selectors i {
+  cursor: pointer;
+  float: left;
+  height: 10px;
+  width: 10px;
+}
+
+.colorpicker-selectors i + i {
+  margin-left: 3px;
+}
+
+.colorpicker-element .input-group-addon i,
+.colorpicker-element .add-on i {
+  display: inline-block;
+  cursor: pointer;
+  height: 16px;
+  vertical-align: text-top;
+  width: 16px;
+}
+
+.colorpicker.colorpicker-inline {
+  position: relative;
+  display: inline-block;
+  float: none;
+  z-index: auto;
+}
+
+.colorpicker.colorpicker-horizontal {
+  width: 110px;
+  min-width: 110px;
+  height: auto;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-saturation {
+  margin-bottom: 4px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-color {
+  width: 100px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+  width: 100px;
+  height: 15px;
+  float: left;
+  cursor: col-resize;
+  margin-left: 0px;
+  margin-bottom: 4px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue i,
+.colorpicker.colorpicker-horizontal .colorpicker-alpha i {
+  display: block;
+  height: 15px;
+  background: #ffffff;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  border: none;
+  margin-top: 0px;
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-hue {
+  .bgImg('hue-horizontal.png');
+}
+
+.colorpicker.colorpicker-horizontal .colorpicker-alpha {
+  .bgImg('alpha-horizontal.png');
+}
+
+.colorpicker-right:before {
+  left: auto;
+  right: 6px;
+}
+
+.colorpicker-right:after {
+  left: auto;
+  right: 7px;
+}
+
+.colorpicker-no-arrow:before {
+  border-right: 0;
+  border-left: 0;
+}
+
+.colorpicker-no-arrow:after {
+  border-right: 0;
+  border-left: 0;
+}
+
+.colorpicker,
+.colorpicker-alpha,
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-selectors {
+  &.colorpicker-visible {
+    display: block;
+  }
+}
+
+.colorpicker,
+.colorpicker-alpha,
+.colorpicker-saturation,
+.colorpicker-hue,
+.colorpicker-selectors {
+  &.colorpicker-hidden {
+    display: none;
+  }
+}
+
+.colorpicker-inline.colorpicker-visible {
+  display: inline-block;
+}

web_editor_background_color/static/src/xml/colorpicker.xml

@@ -0,0 +1,19 @@
+<?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">
+            <tr>
+                <td colspan="6">
+                    <div class="bg-custom">
+                        <input type="text" />
+                    </div>
+                </td>
+            </tr>
+        </t>
+    </t>
+
+</templates>

web_editor_background_color/views/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="editor" inherit_id="web_editor.editor">
+        <xpath expr=".">
+            <!-- External library bootstrap-colorpicker -->
+            <link rel="stylesheet" href="/web_editor_background_color/static/src/lib/bootstrap-colorpicker/colorpicker.less"/>
+            <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>

web_editor_background_color/views/snippets.xml

@@ -0,0 +1,25 @@
+<?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="snippet_options"
+              inherit_id="web_editor.snippet_options">
+
+        <xpath expr=".">
+            <!-- The same option that already exists in website editor, but
+                 enabled for mass mailing editor -->
+            <div data-js='colorpicker'
+                 data-selector=".bg-color, #editable_area > div, a.o_default_snippet_text">
+                <li class="dropdown-submenu">
+                    <a tabindex="-1" href="#">Color</a>
+                    <ul class="dropdown-menu">
+                        <li></li>
+                    </ul>
+                </li>
+            </div>
+        </xpath>
+    </template>
+
+</odoo>