mirror of https://github.com/OCA/web.git
[MIG] web_editor_background_color: Migrate to v12
- Remove bootstrap-colorpicker library, which is deprecated. - Use Odoo's internal color picker dialog. Co-Authored-By: Alexandre Díaz <alexandre.diaz@tecnativa.com>pull/1327/head
Jairo Llopis
parent
c0366d69bc
commit
e6717bf024
|
|
@ -14,13 +14,13 @@ Web Editor Background Color Picker
|
|||
:target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
|
||||
:alt: License: LGPL-3
|
||||
.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
|
||||
:target: https://github.com/OCA/web/tree/11.0/web_editor_background_color
|
||||
:target: https://github.com/OCA/web/tree/12.0/web_editor_background_color
|
||||
:alt: OCA/web
|
||||
.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
|
||||
:target: https://translation.odoo-community.org/projects/web-11-0/web-11-0-web_editor_background_color
|
||||
:target: https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_editor_background_color
|
||||
:alt: Translate me on Weblate
|
||||
.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
|
||||
:target: https://runbot.odoo-community.org/runbot/162/11.0
|
||||
:target: https://runbot.odoo-community.org/runbot/162/12.0
|
||||
:alt: Try me on Runbot
|
||||
|
||||
|badge1| |badge2| |badge3| |badge4| |badge5|
|
||||
|
|
@ -50,13 +50,22 @@ To use this module, you need to:
|
|||
* Writing any valid HTML color code in the text input.
|
||||
* Selecting a color from the color picker.
|
||||
|
||||
Known issues / Roadmap
|
||||
======================
|
||||
|
||||
* Preview when user plays with colors.
|
||||
See https://github.com/OCA/web/pull/1327#issuecomment-509621572 to understand
|
||||
the (co/i)mplications.
|
||||
* When (& if) Odoo merges https://github.com/odoo/odoo/pull/34687, this
|
||||
module will no longer be needed.
|
||||
|
||||
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 smashing it by providing a detailed and welcomed
|
||||
`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_editor_background_color%0Aversion:%2011.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
|
||||
`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_editor_background_color%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
|
||||
|
||||
Do not contact contributors directly about support or help with technical issues.
|
||||
|
||||
|
|
@ -93,6 +102,6 @@ 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.
|
||||
|
||||
This module is part of the `OCA/web <https://github.com/OCA/web/tree/11.0/web_editor_background_color>`_ project on GitHub.
|
||||
This module is part of the `OCA/web <https://github.com/OCA/web/tree/12.0/web_editor_background_color>`_ project on GitHub.
|
||||
|
||||
You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
{
|
||||
"name": "Web Editor Background Color Picker",
|
||||
"summary": "Set any background color for web editor snippets",
|
||||
"version": "11.0.1.0.0",
|
||||
"version": "12.0.1.0.0",
|
||||
"category": "Website",
|
||||
"website": "https://www.tecnativa.com",
|
||||
"website": "https://github.com/OCA/web",
|
||||
"author": "Tecnativa, Odoo Community Association (OCA)",
|
||||
"license": "LGPL-3",
|
||||
"application": False,
|
||||
|
|
@ -18,5 +18,6 @@
|
|||
],
|
||||
"data": [
|
||||
"templates/assets.xml",
|
||||
"templates/editor.xml",
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
* Preview when user plays with colors.
|
||||
See https://github.com/OCA/web/pull/1327#issuecomment-509621572 to understand
|
||||
the (co/i)mplications.
|
||||
* When (& if) Odoo merges https://github.com/odoo/odoo/pull/34687, this
|
||||
module will no longer be needed.
|
||||
|
|
@ -367,7 +367,7 @@ ul.auto-toc {
|
|||
!! This file is generated by oca-gen-addon-readme !!
|
||||
!! changes will be overwritten. !!
|
||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
|
||||
<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/11.0/web_editor_background_color"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-11-0/web-11-0-web_editor_background_color"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/11.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
|
||||
<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/12.0/web_editor_background_color"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_editor_background_color"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/12.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
|
||||
<p>This module extends the functionality of the web editor to support
|
||||
setting a custom background color to any snippet allowing you to customize it.</p>
|
||||
<div class="figure">
|
||||
|
|
@ -377,12 +377,13 @@ setting a custom background color to any snippet allowing you to customize it.</
|
|||
<div class="contents local topic" id="contents">
|
||||
<ul class="simple">
|
||||
<li><a class="reference internal" href="#usage" id="id1">Usage</a></li>
|
||||
<li><a class="reference internal" href="#bug-tracker" id="id2">Bug Tracker</a></li>
|
||||
<li><a class="reference internal" href="#credits" id="id3">Credits</a><ul>
|
||||
<li><a class="reference internal" href="#authors" id="id4">Authors</a></li>
|
||||
<li><a class="reference internal" href="#contributors" id="id5">Contributors</a></li>
|
||||
<li><a class="reference internal" href="#other-credits" id="id6">Other credits</a></li>
|
||||
<li><a class="reference internal" href="#maintainers" id="id7">Maintainers</a></li>
|
||||
<li><a class="reference internal" href="#known-issues-roadmap" id="id2">Known issues / Roadmap</a></li>
|
||||
<li><a class="reference internal" href="#bug-tracker" id="id3">Bug Tracker</a></li>
|
||||
<li><a class="reference internal" href="#credits" id="id4">Credits</a><ul>
|
||||
<li><a class="reference internal" href="#authors" id="id5">Authors</a></li>
|
||||
<li><a class="reference internal" href="#contributors" id="id6">Contributors</a></li>
|
||||
<li><a class="reference internal" href="#other-credits" id="id7">Other credits</a></li>
|
||||
<li><a class="reference internal" href="#maintainers" id="id8">Maintainers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -401,42 +402,52 @@ setting a custom background color to any snippet allowing you to customize it.</
|
|||
* Selecting a color from the color picker.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="section" id="known-issues-roadmap">
|
||||
<h1><a class="toc-backref" href="#id2">Known issues / Roadmap</a></h1>
|
||||
<ul class="simple">
|
||||
<li>Preview when user plays with colors.
|
||||
See <a class="reference external" href="https://github.com/OCA/web/pull/1327#issuecomment-509621572">https://github.com/OCA/web/pull/1327#issuecomment-509621572</a> to understand
|
||||
the (co/i)mplications.</li>
|
||||
<li>When (& if) Odoo merges <a class="reference external" href="https://github.com/odoo/odoo/pull/34687">https://github.com/odoo/odoo/pull/34687</a>, this
|
||||
module will no longer be needed.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="bug-tracker">
|
||||
<h1><a class="toc-backref" href="#id2">Bug Tracker</a></h1>
|
||||
<h1><a class="toc-backref" href="#id3">Bug Tracker</a></h1>
|
||||
<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
|
||||
In case of trouble, please check there if your issue has already been reported.
|
||||
If you spotted it first, help us smashing it by providing a detailed and welcomed
|
||||
<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_editor_background_color%0Aversion:%2011.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
|
||||
<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_editor_background_color%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
|
||||
<p>Do not contact contributors directly about support or help with technical issues.</p>
|
||||
</div>
|
||||
<div class="section" id="credits">
|
||||
<h1><a class="toc-backref" href="#id3">Credits</a></h1>
|
||||
<h1><a class="toc-backref" href="#id4">Credits</a></h1>
|
||||
<div class="section" id="authors">
|
||||
<h2><a class="toc-backref" href="#id4">Authors</a></h2>
|
||||
<h2><a class="toc-backref" href="#id5">Authors</a></h2>
|
||||
<ul class="simple">
|
||||
<li>Tecnativa</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="contributors">
|
||||
<h2><a class="toc-backref" href="#id5">Contributors</a></h2>
|
||||
<h2><a class="toc-backref" href="#id6">Contributors</a></h2>
|
||||
<ul class="simple">
|
||||
<li>Jairo Llopis <<a class="reference external" href="mailto:jairo.llopis@tecnativa.com">jairo.llopis@tecnativa.com</a>> - <a class="reference external" href="https://www.tecnativa.com">https://www.tecnativa.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="other-credits">
|
||||
<h2><a class="toc-backref" href="#id6">Other credits</a></h2>
|
||||
<h2><a class="toc-backref" href="#id7">Other credits</a></h2>
|
||||
<ul class="simple">
|
||||
<li>This addon includes code copied from <a class="reference external" href="https://github.com/itsjavi/bootstrap-colorpicker/tree/2.5.3">bootstrap-colorpicker</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="maintainers">
|
||||
<h2><a class="toc-backref" href="#id7">Maintainers</a></h2>
|
||||
<h2><a class="toc-backref" href="#id8">Maintainers</a></h2>
|
||||
<p>This module is maintained by the OCA.</p>
|
||||
<a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
|
||||
<p>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.</p>
|
||||
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/11.0/web_editor_background_color">OCA/web</a> project on GitHub.</p>
|
||||
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/12.0/web_editor_background_color">OCA/web</a> project on GitHub.</p>
|
||||
<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
/* Copyright 2017 Jairo Llopis <jairo.llopis@tecnativa.com>
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/* Copyright 2017-2019 Jairo Llopis <jairo.llopis@tecnativa.com>
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
|
||||
|
||||
.snippet-option-colorpicker {
|
||||
.o_colorpicker_section[data-name="custom"] > .text-muted {
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: gray("400");
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,103 +1,49 @@
|
|||
/* Copyright 2016-2017 Jairo Llopis <jairo.llopis@tecnativa.com>
|
||||
/* Copyright 2016-2019 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 ColorpickerDialog = require('web.colorpicker');
|
||||
var options = require("web_editor.snippets.options");
|
||||
var colorpicker = options.registry.colorpicker;
|
||||
|
||||
colorpicker.include({
|
||||
events: _.extend({}, colorpicker.prototype.events, {
|
||||
"changeColor [data-name=custom_color]":
|
||||
"set_inline_background_color",
|
||||
// Remove inline background-color for normal class-based buttons
|
||||
"click .o_colorpicker_section button[data-color]":
|
||||
"remove_inline_background_color",
|
||||
"click [data-name=custom_color] input": "input_select",
|
||||
"click [data-name=custom_color]": "custom_abort_event",
|
||||
"keydown [data-name=custom_color]": "custom_abort_event",
|
||||
"keypress [data-name=custom_color]": "custom_abort_event",
|
||||
"keyup [data-name=custom_color]": "custom_abort_event",
|
||||
custom_events: _.extend({}, colorpicker.prototype.custom_events, {
|
||||
"colorpicker:saved": "_onCustomColorSave",
|
||||
}),
|
||||
events: _.extend({}, colorpicker.prototype.events, {
|
||||
"click .o_colorpicker_section[data-name=custom]>.text-muted":
|
||||
"_onCustomColorAsk",
|
||||
}),
|
||||
xmlDependencies: colorpicker.prototype.xmlDependencies.concat([
|
||||
"/web_editor_background_color/static/src/xml/colorpicker.xml",
|
||||
]),
|
||||
|
||||
/**
|
||||
* @override
|
||||
* Called when the user clicks on "Custom color" section header
|
||||
*/
|
||||
start: function () {
|
||||
this._super();
|
||||
// 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,
|
||||
},
|
||||
_onCustomColorAsk: function () {
|
||||
var dialog = new ColorpickerDialog(this, {
|
||||
defaultColor: this.$target.css("background-color"),
|
||||
});
|
||||
dialog.open();
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the user saves a custom color
|
||||
*
|
||||
* @param {Event} event
|
||||
*/
|
||||
_onCustomColorSave: function (event) {
|
||||
// Add a button to remind recent choices
|
||||
var $button = $("<button/>", {
|
||||
class: "o_custom_color",
|
||||
css: {
|
||||
"background-color": event.data.cssColor,
|
||||
},
|
||||
});
|
||||
// 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"];
|
||||
},
|
||||
|
||||
/**
|
||||
* A HACK to avoid dropdown disappearing when picking colors
|
||||
*
|
||||
* @param {Event} event
|
||||
*/
|
||||
custom_abort_event: function (event) {
|
||||
event.stopPropagation();
|
||||
},
|
||||
|
||||
/**
|
||||
* Select the color picker input
|
||||
*
|
||||
* @param {Event} event
|
||||
*/
|
||||
input_select: function (event) {
|
||||
$(event.target).focus().select();
|
||||
},
|
||||
|
||||
/**
|
||||
* Undo the inline background color, besides upstream color classes
|
||||
*
|
||||
* @override
|
||||
*/
|
||||
_onColorResetButtonClick: function (event) {
|
||||
this._super.apply(this, arguments);
|
||||
this.$target.css("background-color", "");
|
||||
if (this.change_border) {
|
||||
this.$target.css("border-color", "");
|
||||
}
|
||||
this.$target.trigger("background-color-event", event.type);
|
||||
},
|
||||
|
||||
/**
|
||||
* Apply the chosen color as an inline style
|
||||
*
|
||||
* @param {Event} event
|
||||
*/
|
||||
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);
|
||||
var $custom = this.$el.find(
|
||||
".o_colorpicker_section[data-name=custom]");
|
||||
$custom.append($button);
|
||||
// Emulate a hover & click on that new button
|
||||
$button.mouseenter().click();
|
||||
},
|
||||
});
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -1,18 +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). -->
|
||||
|
||||
<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>
|
||||
|
|
@ -1,16 +1,12 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Copyright 2017 Jairo Llopis <jairo.llopis@tecnativa.com>
|
||||
<!-- Copyright 2017-2019 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/bootstrap-colorpicker.css"/>
|
||||
<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"/>
|
||||
<link rel="stylesheet" href="/web_editor_background_color/static/src/css/background_color.scss"/>
|
||||
<script type="text/javascript" src="/web_editor_background_color/static/src/js/background_color.js"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Copyright 2019 Tecnativa - Jairo Llopis
|
||||
License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl). -->
|
||||
<data>
|
||||
<template id="colorpicker" inherit_id="web_editor.colorpicker">
|
||||
<xpath expr="//colorpicker" position="inside">
|
||||
<div class="o_colorpicker_section" data-name="custom" data-display="Custom Color"/>
|
||||
</xpath>
|
||||
</template>
|
||||
</data>
|
||||
Loading…
Reference in New Issue