[IMP] web: New priority widget + form field

4 files changed, 151 insertions, 76 deletions

diff --git a/addons/web/static/src/js/views/form_widgets.js b/addons/web/static/src/js/views/form_widgets.js
index 9fa8a9115ea..bda63d57fc2 100644
--- a/addons/web/static/src/js/views/form_widgets.js
+++ b/addons/web/static/src/js/views/form_widgets.js
@@ -11,6 +11,7 @@ var common = require('web.form_common');
 var formats = require('web.formats');
 var framework = require('web.framework');
 var Model = require('web.DataModel');
+var Priority = require('web.Priority');
 var pyeval = require('web.pyeval');
 var session = require('web.session');
 var utils = require('web.utils');
@@ -248,60 +249,54 @@ var KanbanSelection = FieldChar.extend({
     },
 });
 
-var Priority = FieldChar.extend({
-    init: function (field_manager, node) {
-        this._super(field_manager, node);
+var FieldPriority = common.AbstractField.extend({
+    events: {
+        'mouseup': function(e) {
+            e.stopPropagation();
+        },
     },
-    prepare_priority: function() {
-        var self = this;
-        var selection = this.field.selection || [];
-        var init_value = selection && selection[0][0] || 0;
-        var data = _.map(selection.slice(1), function(element, index) {
-            var value = {
-                'value': element[0],
-                'name': element[1],
-                'click_value': element[0],
-            };
-            if (index === 0 && self.get('value') === element[0]) {
-                value['click_value'] = init_value;
-            }
-            return value;
+    start: function() {
+        this.priority = new Priority(this, {
+            readonly: this.get('readonly'),
+            value: this.get('value'),
+            values: this.field.selection || [],
         });
-        return data;
-    },
-    render_value: function() {
-        this.priorities = this.prepare_priority();
-        this.$el.html(QWeb.render("FormPriority", {'widget': this}));
-        if (!this.get('readonly')){
-            this.$el.find('li').on('click', this.set_priority.bind(this));
-        }
-    },
-    /* setting the value: in view mode, perform an asynchronous call and reload
-    the form view; in edit mode, use set_value to save the new value that will
-    be written when saving the record. */
-    set_priority: function (ev) {
-        var self = this;
-        var li = $(ev.target).closest('li');
-        if (li.length) {
-            var value = String(li.data('value'));
-            if (this.view.get('actual_mode') == 'view') {
+
+        this.priority.on('update', this, function(update) {
+            /* setting the value: in view mode, perform an asynchronous call and reload
+            the form view; in edit mode, use set_value to save the new value that will
+            be written when saving the record. */
+            var view = this.view;
+            if(view.get('actual_mode') === 'view') {
                 var write_values = {};
-                write_values[self.name] = value;
-                return this.view.dataset._model.call(
-                    'write', [
-                        [this.view.datarecord.id],
-                        write_values,
-                        self.view.dataset.get_context()
-                    ]).done(self.reload_record.bind(self));
-            }
-            else {
-                return this.set_value(value);
+                write_values[this.name] = update.value;
+                view.dataset._model.call('write', [
+                    [view.datarecord.id],
+                    write_values,
+                    view.dataset.get_context()
+                ]).done(function() {
+                    view.reload();
+                });
+            } else {
+                this.set_value(update.value);
             }
-        }
+        });
+
+        this.on('change:readonly', this, function() {
+            this.priority.readonly = this.get('readonly');
+            var $div = $('<div/>').insertAfter(this.$el);
+            this.priority.replace($div);
+            this.setElement(this.priority.$el);
+        });
 
+        var self = this;
+        return $.when(this._super(), this.priority.appendTo('<div>').then(function() {
+            self.priority.$el.addClass(self.$el.attr('class'));
+            self.replaceElement(self.priority.$el);
+        }));
     },
-    reload_record: function() {
-        this.view.reload();
+    render_value: function() {
+        this.priority.set_value(this.get('value'));
     },
 });
 
@@ -1611,7 +1606,7 @@ core.form_widget_registry
     .add('binary', FieldBinaryFile)
     .add('statusbar', FieldStatus)
     .add('monetary', FieldMonetary)
-    .add('priority', Priority)
+    .add('priority', FieldPriority)
     .add('kanban_state_selection', KanbanSelection)
     .add('statinfo', StatInfo)
     .add('timezone_mismatch', TimezoneMismatch)
diff --git a/addons/web/static/src/js/widgets/priority.js b/addons/web/static/src/js/widgets/priority.js
new file mode 100644
index 00000000000..fbe7b61bb43
--- /dev/null
+++ b/addons/web/static/src/js/widgets/priority.js
@@ -0,0 +1,82 @@
+odoo.define('web.Priority', function (require) {
+"use strict";
+
+var core = require('web.core');
+var Widget = require('web.Widget');
+
+var QWeb = core.qweb;
+var _t = core._t;
+
+var Priority = Widget.extend({
+    template: "Priority",
+    events: {
+        'mouseover > a': function(e) {
+            clearTimeout(this.hover_timer);
+
+            this.$stars.removeClass('fa-star-o').addClass('fa-star');
+            $(e.target).nextAll().removeClass('fa-star').addClass('fa-star-o');
+        },
+        'mouseout > a': function(e) {
+            clearTimeout(this.hover_timer);
+
+            var self = this;
+            this.hover_timer = setTimeout(function() {
+                self._render_value();
+            }, 200);
+        },
+        'click > a': function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            var old_value = this.value;
+            this.value = String($(e.target).data('value'));
+            if(old_value === this.value) {
+                this.value = this.empty_value;
+            }
+
+            this._render_value();
+            this.trigger('update', {value: this.value});
+        },
+    },
+    init: function(parent, options) {
+        this._super.apply(this, arguments);
+
+        options = _.defaults(options || {}, {
+            readonly: true,
+            value: 0,
+            values: [
+                [0, _t("Normal")],
+                [1, _t("Low")],
+                [2, _t("High")],
+                [3, _t("Very High")]
+            ],
+        });
+
+        this.readonly = options.readonly;
+        this.value = options.value;
+        this.values = options.values;
+        this.empty_value = this.values[0][0];
+    },
+    start: function() {
+        this._render_value();
+        return this._super();
+    },
+    set_value: function(value) {
+        this.value = value;
+        this._render_value();
+    },
+    _render_value: function() {
+        var current_value = this.value;
+        this.$stars = this.$('.o_priority_star');
+        this.$stars.each(function(i, el) {
+            var $star = $(el);
+            var star_value = $star.data('value');
+            $star.toggleClass('fa-star', (star_value <= current_value))
+                 .toggleClass('fa-star-o', (star_value > current_value));
+        });
+    },
+});
+
+return Priority;
+
+});
diff --git a/addons/web/static/src/less/enterprise_compatibility.less b/addons/web/static/src/less/enterprise_compatibility.less
index 2f7e2229308..5d084948ad7 100644
--- a/addons/web/static/src/less/enterprise_compatibility.less
+++ b/addons/web/static/src/less/enterprise_compatibility.less
@@ -115,17 +115,31 @@
     display: inline-block;
     padding: 0;
     margin: 0;
-    > a {
+    vertical-align: middle;
+    > .o_priority_star {
         display: inline-block;
-    }
-    .o_star_on, .o_star_off {
-        color: @odoo-main-color-muted !important;
-        &:hover {
+        font-size: 1.35em;
+        &:hover, &:focus {
             text-decoration: none;
+            outline: none;
+        }
+
+        + .o_priority_star {
+            padding-left: 5px;
+        }
+
+        &.fa-star-o {
+            color: @odoo-main-color-muted;
+        }
+        &.fa-star {
+            color: gold;
         }
     }
-    .o_star_on {
-        color: gold !important;
+}
+
+.oe_title {
+    .o_priority > .o_priority_star {
+        font-size: inherit;
     }
 }
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 42d2f0ae34e..bd15f4ca605 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -780,26 +780,10 @@
         </ul>
     </div>
 </t>
-<t t-name="FormPriority">
-    <ul style="list-style: none; padding-left: 2px; display: inline-block;">
-        <t t-foreach="widget.priorities" t-as="rec" >
-            <li t-att-data-value="rec.click_value" style="display: inline-block;">
-                <a t-if="!widget.get('readonly')" href="#" t-att-title="rec.name">
-                    <i t-att-class="widget.get('value') gte rec.value and 'fa fa-star oe_star_on' or 'fa fa-star oe_star_off'"/>
-                </a>
-                <span t-if="widget.get('readonly')" t-att-title="rec.name" t-att-class="widget.get('value') gte rec.value and 'oe_e oe_star_on' or 'oe_e oe_star_off'">7</span>
-            </li>
-        </t>
-    </ul>
-</t>
-<t t-name="Priority">
-    <div class="o_priority">
-        <t t-foreach="widget.priorities" t-as="rec" >
-            <a t-if="!widget.get('readonly')" href="#" t-att-data-value="rec.click_value" t-att-title="rec.name" t-att-class="widget.get('value') gte rec.value and 'fa fa-star o_star_on' or 'fa fa-star o_star_off'"/>
-            <span t-if="widget.get('readonly')" t-att-data-value="rec.click_value" t-att-title="rec.name" t-att-class="widget.get('value') gte rec.value and 'fa fa-star o_star_on' or 'fa fa-star o_star_off'"/>
-        </t>
-    </div>
-</t>
+<div t-name="Priority" class="o_priority">
+    <a t-if="!widget.readonly" t-foreach="widget.values.slice(1)" t-as="v" href="#" t-att-data-value="v[0]" t-att-title="v[1]" class="o_priority_star fa"/>
+    <span t-if="widget.readonly" t-foreach="widget.values.slice(1)" t-as="v" t-att-data-value="v[0]" t-att-title="v[1]" class="o_priority_star fa"/>
+</div>
 <t t-name="FieldEmail">
     <span class="oe_form_field oe_form_field_email" t-att-style="widget.node.attrs.style">
         <a t-if="widget.get('effective_readonly')" href="#" class="oe_form_uri" target="_blank"/>