forked from Techsystech/web
Added new form field web timepicker widget for Odoo Version 9.0
docmfried
David Alonso
parent
102c81e48d
commit
0937c54b6b
|
|
@ -0,0 +1,50 @@
|
|||
.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
|
||||
:alt: License: AGPL-3
|
||||
|
||||
==============================
|
||||
Timepicker widget in form view
|
||||
==============================
|
||||
|
||||
This module defines a timepicker widget, to be used with either char fields
|
||||
or (function) fields of type character. Use ``widget='timepicker'`` in your form view
|
||||
definition.
|
||||
|
||||
If you use the widget with a character field, the input field has the following default
|
||||
timepicker options:
|
||||
|
||||
* By default direct input is disabled
|
||||
* By default the possible selection is based on 15 minute interval
|
||||
* By default 24 hour mode with H:i format
|
||||
* Scroll selection defaults to current server time
|
||||
|
||||
The widget uses the jquery.timepicker plugin by Jon Thornton
|
||||
|
||||
|
||||
Usage
|
||||
=====
|
||||
|
||||
This module defines a new widget type for form views input fileds.
|
||||
|
||||
Set the attribute ``widget=timepicker`` in a ``field`` tag in a form view.
|
||||
|
||||
|
||||
ToDo
|
||||
====
|
||||
|
||||
Make timepicker options available in field defintion as additional attributes / options.
|
||||
|
||||
|
||||
Credits
|
||||
=======
|
||||
|
||||
Jon Thornton (jquery.timepicker plugin)
|
||||
jquery.timepicker plugin - This software is made available under the open source MIT License. © 2014 Jon Thornton and contributors
|
||||
|
||||
Odoo Community Association (OCA)
|
||||
|
||||
|
||||
Contributors
|
||||
------------
|
||||
|
||||
* Michael Fried
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
##############################################################################
|
||||
#
|
||||
# OpenERP, Open Source Management Solution
|
||||
# Copyright (C) 2015 BADEP (<http://www.badep.ma>).
|
||||
#
|
||||
# This program is free software: you can redistribute it and/or modify
|
||||
# it under the terms of the GNU Affero General Public License as
|
||||
# published by the Free Software Foundation, either version 3 of the
|
||||
# License, or (at your option) any later version.
|
||||
#
|
||||
# This program is distributed in the hope that it will be useful,
|
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
# GNU Affero General Public License for more details.
|
||||
#
|
||||
# You should have received a copy of the GNU Affero General Public License
|
||||
# along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
#
|
||||
##############################################################################
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
# -*- coding: utf-8 -*-
|
||||
##############################################################################
|
||||
#
|
||||
# OpenERP, Open Source Management Solution
|
||||
# Copyright (C) 2016 Michael Fried @ Vividlab (<http://www.vividlab.de>).
|
||||
#
|
||||
# This program is free software: you can redistribute it and/or modify
|
||||
# it under the terms of the GNU Affero General Public License as
|
||||
# published by the Free Software Foundation, either version 3 of the
|
||||
# License, or (at your option) any later version.
|
||||
#
|
||||
# This program is distributed in the hope that it will be useful,
|
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
# GNU Affero General Public License for more details.
|
||||
#
|
||||
# You should have received a copy of the GNU Affero General Public License
|
||||
# along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
#
|
||||
##############################################################################
|
||||
|
||||
|
||||
{
|
||||
'name': '',
|
||||
'version': '0.1',
|
||||
'author': 'Vividlab, Odoo Community Association (OCA)',
|
||||
'license': 'AGPL-3',
|
||||
'category': 'Web',
|
||||
'website': 'https://github.com/OCA/Web',
|
||||
|
||||
# any module necessary for this one to work correctly
|
||||
'depends': [
|
||||
'web'
|
||||
],
|
||||
|
||||
'css': [ 'static/src/css/jquery.timepicker.css',
|
||||
'static/src/css/timepicker.css',
|
||||
],
|
||||
'js': [ 'static/src/js/timepicker_widget.js',
|
||||
'static/src/js/jquery.timepicker.js',
|
||||
],
|
||||
'qweb' : [ 'static/src/xml/time_picker.xml', ],
|
||||
|
||||
# always loaded
|
||||
'data': [
|
||||
'views/assets.xml',
|
||||
],
|
||||
|
||||
#Installation options
|
||||
"installable": True,
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
|
|
@ -0,0 +1,72 @@
|
|||
.ui-timepicker-wrapper {
|
||||
overflow-y: auto;
|
||||
height: 150px;
|
||||
width: 6.5em;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
|
||||
box-shadow:0 5px 10px rgba(0,0,0,0.2);
|
||||
outline: none;
|
||||
z-index: 10001;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-timepicker-wrapper.ui-timepicker-with-duration {
|
||||
width: 13em;
|
||||
}
|
||||
|
||||
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
|
||||
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
.ui-timepicker-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.ui-timepicker-duration {
|
||||
margin-left: 5px; color: #888;
|
||||
}
|
||||
|
||||
.ui-timepicker-list:hover .ui-timepicker-duration {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li {
|
||||
padding: 3px 0 3px 5px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
color: #000;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ui-timepicker-list:hover .ui-timepicker-selected {
|
||||
background: #fff; color: #000;
|
||||
}
|
||||
|
||||
li.ui-timepicker-selected,
|
||||
.ui-timepicker-list li:hover,
|
||||
.ui-timepicker-list .ui-timepicker-selected:hover {
|
||||
background: #1980EC; color: #fff;
|
||||
}
|
||||
|
||||
li.ui-timepicker-selected .ui-timepicker-duration,
|
||||
.ui-timepicker-list li:hover .ui-timepicker-duration {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li.ui-timepicker-disabled,
|
||||
.ui-timepicker-list li.ui-timepicker-disabled:hover,
|
||||
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
|
||||
color: #888;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ui-timepicker-list li.ui-timepicker-disabled:hover,
|
||||
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.oe_form_editable .oe_form .oe_form_field_time input {
|
||||
width: 7em;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,89 @@
|
|||
odoo.define('timepicker.form_widgets', function (require) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var core = require('web.core');
|
||||
var formats = require('web.formats');
|
||||
var common = require('web.form_common');
|
||||
|
||||
var _t = core._t;
|
||||
|
||||
var TimePicker = common.AbstractField.extend(common.ReinitializeFieldMixin, {
|
||||
template: "TimePickerField",
|
||||
widget_class: 'oe_form_field_time',
|
||||
events: {
|
||||
'change input': 'store_dom_value',
|
||||
},
|
||||
init: function (field_manager, node) {
|
||||
this._super(field_manager, node);
|
||||
|
||||
this.options = _.defaults( {}, {
|
||||
disableTextInput: true,
|
||||
forceRoundTime: true,
|
||||
step: 15,
|
||||
selectOnBlur: true,
|
||||
timeFormat: 'H:i',
|
||||
scrollDefault: 'now',
|
||||
});
|
||||
},
|
||||
initialize_content: function() {
|
||||
if(!this.get("effective_readonly")) {
|
||||
this.$input = this.$el.find('input');
|
||||
this.$input.timepicker(this.options);
|
||||
this.setupFocus(this.$('input'));
|
||||
}
|
||||
},
|
||||
is_syntax_valid: function() {
|
||||
if (!this.get("effective_readonly") && this.$("input").size() > 0) {
|
||||
try {
|
||||
this.parse_value(this.$('input').val(), '');
|
||||
return true;
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
is_false: function() {
|
||||
return this.get('value') === '' || this._super();
|
||||
},
|
||||
focus: function() {
|
||||
var input = this.$('input:first')[0];
|
||||
return input ? input.focus() : false;
|
||||
},
|
||||
set_dimensions: function (height, width) {
|
||||
this._super(height, width);
|
||||
this.$('input').css({
|
||||
height: height,
|
||||
width: width
|
||||
});
|
||||
},
|
||||
store_dom_value: function () {
|
||||
if (!this.get('effective_readonly')) {
|
||||
this.internal_set_value(
|
||||
this.parse_value(
|
||||
this.$('input').val()));
|
||||
}
|
||||
},
|
||||
parse_value: function(val, def) {
|
||||
return formats.parse_value(val, this, def);
|
||||
},
|
||||
format_value: function(val, def) {
|
||||
return formats.format_value(val, this, def);
|
||||
},
|
||||
render_value: function() {
|
||||
var show_value = this.format_value(this.get('value'), '');
|
||||
|
||||
if (!this.get("effective_readonly")) {
|
||||
this.$input = this.$el.find('input');
|
||||
this.$input.val(show_value);
|
||||
} else {
|
||||
this.$(".oe_form_time_content").text(show_value);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
core.form_widget_registry.add('timepicker', TimePicker);
|
||||
|
||||
return TimePicker;
|
||||
});
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<templates id="template" xml:space="preserve">
|
||||
<t t-name="TimePickerField">
|
||||
<span t-att-class="'oe_form_field '+widget.widget_class" t-att-style="widget.node.attrs.style">
|
||||
<t t-if="!widget.get('effective_readonly')">
|
||||
<input t-att-type="'text'"
|
||||
class="o_timepicker_input"
|
||||
t-att-id="widget.id_for_label"
|
||||
t-att-tabindex="widget.node.attrs.tabindex"
|
||||
t-att-autofocus="widget.node.attrs.autofocus"
|
||||
t-att-placeholder="widget.node.attrs.placeholder"
|
||||
t-att-maxlength="widget.field.size"/>
|
||||
<span class="fa fa-clock-o o_timepicker_button"/>
|
||||
</t>
|
||||
<t t-if="widget.get('effective_readonly')">
|
||||
<span class="oe_form_time_content"></span>
|
||||
</t>
|
||||
</span>
|
||||
</t>
|
||||
|
||||
<!-- <t t-name="TimePickerField">
|
||||
<span t-att-class="'oe_form_field '+widget.widget_class" t-att-style="widget.node.attrs.style">
|
||||
<t t-if="!widget.get('effective_readonly')">
|
||||
<input t-att-type="'text'"
|
||||
class="o_timepicker_input"
|
||||
t-att-id="widget.id_for_label"
|
||||
t-att-tabindex="widget.node.attrs.tabindex"
|
||||
t-att-autofocus="widget.node.attrs.autofocus"
|
||||
t-att-placeholder="widget.node.attrs.placeholder"
|
||||
t-att-maxlength="widget.field.size"/>
|
||||
<span class="fa fa-clock-o o_timepicker_button"/>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="o_timepicker">
|
||||
<input type="text" class="o_timepicker_input"/>
|
||||
<span class="fa fa-clock-o o_timepicker_button"/>
|
||||
</div>
|
||||
</t>
|
||||
</span>
|
||||
</t>
|
||||
-->
|
||||
</templates>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<openerp>
|
||||
<data>
|
||||
<template id="assets_backend" name="web_widget_timepicker assets" inherit_id="web.assets_backend">
|
||||
<xpath expr="." position="inside">
|
||||
<script type="text/javascript" src="/web_widget_timepicker/static/src/js/jquery.timepicker.js"></script>
|
||||
<script type="text/javascript" src="/web_widget_timepicker/static/src/js/timepicker_widget.js"></script>
|
||||
<link rel="stylesheet" href="/web_widget_timepicker/static/src/css/jquery.timepicker.css"/>
|
||||
<link rel="stylesheet" href="/web_widget_timepicker/static/src/css/timepicker.css"/>
|
||||
</xpath>
|
||||
</template>
|
||||
</data>
|
||||
</openerp>
|
||||
Loading…
Reference in New Issue