MuK IT GmbH
5 years ago
6 changed files with 7 additions and 161 deletions
-
5muk_web_utils/__manifest__.py
-
5muk_web_utils/doc/changelog.rst
-
93muk_web_utils/static/src/js/editor/snippets/options.js
-
22muk_web_utils/static/src/scss/editor.scss
-
10muk_web_utils/template/assets.xml
-
33muk_web_utils/template/editor.xml
@ -1,93 +0,0 @@ |
|||
/********************************************************************************** |
|||
* |
|||
* 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 <http://www.gnu.org/licenses/>.
|
|||
* |
|||
**********************************************************************************/ |
|||
|
|||
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 = $('<button/>', { |
|||
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(); |
|||
}, |
|||
}); |
|||
|
|||
}); |
|||
@ -1,22 +0,0 @@ |
|||
/********************************************************************************** |
|||
* |
|||
* 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 <http://www.gnu.org/licenses/>. |
|||
* |
|||
**********************************************************************************/ |
|||
|
|||
.mk_add_custom_color { |
|||
padding: 0 ! important; |
|||
} |
|||
@ -1,33 +0,0 @@ |
|||
<?xml version="1.0" encoding="UTF-8"?> |
|||
|
|||
<!-- |
|||
Copyright (C) 2018 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 <http://www.gnu.org/licenses/>. |
|||
--> |
|||
|
|||
<odoo> |
|||
|
|||
<template id="colorpicker" name="Color Picker" inherit_id="web_editor.colorpicker"> |
|||
<xpath expr="//colorpicker/div[@data-name='common']" position="after"> |
|||
<div class="o_colorpicker_section" data-name="custom" data-display="Custom Colors"> |
|||
<a class="btn w-100 d-block mt-2 float-left mk_add_custom_color"> |
|||
<i class="fa fa-plus"></i> |
|||
Add Custom Color |
|||
</a> |
|||
</div> |
|||
</xpath> |
|||
</template> |
|||
|
|||
</odoo> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue