Merge pull request #665 from Tecnativa/10.0-web_editor_background_color

[MIG][web_editor_background_color] Migrate to v10

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,23 @@
+# -*- 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": "10.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,24 @@
+# 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"
+"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"

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,23 @@
+/* Copyright 2017 Jairo Llopis <jairo.llopis@tecnativa.com>
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
+
+@colorpicker-img-path: "./";
+
+.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,83 @@
+/* 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");
+
+    ajax.loadXML(
+        "/web_editor_background_color/static/src/xml/colorpicker.xml",
+        core.qweb
+    );
+
+    return options.registry.colorpicker.include({
+        bind_events: function () {
+            this._super();
+            // Remove inline background-color for normal class-based buttons
+            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('[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 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",
+                $.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_abort_event: function (event) {
+            // HACK Avoid dropdown disappearing when picking colors
+            event.stopPropagation();
+        },
+        input_select: function (event) {
+            $(event.target).focus().select();
+        },
+        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);
+            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/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,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/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>