Browse Source

Merge pull request #665 from Tecnativa/10.0-web_editor_background_color

[MIG][web_editor_background_color] Migrate to v10
pull/672/head
Moises Lopez - https://www.vauxoo.com/ 7 years ago
committed by GitHub
parent
commit
3635832f43
  1. 69
      web_editor_background_color/README.rst
  2. 0
      web_editor_background_color/__init__.py
  3. 23
      web_editor_background_color/__manifest__.py
  4. 24
      web_editor_background_color/i18n/ca.po
  5. 23
      web_editor_background_color/i18n/es.po
  6. 24
      web_editor_background_color/i18n/fr.po
  7. 24
      web_editor_background_color/i18n/sl.po
  8. BIN
      web_editor_background_color/static/description/icon.png
  9. BIN
      web_editor_background_color/static/description/mass_mailing_editor.png
  10. 23
      web_editor_background_color/static/src/css/background_color.less
  11. 83
      web_editor_background_color/static/src/js/background_color.js
  12. BIN
      web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha-horizontal.png
  13. BIN
      web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha.png
  14. 1319
      web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.js
  15. 273
      web_editor_background_color/static/src/lib/bootstrap-colorpicker/colorpicker.less
  16. BIN
      web_editor_background_color/static/src/lib/bootstrap-colorpicker/hue-horizontal.png
  17. BIN
      web_editor_background_color/static/src/lib/bootstrap-colorpicker/hue.png
  18. BIN
      web_editor_background_color/static/src/lib/bootstrap-colorpicker/saturation.png
  19. 18
      web_editor_background_color/static/src/xml/colorpicker.xml
  20. 18
      web_editor_background_color/templates/assets.xml

69
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.

0
web_editor_background_color/__init__.py

23
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",
],
}

24
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"

23
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"

24
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"

24
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"

BIN
web_editor_background_color/static/description/icon.png

After

Width: 145  |  Height: 122  |  Size: 8.1 KiB

BIN
web_editor_background_color/static/description/mass_mailing_editor.png

After

Width: 559  |  Height: 329  |  Size: 43 KiB

23
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;
}
}

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

BIN
web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha-horizontal.png

After

Width: 100  |  Height: 10  |  Size: 557 B

BIN
web_editor_background_color/static/src/lib/bootstrap-colorpicker/alpha.png

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

273
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;
}

BIN
web_editor_background_color/static/src/lib/bootstrap-colorpicker/hue-horizontal.png

After

Width: 100  |  Height: 1  |  Size: 478 B

BIN
web_editor_background_color/static/src/lib/bootstrap-colorpicker/hue.png

After

Width: 1  |  Height: 100  |  Size: 504 B

BIN
web_editor_background_color/static/src/lib/bootstrap-colorpicker/saturation.png

After

Width: 100  |  Height: 100  |  Size: 4.0 KiB

18
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>

18
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>
Loading…
Cancel
Save