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). */
|
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
|
||||
|
|
||||
odoo.define("web_editor_background_color.colorpicker", function (require) { |
odoo.define("web_editor_background_color.colorpicker", function (require) { |
||||
"use strict"; |
"use strict"; |
||||
|
var ColorpickerDialog = require('web.colorpicker'); |
||||
var options = require("web_editor.snippets.options"); |
var options = require("web_editor.snippets.options"); |
||||
var colorpicker = options.registry.colorpicker; |
var colorpicker = options.registry.colorpicker; |
||||
|
|
||||
colorpicker.include({ |
colorpicker.include({ |
||||
|
custom_events: _.extend({}, colorpicker.prototype.custom_events, { |
||||
|
"colorpicker:saved": "_onCustomColorSave", |
||||
|
}), |
||||
events: _.extend({}, colorpicker.prototype.events, { |
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 |
* @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