Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[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>
- Loading branch information
Showing
12 changed files
with
100 additions
and
1,704 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 0 additions & 21 deletions
21
web_editor_background_color/static/src/css/background_color.less
This file was deleted.
Oops, something went wrong.
14 changes: 14 additions & 0 deletions
14
web_editor_background_color/static/src/css/background_color.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} | ||
} |
106 changes: 26 additions & 80 deletions
106
web_editor_background_color/static/src/js/background_color.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}, | ||
}); | ||
}); |
Oops, something went wrong.