Commit d97e476b authored by Jairo Llopis's avatar Jairo Llopis Committed by Jairo Llopis
Browse files

[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.
parent 25ff5067
.. 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.
# -*- 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",
],
}
# 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"
# 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"
# 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"
/* 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;
}
}
}
/* 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,
};
});
/*!
* 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;
}
<?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>
<?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>