Browse Source

[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.
pull/1074/head
Jairo Llopis 7 years ago
parent
commit
8e94d9f802
No known key found for this signature in database GPG Key ID: 59564BF1E22F314F
  1. 21
      web_editor_background_color/README.rst
  2. 5
      web_editor_background_color/__manifest__.py
  3. BIN
      web_editor_background_color/static/description/mass_mailing_editor.png
  4. 19
      web_editor_background_color/static/src/css/background_color.less
  5. 45
      web_editor_background_color/static/src/js/background_color.js
  6. 13
      web_editor_background_color/static/src/xml/colorpicker.xml
  7. 2
      web_editor_background_color/templates/assets.xml
  8. 25
      web_editor_background_color/views/snippets.xml

21
web_editor_background_color/README.rst

@ -21,27 +21,14 @@ To use this module, you need to:
``mass_mailing`` or ``website``. ``mass_mailing`` or ``website``.
#. Use that module's facilities to edit some web content. #. Use that module's facilities to edit some web content.
#. Drag & drop any snippet into the web editor body. #. 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.
#. 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. * Selecting a color from the color picker.
* Writing "transparent" to remove it.
.. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas .. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
:alt: Try me on Runbot :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 Bug Tracker
=========== ===========

5
web_editor_background_color/__openerp__.py → web_editor_background_color/__manifest__.py

@ -4,7 +4,7 @@
{ {
"name": "Web Editor Background Color Picker", "name": "Web Editor Background Color Picker",
"summary": "Set any background color for web editor snippets", "summary": "Set any background color for web editor snippets",
"version": "9.0.1.0.0",
"version": "10.0.1.0.0",
"category": "Website", "category": "Website",
"website": "https://www.tecnativa.com", "website": "https://www.tecnativa.com",
"author": "Tecnativa, Odoo Community Association (OCA)", "author": "Tecnativa, Odoo Community Association (OCA)",
@ -18,7 +18,6 @@
"web_editor", "web_editor",
], ],
"data": [ "data": [
"views/assets.xml",
"views/snippets.xml",
"templates/assets.xml",
], ],
} }

BIN
web_editor_background_color/static/description/mass_mailing_editor.png

Before

Width: 618  |  Height: 282  |  Size: 43 KiB

After

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

19
web_editor_background_color/static/src/css/background_color.less

@ -3,12 +3,21 @@
@colorpicker-img-path: "./"; @colorpicker-img-path: "./";
.colorpicker {
.bg-custom {
display: inherit;
.colorpicker-visible {
.colorpicker-element {
@colorpicker-width: 170px;
@colorpicker-height: 118px;
.colorpicker-inline {
min-width: initial; min-width: initial;
padding: 1ex;
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;
} }
} }

45
web_editor_background_color/static/src/js/background_color.js

@ -7,54 +7,69 @@ odoo.define("web_editor_background_color.colorpicker", function (require) {
var core = require("web.core"); var core = require("web.core");
var options = require("web_editor.snippets.options"); var options = require("web_editor.snippets.options");
var ready = ajax.loadXML(
ajax.loadXML(
"/web_editor_background_color/static/src/xml/colorpicker.xml", "/web_editor_background_color/static/src/xml/colorpicker.xml",
core.qweb core.qweb
); );
options.registry.colorpicker.include({
return options.registry.colorpicker.include({
bind_events: function () { bind_events: function () {
this._super(); this._super();
// Remove inline background-color for normal class-based buttons // 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", "click",
$.proxy(this.remove_inline_background_color, this) $.proxy(this.remove_inline_background_color, this)
); );
// Enable custom color picker // Enable custom color picker
this.$custom = this.$el.find(".bg-custom");
this.$custom = this.$el.find('[data-name="custom_color"]');
this.$custom.colorpicker({ this.$custom.colorpicker({
color: this.$target.css("background-color"), color: this.$target.css("background-color"),
container: true, container: true,
inline: true,
sliders: {
saturation: {
maxLeft: 118,
maxTop: 118,
},
hue: {
maxTop: 118,
},
alpha: {
maxTop: 118,
},
},
}); });
this.$custom.on( this.$custom.on(
"changeColor", "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( this.$custom.on(
"click", "input",
$.proxy(this.input_select, this));
this.$el.find(".note-color-reset").on(
"click", "click",
"input",
$.proxy(this.input_select, this)
);
$.proxy(this.remove_inline_background_color, this));
// Activate border color changes if it matches background's // Activate border color changes if it matches background's
var style = this.$target.prop("style"); var style = this.$target.prop("style");
this.change_border = this.change_border =
style["border-color"] && style["border-color"] &&
style["background-color"] === 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 // HACK Avoid dropdown disappearing when picking colors
event.stopPropagation(); event.stopPropagation();
}, },
input_select: function (event) { input_select: function (event) {
$(event.target).focus().select(); $(event.target).focus().select();
this.$custom.colorpicker("show");
}, },
remove_inline_background_color: function (event) { remove_inline_background_color: function (event) {
this.$target.css("background-color", ""); this.$target.css("background-color", "");
if (this.change_border) { if (this.change_border) {
this.$target.css("border-color", ""); this.$target.css("border-color", "");
} }
this.$target.trigger("background-color-event", event.type);
}, },
set_inline_background_color: function (event) { set_inline_background_color: function (event) {
var color = String(event.color); var color = String(event.color);
@ -62,11 +77,7 @@ odoo.define("web_editor_background_color.colorpicker", function (require) {
if (this.change_border) { if (this.change_border) {
this.$target.css("border-color", color); this.$target.css("border-color", color);
} }
this.$target.trigger("background-color-event", event.type);
}, },
}); });
return {
ready: ready,
colorpicker: options.registry.colorpicker,
};
}); });

13
web_editor_background_color/static/src/xml/colorpicker.xml

@ -5,14 +5,13 @@
<templates> <templates>
<t t-extend="web_editor.colorpicker"> <t t-extend="web_editor.colorpicker">
<t t-jquery=".colorpicker" t-operation="append">
<tr>
<td colspan="6">
<div class="bg-custom">
<input type="text" />
<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> </div>
</td>
</tr>
</t> </t>
</t> </t>

2
web_editor_background_color/views/assets.xml → web_editor_background_color/templates/assets.xml

@ -4,7 +4,7 @@
<odoo> <odoo>
<template id="editor" inherit_id="web_editor.editor">
<template id="assets_editor" inherit_id="web_editor.assets_editor">
<xpath expr="."> <xpath expr=".">
<!-- External library bootstrap-colorpicker --> <!-- External library bootstrap-colorpicker -->
<link rel="stylesheet" href="/web_editor_background_color/static/src/lib/bootstrap-colorpicker/colorpicker.less"/> <link rel="stylesheet" href="/web_editor_background_color/static/src/lib/bootstrap-colorpicker/colorpicker.less"/>

25
web_editor_background_color/views/snippets.xml

@ -1,25 +0,0 @@
<?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>
Loading…
Cancel
Save