mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
[IMP] web_widget_color: Refactor Module (#992)
This commit is contained in:
QS5ELkMu
Pedro M. Baeza
Binary file not shown.
|
Before Width: | Height: | Size: 66 B |
Binary file not shown.
|
Before Width: | Height: | Size: 83 B |
@@ -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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
40
web_widget_color/static/lib/jscolor/jscolor-example.html
Normal file
40
web_widget_color/static/lib/jscolor/jscolor-example.html
Normal 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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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;
|
||||
}
|
||||
@@ -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());
|
||||
},
|
||||
_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);
|
||||
|
||||
/*
|
||||
* 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
Normal file
13
web_widget_color/static/src/less/widget.less
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user