[IMP] web_widget_color: Refactor Module (#992)

6 years ago · d167289bbc
17 changed files with 1724 additions and 802 deletions
--- a/web_widget_color/init.py
+++ b/web_widget_color/init.py
@ -1,2 +1 @@
 # -*- coding: utf-8 -*-
 #
--- a/web_widget_color/manifest.py
+++ b/web_widget_color/manifest.py
@ -1,8 +1,8 @@
 # -*- 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>
 # Copyright (C) 2018 Alexandre Díaz <dev@redneboa.es>
 #
 # License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).#
 {
--- a/web_widget_color/readme/CONTRIBUTORS.rst
+++ b/web_widget_color/readme/CONTRIBUTORS.rst
@ -0,0 +1,4 @@
 * Adil Houmadi <adil.houmadi@gmail.com>
 * Enric Tobella <etobella@creublanca.es>
 * Nicolas JEUDY (Sudokeys) <https://www.github.com/njeudy>
 * Alexandre Díaz <dev@redneboa.es>
--- a/web_widget_color/readme/DESCRIPTION.rst
+++ b/web_widget_color/readme/DESCRIPTION.rst
@ -0,0 +1,29 @@
 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|
 .. |picker| image:: ./images/picker.png
 .. |formview| image:: ./images/form_view.png
 .. |listview| image:: ./images/list_view.png
--- a/web_widget_color/readme/USAGE.rst
+++ b/web_widget_color/readme/USAGE.rst
@ -0,0 +1,43 @@
 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>
    ...
 Widget Options::
    - readonly_mode
        - 'default' > Color Box + text
        - 'color' > Only Color Box
        - 'text' > Only Text
    ...
    <field name="arch" type="xml">
        <tree string="View name">
            ...
            <field name="color" widget="color" options="{'readonly_mode': 'color'}"/>
            ...
        </tree>
    </field>
    ...
--- 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
@ -1,12 +0,0 @@
 <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-example.html
+++ b/web_widget_color/static/lib/jscolor/jscolor-example.html
@ -0,0 +1,40 @@
 <!DOCTYPE html>
 <html>
 <head>
 	<title>jscolor Example</title>
 </head>
 <body style="text-align:center;">
 	<script src="jscolor.js"></script>
 	<h2>Example 1</h2>
 	Color: <input class="jscolor" value="ab2567">
 	<h2>Example 2</h2>
 	<button class="jscolor {valueElement:'chosen-value', onFineChange:'setTextColor(this)'}">
 		Pick text color
 	</button>
 	HEX value: <input id="chosen-value" value="000000">
 	<script>
 	function setTextColor(picker) {
 		document.getElementsByTagName('body')[0].style.color = '#' + picker.toString()
 	}
 	</script>
 	<p style="margin-top:3em;">Check out <a href="http://jscolor.com/examples/">more examples at jscolor.com</a>!</p>
 </body>
 </html>
--- 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
@ -1,30 +0,0 @@
 .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
@ -1,53 +1,46 @@
 /* Global jscolor */
 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 ListRenderer = require('web.ListRenderer');
    var FieldColor = basic_fields.FieldChar.extend({
        template: 'FieldColor',
        widget_class: 'oe_form_field_color',
        _getValue: function() {
            return field_utils.format.char(this.$('input').val());
        _renderReadonly: function () {
            // Do Nothing
        },
        _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);
            }
        }
        _renderEdit: function() {
            this.$input = this.$el.find('input');
            this.jscolor = new jscolor(this.$input[0], {hash:true});
        },
    });
    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]);
        }
    // Deny unselect row if jscolor actived
    ListRenderer.include({
        unselectRow: function () {
            var canUnselect = true;
            if (this.currentRow !== null) {
                var record = this.state.data[this.currentRow];
                var recordWidgets = this.allFieldWidgets[record.id];
                canUnselect = !_.some(recordWidgets, function (widget) {
                    var $el = widget.getFocusableElement();
                    return ($el instanceof jQuery && $el.hasClass('jscolor-active'));
                });
            }
            if (canUnselect) {
                return this._super.apply(this, arguments);
            } else {
                return $.Deferred().resolve();
            }
        },
    });
    return FieldColor
    return FieldColor;
 });
--- a/web_widget_color/static/src/less/widget.less
+++ b/web_widget_color/static/src/less/widget.less
@ -0,0 +1,13 @@
 .oe_form_field_color {
    >.oe_form_char_content {
        vertical-align: text-bottom;
    }
    .color_box {
        width:25px;
        height: 1em;
        display: inline-block;
        margin-right: 5px;
        border: 1px solid #8c8c8c;
        border-radius: 3px;
    }
 }
--- a/web_widget_color/static/src/xml/widget.xml
+++ b/web_widget_color/static/src/xml/widget.xml
@ -1,22 +1,20 @@
 <?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'"/>
        <span t-attf-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"
               t-att-value="widget.value"
               class="o_input"
               t-if="widget.mode !== 'readonly'"/>
            <t t-else="">
                <div/>
                <span class="oe_form_char_content"></span>
                <div t-if="!('readonly_mode' in widget.nodeOptions) or widget.nodeOptions.readonly_mode != 'text'" class="color_box" t-attf-style="background-color: {{widget.value}}" />
                <span t-if="!('readonly_mode' in widget.nodeOptions) or widget.nodeOptions.readonly_mode != 'color'" class="oe_form_char_content"><t t-esc="widget.value" /></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
@ -2,7 +2,7 @@
 <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"/>
            <link rel="stylesheet" href="/web_widget_color/static/src/less/widget.less"/>
            <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>