forked from Techsystech/web
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