[IMP] web: improve tooltip for priority widget's star icons

Prior to this commit, when we hover on any star icon (from a priority
widget field), we only get the label of a selection value linked with
particular icon. For example, if a 'Priority field is having a selection
values 'Low' and 'High', on hover of the start, we see 'Low' and 'High'
(in the same sequence as selection values).

But sometimes (for example in kanban view, where we don't display the
field label), it is not very clear what they indicate.

This commit improves the behavior by adding a field label also in the
title attribute of the star icons so that users can get a better
understanding of what each selection means. In our example, it will
now display the tooltip as 'Priority: Low' and 'Priority: High'.

Task-2691338

closes odoo/odoo#80213

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
Mitul Shah
2021-12-14 09:11:19 +00:00
committed by Thibault Delavallée
parent a66cdf3f7f
commit c7fd509f9c
2 changed files with 28 additions and 1 deletions
@@ -2555,7 +2555,7 @@ var PriorityWidget = AbstractField.extend({
const isReadonly = this.record.evalModifiers(this.attrs.modifiers).readonly;
_.each(this.field.selection.slice(1), function (choice, index) {
const tag = isReadonly ? '<span>' : '<a href="#">';
self.$el.append(self._renderStar(tag, index_value >= index + 1, index + 1, choice[1], index_value));
self.$el.append(self._renderStar(tag, index_value >= index + 1, index + 1, `${self.string}: ${choice[1]}`, index_value));
});
},
@@ -6409,6 +6409,33 @@ QUnit.module('basic_fields', {
form.destroy();
});
QUnit.test('priority widget tooltip', async function (assert) {
assert.expect(2);
const form = await createView({
View: FormView,
model: 'partner',
data: this.data,
arch: `<form string="Partners">
<sheet>
<group>
<field name="selection" widget="priority"/>
</group>
</sheet>
</form>`,
res_id: 1,
});
// check title attribute (for basic html tooltip on all the stars)
const $stars = form.$('.o_field_widget.o_priority').find('a.o_priority_star');
assert.strictEqual($stars[0].title, 'Selection: Blocked',
"Should set field label and correct selection label as title attribute (tooltip)");
assert.strictEqual($stars[1].title, 'Selection: Done',
"Should set field label and correct selection label as title attribute (tooltip)");
form.destroy();
});
QUnit.test('priority widget in form view', async function (assert) {
assert.expect(22);