[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.pull/1327/head
-
82web_editor_background_color/README.rst
-
0web_editor_background_color/__init__.py
-
24web_editor_background_color/__openerp__.py
-
23web_editor_background_color/i18n/es.po
-
24web_editor_background_color/i18n/fr.po
-
24web_editor_background_color/i18n/sl.po
-
BINweb_editor_background_color/static/description/icon.png
-
BINweb_editor_background_color/static/description/mass_mailing_editor.png
-
14web_editor_background_color/static/src/css/background_color.less
-
72web_editor_background_color/static/src/js/background_color.js
-
BINweb_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha-horizontal.png
-
BINweb_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha.png
-
1319web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.js
-
273web_editor_background_color/static/src/lib/bootstrap-colorpicker/colorpicker.less
-
BINweb_editor_background_color/static/src/lib/bootstrap-colorpicker/hue-horizontal.png
-
BINweb_editor_background_color/static/src/lib/bootstrap-colorpicker/hue.png
-
BINweb_editor_background_color/static/src/lib/bootstrap-colorpicker/saturation.png
-
19web_editor_background_color/static/src/xml/colorpicker.xml
-
18web_editor_background_color/views/assets.xml
-
25web_editor_background_color/views/snippets.xml
@ -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. |
@ -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", |
|||
], |
|||
} |
@ -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" |
@ -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" |
@ -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" |
After Width: 145 | Height: 122 | Size: 8.1 KiB |
After Width: 618 | Height: 282 | Size: 43 KiB |
@ -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; |
|||
} |
|||
} |
|||
} |
@ -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, |
|||
}; |
|||
}); |
After Width: 100 | Height: 10 | Size: 557 B |
After Width: 10 | Height: 100 | Size: 488 B |
1319
web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.js
File diff suppressed because it is too large
View File
@ -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; |
|||
} |
After Width: 100 | Height: 1 | Size: 478 B |
After Width: 1 | Height: 100 | Size: 504 B |
After Width: 100 | Height: 100 | Size: 4.0 KiB |
@ -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> |
@ -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> |
@ -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> |