diff --git a/muk_web_utils/__manifest__.py b/muk_web_utils/__manifest__.py
index 666484f..4fbbf10 100644
--- a/muk_web_utils/__manifest__.py
+++ b/muk_web_utils/__manifest__.py
@@ -20,7 +20,7 @@
{
"name": "MuK Web Utils",
"summary": """Utility Features""",
- "version": "12.0.2.2.1",
+ "version": "12.0.2.3.0",
"category": "Extra Tools",
"license": "AGPL-3",
"author": "MuK IT",
@@ -35,6 +35,7 @@
],
"data": [
"template/assets.xml",
+ "template/editor.xml",
],
"qweb": [
"static/src/xml/*.xml",
diff --git a/muk_web_utils/doc/changelog.rst b/muk_web_utils/doc/changelog.rst
index 8576dd3..c0b8c16 100644
--- a/muk_web_utils/doc/changelog.rst
+++ b/muk_web_utils/doc/changelog.rst
@@ -1,4 +1,9 @@
-`2.1.0`
+`2.3.0`
+-------
+
+- Added custom colors to snippet options
+
+`2.2.0`
-------
- Added widget to share text fields
diff --git a/muk_web_utils/static/src/js/editor/snippets/options.js b/muk_web_utils/static/src/js/editor/snippets/options.js
new file mode 100644
index 0000000..3f4a400
--- /dev/null
+++ b/muk_web_utils/static/src/js/editor/snippets/options.js
@@ -0,0 +1,93 @@
+/**********************************************************************************
+*
+* Copyright (C) 2017 MuK IT GmbH
+*
+* This program is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Affero General Public License as
+* published by the Free Software Foundation, either version 3 of the
+* License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+* GNU Affero General Public License for more details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with this program. If not, see .
+*
+**********************************************************************************/
+
+odoo.define('muk_web_utils.snippet_options', function (require) {
+"use strict";
+
+var core = require('web.core');
+var colorpicker = require('web.colorpicker');
+var options = require('web_editor.snippets.options');
+
+var _t = core._t;
+var QWeb = core.qweb;
+
+options.registry.colorpicker.include({
+ events: _.extend({}, options.registry.colorpicker.prototype.events || {}, {
+ 'click .mk_add_custom_color': '_onCustomColorButtonClick',
+ }),
+ start: function () {
+ var res = this._super.apply(this, arguments);
+ this._renderPickedColors();
+ return res;
+ },
+ onFocus: function () {
+ this._renderPickedColors();
+ },
+ _renderPickedColors: function () {
+ var $editable = window.__EditorMenuBar_$editable;
+ if (this.$el.find('.colorpicker').length && $editable.length) {
+ var $snippets = $editable.find('.mk_custom_background');
+ var colors = _.map($snippets, function ($el) {
+ return $el.style.backgroundColor;
+ });
+ this.$el.find('.colorpicker .mk_custom_color').remove();
+ this.$el.find('.colorpicker button.selected').removeClass('selected');
+ _.each( _.uniq(colors), function (color) {
+ var classes = ['mk_custom_color'];
+ if (this.$target.css('background-color') === color) {
+ classes.push('selected');
+ }
+ var $colorButton = $('', {
+ style: 'background-color:' + color + ';',
+ class: classes.join(' '),
+ });
+ this.$el.find('.mk_add_custom_color').before($colorButton);
+ }, this);
+ }
+ },
+ _onColorButtonEnter: function (event) {
+ this._super.apply(this, arguments);
+ if ($(event.target).hasClass('mk_custom_color')) {
+ var color = event.currentTarget.style.backgroundColor;
+ this.$target.removeClass(this.classes);
+ this.$target.css('background-color', color);
+ this.$target.trigger('background-color-event', true);
+ }
+ },
+ _onColorButtonClick: function (event) {
+ this._super.apply(this, arguments);
+ var isCustomColor = $(event.target).hasClass('mk_custom_color');
+ this.$target.toggleClass('mk_custom_background', isCustomColor);
+ this._renderPickedColors();
+ },
+ _onCustomColorButtonClick: function () {
+ var ColorpickerDialog = new colorpicker(this, {});
+ ColorpickerDialog.on('colorpicker:saved', this, function (event) {
+ this.$target.removeClass(this.classes);
+ this.$target.addClass('mk_custom_background');
+ this.$target.css('background-color', event.data.cssColor);
+ this.$target.closest('.o_editable').trigger('content_changed');
+ this.$target.trigger('background-color-event', false);
+ this._renderPickedColors();
+ });
+ ColorpickerDialog.open();
+ },
+});
+
+});
\ No newline at end of file
diff --git a/muk_web_utils/static/src/scss/editor.scss b/muk_web_utils/static/src/scss/editor.scss
new file mode 100644
index 0000000..49aadc2
--- /dev/null
+++ b/muk_web_utils/static/src/scss/editor.scss
@@ -0,0 +1,22 @@
+/**********************************************************************************
+*
+* Copyright (C) 2017 MuK IT GmbH
+*
+* This program is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Affero General Public License as
+* published by the Free Software Foundation, either version 3 of the
+* License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+* GNU Affero General Public License for more details.
+*
+* You should have received a copy of the GNU Affero General Public License
+* along with this program. If not, see .
+*
+**********************************************************************************/
+
+.mk_add_custom_color {
+ padding: 0 ! important;
+}
\ No newline at end of file
diff --git a/muk_web_utils/template/assets.xml b/muk_web_utils/template/assets.xml
index 12bb6a3..80e4594 100644
--- a/muk_web_utils/template/assets.xml
+++ b/muk_web_utils/template/assets.xml
@@ -18,7 +18,17 @@
-->
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/muk_web_utils/template/editor.xml b/muk_web_utils/template/editor.xml
new file mode 100644
index 0000000..f853dd5
--- /dev/null
+++ b/muk_web_utils/template/editor.xml
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+