Commit 70ba4cd9 authored by Jairo Llopis's avatar Jairo Llopis
Browse files

[MIG][web_editor_background_color] Migrate to v10

Now it fits into upstream's color picker, just adding a new tab at the end.

All known issues have been addressed.
parent 4b8d9a0a
......@@ -21,27 +21,14 @@ To use this module, you need to:
``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.
#. 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/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.
:target: https://runbot.odoo-community.org/runbot/162/10.0
Bug Tracker
===========
......
......@@ -4,7 +4,7 @@
{
"name": "Web Editor Background Color Picker",
"summary": "Set any background color for web editor snippets",
"version": "9.0.1.0.0",
"version": "10.0.1.0.0",
"category": "Website",
"website": "https://www.tecnativa.com",
"author": "Tecnativa, Odoo Community Association (OCA)",
......@@ -18,7 +18,6 @@
"web_editor",
],
"data": [
"views/assets.xml",
"views/snippets.xml",
"templates/assets.xml",
],
}
......@@ -3,12 +3,21 @@
@colorpicker-img-path: "./";
.colorpicker {
.bg-custom {
display: inherit;
.colorpicker-visible {
min-width: initial;
padding: 1ex;
}
.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;
}
}
......@@ -7,54 +7,69 @@ odoo.define("web_editor_background_color.colorpicker", function (require) {
var core = require("web.core");
var options = require("web_editor.snippets.options");
var ready = ajax.loadXML(
ajax.loadXML(
"/web_editor_background_color/static/src/xml/colorpicker.xml",
core.qweb
);
options.registry.colorpicker.include({
return options.registry.colorpicker.include({
bind_events: function () {
this._super();
// Remove inline background-color for normal class-based buttons
this.$el.find(".colorpicker button").on(
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(".bg-custom");
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", $.proxy(this.custom_click, this));
$.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",
"input",
$.proxy(this.input_select, this)
);
$.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_click: function (event) {
custom_abort_event: 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", "");
}
this.$target.trigger("background-color-event", event.type);
},
set_inline_background_color: function (event) {
var color = String(event.color);
......@@ -62,11 +77,7 @@ odoo.define("web_editor_background_color.colorpicker", function (require) {
if (this.change_border) {
this.$target.css("border-color", color);
}
this.$target.trigger("background-color-event", event.type);
},
});
return {
ready: ready,
colorpicker: options.registry.colorpicker,
};
});
......@@ -5,14 +5,13 @@
<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-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>
......
......@@ -4,7 +4,7 @@
<odoo>
<template id="editor" inherit_id="web_editor.editor">
<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"/>
......
<?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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment