publish muk_web_utils - 12.0

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",

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

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 <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();
+    },
+});
+
+});

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 <http://www.gnu.org/licenses/>.
+*
+**********************************************************************************/
+	
+.mk_add_custom_color {
+	padding: 0 ! important;
+}

muk_web_utils/template/assets.xml

@@ -19,6 +19,16 @@
 
 <odoo>
 	
+	<template id="assets_editor" name="Editor Assets" inherit_id="web_editor.assets_editor">
+		<xpath expr="//link[last()]" position="after">
+			<link rel="stylesheet" type="text/scss" href="/muk_web_utils/static/src/scss/variables.scss" />
+			<link rel="stylesheet" type="text/scss" href="/muk_web_utils/static/src/scss/editor.scss" />
+		</xpath>
+		<xpath expr="//script[last()]" position="after">
+			<script type="text/javascript" src="/muk_web_utils/static/src/js/editor/snippets/options.js" />
+		</xpath>
+	</template>
+	
 	<template id="assets_backend" name="Backend Assets" inherit_id="web.assets_backend">
 		<xpath expr="//link[last()]" position="after">
 			<link rel="stylesheet" type="text/scss" href="/muk_web_utils/static/src/scss/variables.scss" />

muk_web_utils/template/editor.xml

@@ -0,0 +1,33 @@
+<?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>