Merge pull request #777 from etobella/11.0-mig-web_widget_color

[11.0] [MIG] web_widget_color
7 years ago · 82f232c46b
17 changed files with 1267 additions and 0 deletions
--- a/web_widget_color/README.rst
+++ b/web_widget_color/README.rst
@ -0,0 +1,100 @@
+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|
+
+
+Usage
+=====
+
+You need to declare a char field::
+
+    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="color" widget="color"/>
+            ...
+        </tree>
+    </field>
+    ...
+    <field name="arch" type="xml">
+        <form string="View name">
+            ...
+            <field name="color" widget="color"/>
+            ...
+        </form>
+    </field>
+    ...
+
+.. |picker| image:: ./images/picker.png
+.. |formview| image:: ./images/form_view.png
+.. |listview| image:: ./images/list_view.png
+
+.. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
+   :alt: Try me on Runbot
+   :target: https://runbot.odoo-community.org/runbot/162/11.0
+
+Bug Tracker
+===========
+
+Bugs are tracked on `GitHub Issues
+<https://github.com/OCA/OCA/issues>`_. In case of trouble, please
+check there if your issue has already been reported. If you spotted it first,
+help us smashing it by providing a detailed and welcomed feedback.
+
+Credits
+=======
+
+Contributors
+------------
+
+* Adil Houmadi <adil.houmadi@gmail.com>
+* Enric Tobella <etobella@creublanca.es>
+* Nicolas JEUDY (Sudokeys) <https://www.github.com/njeudy>
+
+Maintainer
+----------
+
+.. image:: https://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+   :target: https://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 https://odoo-community.org.
--- a/web_widget_color/init.py
+++ b/web_widget_color/init.py
@ -0,0 +1,2 @@
+# -*- coding: utf-8 -*-
+#
--- a/web_widget_color/manifest.py
+++ b/web_widget_color/manifest.py
@ -0,0 +1,28 @@
+# -*- coding: 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>
+#
+# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).#
+{
+    'name': "Web Widget Color",
+    'category': "web",
+    'version': "11.0.1.0.0",
+    "author": "Savoir-faire Linux, "
+              "Anybox, "
+              "Taktik SA, "
+              "Sudokeys, "
+              "Odoo Community Association (OCA)",
+    'depends': ['base', 'web'],
+    'data': [
+        'view/web_widget_color_view.xml'
+    ],
+    'qweb': [
+        'static/src/xml/widget.xml',
+    ],
+    'license': 'AGPL-3',
+    'auto_install': False,
+    'installable': True,
+    'web_preload': True,
+}
--- a/web_widget_color/images/form_view.png
+++ b/web_widget_color/images/form_view.png
--- a/web_widget_color/images/list_view.png
+++ b/web_widget_color/images/list_view.png
--- a/web_widget_color/images/picker.png
+++ b/web_widget_color/images/picker.png
--- a/web_widget_color/static/description/icon.png
+++ b/web_widget_color/static/description/icon.png
--- a/web_widget_color/static/lib/jscolor/arrow.gif
+++ b/web_widget_color/static/lib/jscolor/arrow.gif
--- a/web_widget_color/static/lib/jscolor/cross.gif
+++ b/web_widget_color/static/lib/jscolor/cross.gif
--- a/web_widget_color/static/lib/jscolor/demo.html
+++ b/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>
--- a/web_widget_color/static/lib/jscolor/hs.png
+++ b/web_widget_color/static/lib/jscolor/hs.png
--- a/web_widget_color/static/lib/jscolor/hv.png
+++ b/web_widget_color/static/lib/jscolor/hv.png
--- a/web_widget_color/static/lib/jscolor/jscolor.js
+++ b/web_widget_color/static/lib/jscolor/jscolor.js
--- a/web_widget_color/static/src/css/widget.css
+++ b/web_widget_color/static/src/css/widget.css
@ -0,0 +1,30 @@
+.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;
+}
+
+.color_box {
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    margin-right: 5px;
+}
--- a/web_widget_color/static/src/js/widget.js
+++ b/web_widget_color/static/src/js/widget.js
@ -0,0 +1,53 @@
+odoo.define('web.web_widget_color', function(require) {
+    "use strict";
+
+    var basic_fields = require('web.basic_fields');
+    var field_registry = require('web.field_registry');
+    var FormController = require('web.FormController');
+    var field_utils = require('web.field_utils');
+
+    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;
+    };
+
+    var FieldColor = basic_fields.FieldChar.extend({
+        template: 'FieldColor',
+        widget_class: 'oe_form_field_color',
+        _getValue: function() {
+            return field_utils.format.char(this.$('input').val());
+        },
+        _render: function () {
+            var show_value = field_utils.format.char(this.value);
+            jscolor.init(this.$el[0]);
+            if (this.mode !== 'readonly') {
+                var $input = this.$el.find('input');
+                $input.val(show_value);
+                $input.css("background-color", show_value);
+                this.$input = $input;
+                this.$(".oe_form_char_content").text(show_value);
+                this.$('span').css("background-color", show_value);
+            } else {
+                this.$(".oe_form_char_content").text(show_value);
+                this.$('span').css("background-color", show_value);
+
+            }
+        }
+    });
+    field_registry.add('color', FieldColor);
+
+    /*
+     * Init jscolor for each editable mode on view form
+     */
+    FormController.include({
+        _updateEnv : function (parentID) {
+            this._super(parentID);
+            jscolor.init(this.$el[0]);
+        }
+    });
+    return FieldColor
+});
--- a/web_widget_color/static/src/xml/widget.xml
+++ b/web_widget_color/static/src/xml/widget.xml
@ -0,0 +1,22 @@
+<?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.attrs.style">
+                <input type="text"
+                       t-att-id="widget.id_for_label"
+                       t-att-tabindex="widget.attrs.tabindex"
+                       t-att-autofocus="widget.attrs.autofocus"
+                       t-att-placeholder="widget.attrs.placeholder"
+                       t-att-maxlength="widget.field.size"
+                       class="color {hash:true} o_input"
+                        t-if="widget.mode !== 'readonly'"/>
+            <t t-else="">
+                <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 class="color_box" t-att-style="'background-color:' + render_cell(record, column)"/></t><t t-raw="render_cell(record, column)"/></t>
+    </tr>
+</templates>
--- a/web_widget_color/view/web_widget_color_view.xml
+++ b/web_widget_color/view/web_widget_color_view.xml
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<odoo>
+    <template id="assets_backend" name="web_widget_color assets" inherit_id="web.assets_backend">
+        <xpath expr="." position="inside">
+            <link rel="stylesheet" href="/web_widget_color/static/src/css/widget.css"/>
+            <script type="text/javascript" src="/web_widget_color/static/lib/jscolor/jscolor.js"></script>
+            <script type="text/javascript" src="/web_widget_color/static/src/js/widget.js"></script>
+        </xpath>
+    </template>
+</odoo>