Browse Source

[IMP] web_widget_color: Refactor Module (#992)

pull/1013/merge
QS5ELkMu 6 years ago
committed by Pedro M. Baeza
parent
commit
abd53c728d
  1. 1
      web_widget_color/__init__.py
  2. 2
      web_widget_color/__manifest__.py
  3. 4
      web_widget_color/readme/CONTRIBUTORS.rst
  4. 29
      web_widget_color/readme/DESCRIPTION.rst
  5. 43
      web_widget_color/readme/USAGE.rst
  6. BIN
      web_widget_color/static/lib/jscolor/arrow.gif
  7. BIN
      web_widget_color/static/lib/jscolor/cross.gif
  8. 12
      web_widget_color/static/lib/jscolor/demo.html
  9. BIN
      web_widget_color/static/lib/jscolor/hs.png
  10. BIN
      web_widget_color/static/lib/jscolor/hv.png
  11. 40
      web_widget_color/static/lib/jscolor/jscolor-example.html
  12. 2865
      web_widget_color/static/lib/jscolor/jscolor.js
  13. 30
      web_widget_color/static/src/css/widget.css
  14. 67
      web_widget_color/static/src/js/widget.js
  15. 13
      web_widget_color/static/src/less/widget.less
  16. 26
      web_widget_color/static/src/xml/widget.xml
  17. 2
      web_widget_color/view/web_widget_color_view.xml

1
web_widget_color/__init__.py

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

2
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).#
{

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

29
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

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

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

Before

Width: 7  |  Height: 11  |  Size: 66 B

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

Before

Width: 15  |  Height: 15  |  Size: 83 B

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

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

Before

Width: 181  |  Height: 101  |  Size: 2.6 KiB

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

Before

Width: 181  |  Height: 101  |  Size: 2.8 KiB

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

2865
web_widget_color/static/lib/jscolor/jscolor.js
File diff suppressed because it is too large
View File

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

67
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;
});

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

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

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

Loading…
Cancel
Save