Merge pull request #104 from hbrunn/7.0-web_widget_color

[ADD] backport web_widget_color

web_widget_color/__init__.py

@@ -0,0 +1,25 @@
+# -*- encoding: utf-8 -*-
+############################################################################
+#
+# Odoo, Open Source Web Color
+# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>).
+# Copyright (C) 2014 Anybox <http://anybox.fr>
+# Copyright (C) 2015 Taktik SA <http://taktik.be>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU 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 General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com>
+# @author Adil Houmadi <ah@taktik.be>
+#
+##############################################################################

web_widget_color/__openerp__.py

@@ -0,0 +1,140 @@
+# -*- encoding: utf-8 -*-
+############################################################################
+#
+# Odoo, Open Source Web Widget Color
+# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>).
+# Copyright (C) 2014 Anybox <http://anybox.fr>
+# Copyright (C) 2015 Taktik SA <http://taktik.be>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU 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 General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+# @author Étienne Beaudry Auger <etienne.b.auger@savoirfairelinux.com>
+# @author Adil Houmadi <ah@taktik.be>
+#
+##############################################################################
+{
+    'name': "Web Widget Color",
+    'category': "web",
+    'version': "1.0",
+    'depends': ['base', 'web'],
+    'description': '''
+Color widget for Odoo web client
+================================
+
+This module aims to add a color picker to Odoo.
+
+It's a `jsColor <http://jscolor.com/>`_ lib integration.
+
+
+Features
+========
+
+* The picker allow the user to quickly select a color on edit mode
+
+  |picker|
+
+  .. note::
+
+      Notice how html code and the background color is updating when selecting
+      a color.
+
+
+* Display the color on form view when you are not editing it
+
+  |formview|
+
+* Display the color on list view to quickly find what's wrong!
+
+  |listview|
+
+
+Requirements
+============
+
+This module has been ported to 8.0
+
+
+Usage
+=====
+
+You need to declare a char field of at least size 7::
+
+    _columns = {
+        'color': fields.char(
+            u"Couleur",
+            help=u"Toutes couleur valid css, exemple blue ou #f57900"
+        ),
+    }
+
+    OR
+
+    color = fields.Char(
+        string="Color",
+        help="Choose your color"
+    )
+
+
+In the view declaration, put widget='color' attribute in the field tag::
+
+    ...
+    <field name="arch" type="xml">
+        <tree string="View name">
+            ...
+            <field name="name"/>
+            <field name="color" widget="color"/>
+            ...
+        </tree>
+    </field>
+    ...
+
+.. |picker| image:: /web_widget_color/static/src/img/picker.png
+.. |formview| image:: /web_widget_color/static/src/img/form_view.png
+.. |listview| image:: /web_widget_color/static/src/img/list_view.png
+
+Credits
+=======
+
+Contributors
+------------
+
+* Adil Houmadi <adil.houmadi@gmail.com>
+
+Maintainer
+----------
+
+.. image:: http://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+   :target: http://odoo-community.org
+
+This module is maintained by the OCA.
+
+OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.
+
+To contribute to this module, please visit http://odoo-community.org.''',
+    'qweb': [
+        'static/src/xml/widget.xml',
+    ],
+    'css': [
+        'static/src/css/widget.css',
+    ],
+    'js': [
+        'static/lib/jscolor/jscolor.js',
+        'static/src/js/widget.js',
+    ],
+    'auto_install': False,
+    'installable': True,
+    'web_preload': True,
+}

web_widget_color/static/lib/jscolor/demo.html

@@ -0,0 +1,12 @@
+<html>
+<head>
+	<title>jscolor demo</title>
+</head>
+<body>
+
+	<script type="text/javascript" src="jscolor.js"></script>
+
+	Click here: <input class="color" value="66ff00">
+
+</body>
+</html>

web_widget_color/static/src/css/widget.css

@@ -0,0 +1,23 @@
+.openerp .oe_form .oe_form_field_color input {
+    width: 100%;
+}
+
+.openerp .oe_form .oe_form_field_color div {
+    border: 1px solid;
+    display: inline-block;
+    height: 14px;
+    margin-right: 10px;
+    position: relative;
+    top: 3px;
+    width: 40px;
+}
+
+.oe_list_field_color div {
+    border: 1px solid;
+    display: inline-block;
+    height: 14px;
+    margin-right: 10px;
+    position: relative;
+    top: 3px;
+    width: 40px;
+}

web_widget_color/static/src/js/widget.js

@@ -0,0 +1,59 @@
+openerp.web_widget_color = function (instance) {
+
+    var _super_getDir = jscolor.getDir.prototype;
+    jscolor.getDir = function () {
+        var dir = _super_getDir.constructor();
+        if (dir.indexOf('web_widget_color') === -1) {
+            jscolor.dir = 'web_widget_color/static/lib/jscolor/';
+        }
+        return jscolor.dir;
+    };
+
+    instance.web.form.widgets.add('color', 'instance.web.form.FieldColor');
+
+    instance.web.search.fields.add('color', 'instance.web.search.CharField');
+
+    instance.web.form.FieldColor = instance.web.form.FieldChar.extend({
+        template: 'FieldColor',
+        widget_class: 'oe_form_field_color',
+        is_syntax_valid: function () {
+            var $input = this.$('input');
+            if (!this.get("effective_readonly") && $input.size() > 0) {
+                var val = $input.val();
+                var isOk = /^#[0-9A-F]{6}$/i.test(val);
+                if (!isOk) {
+                    return false;
+                }
+                try {
+                    this.parse_value(this.$('input').val(), '');
+                    return true;
+                } catch (e) {
+                    return false;
+                }
+            }
+            return true;
+        },
+        render_value: function () {
+            var show_value = this.format_value(this.get('value'), '');
+            if (!this.get("effective_readonly")) {
+                var $input = this.$el.find('input');
+                $input.val(show_value);
+                $input.css("background-color", show_value)
+                jscolor.init(this.$el[0]);
+            } else {
+                this.$(".oe_form_char_content").text(show_value);
+                this.$('div').css("background-color", show_value)
+            }
+        }
+    });
+
+    /*
+     * Init jscolor for each editable mode on view form
+     */
+    instance.web.FormView.include({
+        to_edit_mode: function () {
+            this._super();
+            jscolor.init(this.$el[0]);
+        }
+    });
+};

web_widget_color/static/src/xml/widget.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+    <t t-name="FieldColor">
+        <span t-att-class="'oe_form_field '+widget.widget_class" t-att-style="widget.node.attrs.style">
+            <t t-if="!widget.get('effective_readonly')">
+                <input type="text"
+                       t-att-id="widget.id_for_label"
+                       t-att-tabindex="widget.node.attrs.tabindex"
+                       t-att-autofocus="widget.node.attrs.autofocus"
+                       t-att-placeholder="widget.node.attrs.placeholder"
+                       t-att-maxlength="widget.field.size"
+                       class="color {hash:true}"
+                        />
+            </t>
+            <t t-if="widget.get('effective_readonly')">
+                <div/>
+                <span class="oe_form_char_content"></span>
+            </t>
+        </span>
+    </t>
+    <tr t-extend="ListView.row">
+        <t t-jquery="t td t" t-operation="replace"><t t-if="column.widget =='color' || column.type == 'color'"><div t-att-style="'background-color:' + render_cell(record, column)"/></t><t t-raw="render_cell(record, column)"/></t>
+    </tr>
+</templates>