[FIX] web: add translate button for char and text fields

The button allowing the user to translate fields (existing in
previous versions) was not present.

addons/web/static/src/js/fields/basic_fields.js

@@ -26,6 +26,47 @@ var view_dialogs = require('web.view_dialogs');
 var qweb = core.qweb;
 var _t = core._t;
 
+var TranslatableFieldMixin = {
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @returns {jQuery}
+     */
+    _renderTranslateButton: function () {
+        if (_t.database.multi_lang && this.field.translate && this.res_id) {
+            return $('<button>', {
+                    type: 'button',
+                    'class': 'o_field_translate fa fa-globe btn btn-link',
+                })
+                .on('click', this._onTranslate.bind(this));
+        }
+        return $();
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * open the translation view for the current field
+     *
+     * @private
+     */
+    _onTranslate: function () {
+        this._rpc({
+            route: '/web/dataset/call_button',
+            params: {
+                model: 'ir.translation',
+                method: 'translate_fields',
+                args: [this.model, this.res_id, this.name, this.record.getContext()],
+            }
+        }).then(this.do_action.bind(this));
+    },
+};
+
 var DebouncedField = AbstractField.extend({
     events: _.extend({}, AbstractField.prototype.events, {
         'input': '_onInput',
@@ -260,10 +301,26 @@ var InputField = DebouncedField.extend({
     },
 });
 
-var FieldChar = InputField.extend({
+var FieldChar = InputField.extend(TranslatableFieldMixin, {
     className: 'o_field_char',
     tagName: 'span',
     supportedFieldTypes: ['char'],
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Add translation button
+     *
+     * @override
+     * @private
+     */
+    _renderEdit: function () {
+        var def = this._super.apply(this, arguments);
+        this.$el = this.$el.add(this._renderTranslateButton());
+        return def;
+    },
 });
 
 var FieldDate = InputField.extend({
@@ -722,7 +779,7 @@ var FieldFloatTime = FieldFloat.extend({
     },
 });
 
-var FieldText = DebouncedField.extend({
+var FieldText = DebouncedField.extend(TranslatableFieldMixin, {
     className: 'o_field_text',
     supportedFieldTypes: ['text'],
 
@@ -749,6 +806,8 @@ var FieldText = DebouncedField.extend({
                 this.$textarea.attr('placeholder', this.attrs.placeholder);
             }
             dom.autoresize(this.$textarea, {parent: this});
+
+            this.$el = this.$el.add(this._renderTranslateButton());
         }
 
         return this._super();

addons/web/static/src/less/form_view.less

@@ -386,19 +386,12 @@
     // Translate icon
     .o_field_translate {
         padding: 0;
-        display: none;
         cursor: pointer;
-        width: 12px;
+        width: 12px !important;
         vertical-align: top;
         &::before { // seems to be useful for some old browser
             position: relative;
         }
-        &.o_translate_active {
-            display: inline-block;
-        }
-    }
-    .o_field_widget.o_invisible_modifier + .o_field_translate {
-        display: none;
     }
 
     // Text field with oe_inline class

addons/web/static/tests/fields/basic_fields_tests.js

@@ -2,6 +2,7 @@ odoo.define('web.basic_fields_tests', function (require) {
 "use strict";
 
 var concurrency = require('web.concurrency');
+var core = require('web.core');
 var FormView = require('web.FormView');
 var KanbanView = require('web.KanbanView');
 var ListView = require('web.ListView');
@@ -9,6 +10,7 @@ var session = require('web.session');
 var testUtils = require('web.test_utils');
 
 var createView = testUtils.createView;
+var _t = core._t;
 
 QUnit.module('fields', {}, function () {
 
@@ -22,6 +24,7 @@ QUnit.module('basic_fields', {
                     display_name: {string: "Displayed name", type: "char", searchable: true},
                     foo: {string: "Foo", type: "char", default: "My little Foo Value", searchable: true},
                     bar: {string: "Bar", type: "boolean", default: true, searchable: true},
+                    txt: {string: "txt", type: "text", default: "My little txt Value\nHo-ho-hoooo Merry Christmas"},
                     int_field: {string: "int_field", type: "integer", sortable: true, searchable: true},
                     qux: {string: "Qux", type: "float", digits: [16,1], searchable: true},
                     p: {string: "one2many field", type: "one2many", relation: 'partner', searchable: true},
@@ -619,6 +622,59 @@ QUnit.module('basic_fields', {
         list.destroy();
     });
 
+    QUnit.test('char field translatable', function (assert) {
+        assert.expect(3);
+
+        this.data.partner.fields.foo.translate = true;
+
+        var multi_lang = _t.database.multi_lang;
+        _t.database.multi_lang = true;
+
+        var form = createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form string="Partners">' +
+                    '<sheet>' +
+                        '<group>' +
+                            '<field name="foo"/>' +
+                        '</group>' +
+                    '</sheet>' +
+                '</form>',
+            res_id: 1,
+            mockRPC: function (route, args) {
+                if (route === "/web/dataset/call_button" && args.method === 'translate_fields') {
+                    assert.deepEqual(args.args, ["partner",1,"foo",{}], 'should call "call_button" route');
+                    return $.when();
+                }
+                return this._super.apply(this, arguments);
+            },
+        });
+        form.$buttons.find('.o_form_button_edit').click();
+        var $button = form.$('input[type="text"].o_field_char + .o_field_translate');
+        assert.strictEqual($button.length, 1, "should have a translate button");
+        $button.click();
+        form.destroy();
+
+        form = createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form string="Partners">' +
+                    '<sheet>' +
+                        '<group>' +
+                            '<field name="foo"/>' +
+                        '</group>' +
+                    '</sheet>' +
+                '</form>',
+        });
+        $button = form.$('input[type="text"].o_field_char + .o_field_translate');
+        assert.strictEqual($button.length, 0, "should not have a translate button in create mode");
+        form.destroy();
+
+        _t.database.multi_lang = multi_lang;
+    });
+
 
     QUnit.module('UrlWidget');
 
@@ -779,6 +835,59 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
+    QUnit.test('text field translatable', function (assert) {
+        assert.expect(3);
+
+        this.data.partner.fields.txt.translate = true;
+
+        var multi_lang = _t.database.multi_lang;
+        _t.database.multi_lang = true;
+
+        var form = createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form string="Partners">' +
+                    '<sheet>' +
+                        '<group>' +
+                            '<field name="txt"/>' +
+                        '</group>' +
+                    '</sheet>' +
+                '</form>',
+            res_id: 1,
+            mockRPC: function (route, args) {
+                if (route === "/web/dataset/call_button" && args.method === 'translate_fields') {
+                    assert.deepEqual(args.args, ["partner",1,"txt",{}], 'should call "call_button" route');
+                    return $.when();
+                }
+                return this._super.apply(this, arguments);
+            },
+        });
+        form.$buttons.find('.o_form_button_edit').click();
+        var $button = form.$('textarea + .o_field_translate');
+        assert.strictEqual($button.length, 1, "should have a translate button");
+        $button.click();
+        form.destroy();
+
+        form = createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form string="Partners">' +
+                    '<sheet>' +
+                        '<group>' +
+                            '<field name="txt"/>' +
+                        '</group>' +
+                    '</sheet>' +
+                '</form>',
+        });
+        $button = form.$('textarea + .o_field_translate');
+        assert.strictEqual($button.length, 0, "should not have a translate button in create mode");
+        form.destroy();
+
+        _t.database.multi_lang = multi_lang;
+    });
+
     QUnit.module('FieldBinary');
 
     QUnit.test('binary fields are correctly rendered', function (assert) {