Techsystech
/
web
mirror of https://github.com/OCA/web.git
3
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[IMP] web_widget_color: Refactor Module (#992)

pull/1113/head
QS5ELkMu 2018-08-07 09:08:01 +02:00 committed by Pedro M. Baeza
parent 2244f91335
commit d167289bbc
17 changed files with 1757 additions and 835 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web_widget_color/__init__.py
View File

@ -1,2 +1 @@
# -*- coding: utf-8 -*-
# #

2
web_widget_color/__manifest__.py
View File

@ -1,8 +1,8 @@
# -*- coding: utf-8 -*-
# Odoo, Open Source Web Widget Color # Odoo, Open Source Web Widget Color
# Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>). # Copyright (C) 2012 Savoir-faire Linux (<http://www.savoirfairelinux.com>).
# Copyright (C) 2014 Anybox <http://anybox.fr> # Copyright (C) 2014 Anybox <http://anybox.fr>
# Copyright (C) 2015 Taktik SA <http://taktik.be> # 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).# # License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).#
{ {

4
web_widget_color/readme/CONTRIBUTORS.rst 100644
View File

@ -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>

29
web_widget_color/readme/DESCRIPTION.rst 100644
View File

@ -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

43
web_widget_color/readme/USAGE.rst 100644
View File

@ -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>
...

BIN
web_widget_color/static/lib/jscolor/arrow.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 66 B

BIN
web_widget_color/static/lib/jscolor/cross.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 83 B

12
web_widget_color/static/lib/jscolor/demo.html
View File

@ -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>

BIN
web_widget_color/static/lib/jscolor/hs.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

BIN
web_widget_color/static/lib/jscolor/hv.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

40
web_widget_color/static/lib/jscolor/jscolor-example.html 100644
View File

@ -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>

2321
web_widget_color/static/lib/jscolor/jscolor.js
View File

File diff suppressed because it is too large Load Diff

30
web_widget_color/static/src/css/widget.css
View File

@ -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;
}

69
web_widget_color/static/src/js/widget.js
View File

@ -1,53 +1,46 @@
/* Global jscolor */
odoo.define('web.web_widget_color', function(require) { odoo.define('web.web_widget_color', function(require) {
"use strict"; "use strict";
var basic_fields = require('web.basic_fields'); var basic_fields = require('web.basic_fields');
var field_registry = require('web.field_registry'); var field_registry = require('web.field_registry');
var FormController = require('web.FormController'); var ListRenderer = require('web.ListRenderer');
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({ var FieldColor = basic_fields.FieldChar.extend({
template: 'FieldColor', template: 'FieldColor',
widget_class: 'oe_form_field_color', 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);
} _renderReadonly: function () {
} // Do Nothing
},
_renderEdit: function() {
this.$input = this.$el.find('input');
this.jscolor = new jscolor(this.$input[0], {hash:true});
},
}); });
field_registry.add('color', FieldColor); field_registry.add('color', FieldColor);
/* // Deny unselect row if jscolor actived
* Init jscolor for each editable mode on view form ListRenderer.include({
*/ unselectRow: function () {
FormController.include({ var canUnselect = true;
_updateEnv : function (parentID) { if (this.currentRow !== null) {
this._super(parentID); var record = this.state.data[this.currentRow];
jscolor.init(this.$el[0]); 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;
}); });

13
web_widget_color/static/src/less/widget.less 100644
View File

@ -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;
}
}

26
web_widget_color/static/src/xml/widget.xml
View File

@ -1,22 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<templates> <templates>
<t t-name="FieldColor"> <t t-name="FieldColor">
<span t-att-class="'oe_form_field '+widget.widget_class" t-att-style="widget.attrs.style"> <span t-attf-class="oe_form_field {{widget.widget_class}}" t-att-style="widget.attrs.style">
<input type="text" <input type="text"
t-att-id="widget.id_for_label" t-att-id="widget.id_for_label"
t-att-tabindex="widget.attrs.tabindex" t-att-tabindex="widget.attrs.tabindex"
t-att-autofocus="widget.attrs.autofocus" t-att-autofocus="widget.attrs.autofocus"
t-att-placeholder="widget.attrs.placeholder" t-att-placeholder="widget.attrs.placeholder"
t-att-maxlength="widget.field.size" t-att-maxlength="widget.field.size"
class="color {hash:true} o_input" t-att-value="widget.value"
t-if="widget.mode !== 'readonly'"/> class="o_input"
t-if="widget.mode !== 'readonly'"/>
<t t-else=""> <t t-else="">
<div/> <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 class="oe_form_char_content"></span> <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> </t>
</span> </span>
</t> </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> </templates>

2
web_widget_color/view/web_widget_color_view.xml
View File

@ -2,7 +2,7 @@
<odoo> <odoo>
<template id="assets_backend" name="web_widget_color assets" inherit_id="web.assets_backend"> <template id="assets_backend" name="web_widget_color assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside"> <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/lib/jscolor/jscolor.js"></script>
<script type="text/javascript" src="/web_widget_color/static/src/js/widget.js"></script> <script type="text/javascript" src="/web_widget_color/static/src/js/widget.js"></script>
</xpath> </xpath>