Browse Source
[MIG] web_editor_background_color: Migrate to v12
[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
5 years ago
No known key found for this signature in database
GPG Key ID: 59564BF1E22F314F
12 changed files with 100 additions and 1704 deletions
-
19web_editor_background_color/README.rst
-
5web_editor_background_color/__manifest__.py
-
5web_editor_background_color/readme/ROADMAP.rst
-
41web_editor_background_color/static/description/index.html
-
21web_editor_background_color/static/src/css/background_color.less
-
14web_editor_background_color/static/src/css/background_color.scss
-
106web_editor_background_color/static/src/js/background_color.js
-
230web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.css
-
1327web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.js
-
18web_editor_background_color/static/src/xml/colorpicker.xml
-
8web_editor_background_color/templates/assets.xml
-
10web_editor_background_color/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. |
|||
@ -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({ |
|||
custom_events: _.extend({}, colorpicker.prototype.custom_events, { |
|||
"colorpicker:saved": "_onCustomColorSave", |
|||
}), |
|||
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", |
|||
"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"), |
|||
}); |
|||
// 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"]; |
|||
dialog.open(); |
|||
}, |
|||
|
|||
/** |
|||
* A HACK to avoid dropdown disappearing when picking colors |
|||
* Called when the user saves a custom color |
|||
* |
|||
* @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); |
|||
_onCustomColorSave: function (event) { |
|||
// Add a button to remind recent choices
|
|||
var $button = $("<button/>", { |
|||
class: "o_custom_color", |
|||
css: { |
|||
"background-color": event.data.cssColor, |
|||
}, |
|||
}); |
|||
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(); |
|||
}, |
|||
}); |
|||
}); |
|||
230
web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1327
web_editor_background_color/static/src/lib/bootstrap-colorpicker/bootstrap-colorpicker.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -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> |
|||
@ -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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue