mirror of https://github.com/OCA/web.git
Merge pull request #777 from etobella/11.0-mig-web_widget_color
[11.0] [MIG] web_widget_colorpull/795/head
Pedro M. Baeza
GitHub
commit
82f232c46b
|
|
@ -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.
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
#
|
||||
|
|
@ -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,
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 B |
Binary file not shown.
|
After Width: | Height: | Size: 83 B |
|
|
@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue