Merge lp:~camptocamp/web-addons/7.0-web_translate_dialog_page into lp:~webaddons-core-editors/web-addons/7.0

[Guewen Baconnier @ Camptocamp]

[ADD] web_translate_dialog: replace the translation view by a translation dialog like in OpenERP 6.1

Hello,

Here is a replacement for the translations, restoring a dialog more or less like the 6.1 one.
It also support the HTML fields.

[Pedro Manuel Baeza (pedro.baeza)]

Guewen, what a great addition! I don't know why OpenERP changes this behaviour to an ugly one, but here it's again the community to fix it!

I have extensively tested the module and it seems to work perfectly (large texts, multiple translatable fields, three or more languages, etc). The only problem I have found is that when the height of the popup is higher than the screen height, it's not possible to make click on scrollbars. You can only scroll with the mouse scroll wheel. Is there any possibility to fix this? BTW, excelent job.

Another thing you can do is to include translation template file.

Regards.

review: Needs Fixing (code review and test)

[lp:~camptocamp/web-addons/7.0-web_translate_dialog_page]

28. By Guewen Baconnier @ Camptocamp on 2013-12-09

[FIX] display title

29. By Guewen Baconnier @ Camptocamp on 2013-12-09

[ADD] pot file

[Guewen Baconnier @ Camptocamp (gbaconnier-c2c)]

Thanks for the test and review.

Regarding the scrollbar, it happens only on Chrome, and not on Firefox. I have to admit that I have no idea how to fix that.

I included the .pot file, but the only term that should be translated ('Translations') does not appear in the file.

Does anyone have an idea for theses 2 issues?

[Joël Grand-Guillaume @ camptocamp (jgrandguillaume-c2c)]

Hi,

Unfortunately, I do not have any idea about those 2 troubles. I've tested the solution and it really works like a charm. I had the same trouble than Pedro reported on Chrome, but no idea why... Though the mouse wheel does the trick, so I see no reason to block that MP.

That's why I'm approving it.

review: Approve (code review, no tests)

[Pedro Manuel Baeza (pedro.baeza)]

I have manually extracted translatable strings and make an MP with the corresponding files: https://code.launchpad.net/~pedro.baeza/web-addons/7.0-web_translate_dialog_imp/+merge/199304. Please check it.

There's is another last thing that it would be desirable to have to complete i18n: languages appear in english and in the native language, but not in the interface language. This can be for the context passed to the method that retrieves res.lang, but I have tried to change it and I got lost on JS code. Can you please see if you can improve this?

Thank you.

Regards.

review: Needs Fixing

[lp:~camptocamp/web-addons/7.0-web_translate_dialog_page]

30. By Pedro Manuel Baeza on 2013-12-18

[IMP] Translations files

31. By Guewen Baconnier @ Camptocamp on 2013-12-18

[ADD] fr translation

[Guewen Baconnier @ Camptocamp (gbaconnier-c2c)]

> I have manually extracted translatable strings and make an MP with the
> corresponding files: https://code.launchpad.net/~pedro.baeza/web-
> addons/7.0-web_translate_dialog_imp/+merge/199304. Please check it.
>

Thanks for the translation files, that's great. I added the french translation as well.

> There's is another last thing that it would be desirable to have to complete
> i18n: languages appear in english and in the native language, but not in the
> interface language. This can be for the context passed to the method that
> retrieves res.lang, but I have tried to change it and I got lost on JS code.
> Can you please see if you can improve this?

What do you mean by interface language?
Actually, it displays all the languages having the "translatable" boolean to True.

[Pedro Manuel Baeza (pedro.baeza)]

I mean that in my interface (spanish) it appears:

English , Spanish/Español, French/Français, German/Deutsch ...

That it's to say: Language in english/Language in native language, where it should be:

Inglés/English, Español, Francés,/Français, Alemán/Deutsch ...

Do you understand me now?

Regards.

[Guewen Baconnier @ Camptocamp (gbaconnier-c2c)]

> I mean that in my interface (spanish) it appears:
>
> English , Spanish/Español, French/Français, German/Deutsch ...
>
> That it's to say: Language in english/Language in native language, where it
> should be:
>
> Inglés/English, Español, Francés,/Français, Alemán/Deutsch ...
>
> Do you understand me now?
>
> Regards.

Oh yes I got you, thanks for the precision. I first understood that a language *column* was missing ;-)
I will check that.

[Holger Brunn (Therp) (hbrunn)]

small nits:

#368, #370: trad* seem to be frenchisms to me, maybe change that to 'translation'?

review: Approve (code review)

[lp:~camptocamp/web-addons/7.0-web_translate_dialog_page]

32. By Guewen Baconnier @ Camptocamp on 2014-02-25

merge from main

[Guewen Baconnier @ Camptocamp (gbaconnier-c2c)]

> I mean that in my interface (spanish) it appears:
>
> English , Spanish/Español, French/Français, German/Deutsch ...
>
> That it's to say: Language in english/Language in native language, where it
> should be:
>
> Inglés/English, Español, Francés,/Français, Alemán/Deutsch ...
>
> Do you understand me now?
>
> Regards.

I checked this remark that I kept overdue for too long time.
In fact this has nothing to do with the translations.
The name on the top of the column is `res_lang.name` that is *not* a translatable field. I think that's why OpenERP put things like Spanish/Español. This is an issue that is global to OpenERP and I won't fix it there.

In my case I renamed the languages to appear only in the language's language (English / Français / Deutsch).

Can you review again so we can move forward with this proposal? Thanks

[lp:~camptocamp/web-addons/7.0-web_translate_dialog_page]

33. By Guewen Baconnier @ Camptocamp on 2014-02-25

Rename the frenchisms 'word' trads to translation

[Guewen Baconnier @ Camptocamp (gbaconnier-c2c)]

> small nits:
>
> #368, #370: trad* seem to be frenchisms to me, maybe change that to
> 'translation'?

For sure. That's done.

[Guewen Baconnier @ Camptocamp (gbaconnier-c2c)]

Pedro, you still have a Needs Fixing vote. Can you review again please?

[Pedro Manuel Baeza (pedro.baeza)]

Sorry, you have my approval, because there's nothing we can do with language names as you have remarked.

I'm going to proceed with the merge.

Thanks again for this contribution.

Regards.

review: Approve (code review and test)

=== added directory 'web_translate_dialog'
=== added file 'web_translate_dialog/__init__.py'
--- web_translate_dialog/__init__.py	1970-01-01 00:00:00 +0000
+++ web_translate_dialog/__init__.py	2014-02-25 14:30:24 +0000
@@ -0,0 +1,1 @@
+# -*- coding: utf-8 -*-

=== added file 'web_translate_dialog/__openerp__.py'
--- web_translate_dialog/__openerp__.py	1970-01-01 00:00:00 +0000
+++ web_translate_dialog/__openerp__.py	2014-02-25 14:30:24 +0000
@@ -0,0 +1,44 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#
+#    Author: Guewen Baconnier
+#    Copyright 2012 Camptocamp SA
+#
+#    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": "Web Translate Dialog",
+ "category": "Hidden",
+ "description": """
+Replace the standard translation view by an alternative one:
+
+ * Add a "Translate" button item in the "More" menu
+ * The translations are displayed in a dialog (much like the OpenERP
+   6.1's one)
+ * Support HTML fields
+ * Autosize the textareas to the size of the content
+
+""",
+ "version": "1.0",
+ "depends": ['web',
+             ],
+ 'js': ['static/src/js/web_translate_dialog.js',
+        ],
+ 'css': ['static/src/css/base.css',
+         ],
+ 'qweb': ["static/src/xml/base.xml",
+          ],
+ 'auto_install': False,
+ }

=== added directory 'web_translate_dialog/i18n'
=== added file 'web_translate_dialog/i18n/es.po'
--- web_translate_dialog/i18n/es.po	1970-01-01 00:00:00 +0000
+++ web_translate_dialog/i18n/es.po	2014-02-25 14:30:24 +0000
@@ -0,0 +1,36 @@
+# Translation of OpenERP Server.
+# This file contains the translation of the following modules:
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: OpenERP Server 7.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2013-12-09 07:15+0000\n"
+"PO-Revision-Date: 2013-12-13 14:09+0100\n"
+"Last-Translator: Pedro Manuel Baeza <[e-mail]>\n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: \n"
+
+#. module: web_translate_dialog
+#. openerp-web
+#: code:addons/web_translate_dialog/static/src/js/web_translate_dialog.js:15
+#, python-format
+msgid "Translate"
+msgstr "Traducir"
+
+#. module: web_translate_dialog
+#. openerp-web
+#: code:addons/web_translate_dialog/static/src/js/web_translate_dialog.js:37
+#, python-format
+msgid "Translations"
+msgstr "Traducciones"
+
+#. module: web_translate_dialog
+#. openerp-web
+#: code:addons/web_translate_dialog/static/src/xml/base.xml:7
+#, python-format
+msgid "Field"
+msgstr "Campo"

=== added file 'web_translate_dialog/i18n/fr.po'
--- web_translate_dialog/i18n/fr.po	1970-01-01 00:00:00 +0000
+++ web_translate_dialog/i18n/fr.po	2014-02-25 14:30:24 +0000
@@ -0,0 +1,36 @@
+# Translation of OpenERP Server.
+# This file contains the translation of the following modules:
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: OpenERP Server 7.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2013-12-09 07:15+0000\n"
+"PO-Revision-Date: 2013-12-18 09:41+0100\n"
+"Last-Translator: Guewen Baconnier <[e-mail]>\n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: \n"
+
+#. module: web_translate_dialog
+#. openerp-web
+#: code:addons/web_translate_dialog/static/src/js/web_translate_dialog.js:15
+#, python-format
+msgid "Translate"
+msgstr "Traduire"
+
+#. module: web_translate_dialog
+#. openerp-web
+#: code:addons/web_translate_dialog/static/src/js/web_translate_dialog.js:37
+#, python-format
+msgid "Translations"
+msgstr "Traductions"
+
+#. module: web_translate_dialog
+#. openerp-web
+#: code:addons/web_translate_dialog/static/src/xml/base.xml:7
+#, python-format
+msgid "Field"
+msgstr "Champ"

=== added file 'web_translate_dialog/i18n/web_translate_dialog.pot'
--- web_translate_dialog/i18n/web_translate_dialog.pot	1970-01-01 00:00:00 +0000
+++ web_translate_dialog/i18n/web_translate_dialog.pot	2014-02-25 14:30:24 +0000
@@ -0,0 +1,36 @@
+# Translation of OpenERP Server.
+# This file contains the translation of the following modules:
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: OpenERP Server 7.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2013-12-09 07:15+0000\n"
+"PO-Revision-Date: 2013-12-09 07:15+0000\n"
+"Last-Translator: <>\n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. module: web_translate_dialog
+#. openerp-web
+#: code:addons/web_translate_dialog/static/src/js/web_translate_dialog.js:15
+#, python-format
+msgid "Translate"
+msgstr ""
+
+#. module: web_translate_dialog
+#. openerp-web
+#: code:addons/web_translate_dialog/static/src/js/web_translate_dialog.js:37
+#, python-format
+msgid "Translations"
+msgstr ""
+
+#. module: web_translate_dialog
+#. openerp-web
+#: code:addons/web_translate_dialog/static/src/xml/base.xml:7
+#, python-format
+msgid "Field"
+msgstr ""

=== added directory 'web_translate_dialog/static'
=== added directory 'web_translate_dialog/static/src'
=== added directory 'web_translate_dialog/static/src/css'
=== added file 'web_translate_dialog/static/src/css/base.css'
--- web_translate_dialog/static/src/css/base.css	1970-01-01 00:00:00 +0000
+++ web_translate_dialog/static/src/css/base.css	2014-02-25 14:30:24 +0000
@@ -0,0 +1,6 @@
+.openerp .oe_translation_field {
+  width: 95%;
+}
+.openerp .oe_translation_field.touched {
+  border: 1px solid green !important;
+}

=== added directory 'web_translate_dialog/static/src/js'
=== added file 'web_translate_dialog/static/src/js/web_translate_dialog.js'
--- web_translate_dialog/static/src/js/web_translate_dialog.js	1970-01-01 00:00:00 +0000
+++ web_translate_dialog/static/src/js/web_translate_dialog.js	2014-02-25 14:30:24 +0000
@@ -0,0 +1,211 @@
+openerp.web_translate_dialog = function (instance) {
+
+    "use strict";
+
+    var QWeb = instance.web.qweb,
+        _t  = instance.web._t,
+        _lt = instance.web._lt;
+
+    instance.web.FormView.include({
+        load_form: function(data) {
+            var self = this;
+            this._super(data);
+            if (this.sidebar) {
+                this.sidebar.add_items('other', _.compact([
+                    self.is_action_enabled('edit') && { label: _t('Translate'), callback: self.on_button_translate },
+                ]));
+            }
+        },
+        on_button_translate: function() {
+            var self = this;
+            $.when(this.has_been_loaded).then(function() {
+                self.open_translate_dialog(this);
+            });
+        },
+    });
+
+    instance.web.View.include({
+        open_translate_dialog: function() {
+            new instance.web_translate_dialog.TranslateDialog(this).open();
+        }
+    });
+
+    instance.web_translate_dialog.TranslateDialog = instance.web.Dialog.extend({
+        template: "TranslateDialog",
+        init: function(parent, options, content) {
+            this._super(parent,
+                        {title: _t("Translations"),
+                         width: '90%',
+                         height: '80%'},
+                        content);
+            this.view_language = this.session.user_context.lang;
+            this.view = parent;
+            this.view_type = parent.fields_view.type || '';
+            this.$view_form = null;
+            this.$sidebar_form = null;
+            this.translatable_fields_keys = _.map(this.view.translatable_fields || [], function(i) { return i.name;});
+            this.languages = null;
+            this.languages_loaded = $.Deferred();
+            (new instance.web.DataSetSearch(this,
+                                            'res.lang',
+                                            this.view.dataset.get_context(),
+                                            [['translatable', '=', '1']]))
+                .read_slice(['code', 'name'], { sort: 'id' })
+                .then(this.on_languages_loaded);
+        },
+        on_languages_loaded: function(langs) {
+            this.languages = langs;
+            this.languages_loaded.resolve();
+        },
+        open: function() {
+            var self = this,
+                sup = this._super;
+            // the template needs the languages
+            $.when(this.languages_loaded).then(function() {
+                return sup.call(self);
+            });
+        },
+        start: function() {
+            var self = this;
+            this.$el.find('.oe_translation_field').change(function() {
+                $(this).toggleClass('touched', ($(this).val() != $(this).attr('data-value')));
+            });
+            this.$buttons.html(QWeb.render("TranslateDialog.buttons"));
+            this.$buttons.find(".oe_form_translate_dialog_save_button").click(function(){
+                self.on_button_save();
+                self.on_button_close();
+            });
+            this.$buttons.find(".oe_form_translate_dialog_cancel_button").click(function(){
+                self.on_button_close();
+            });
+            this.initialize_html_fields();
+
+            this.do_load_fields_values();
+        },
+        initialize_html_fields: function() {
+            this.$el.find('.oe_form_field_html textarea').each(function() {
+                var $textarea = $(this);
+                var width = 100;  // forced to fixed size on initialization
+                                  // will be changed to percentage right after
+                                  // the creation
+                var height = 250;
+                $textarea.cleditor({
+                    width:      width, // width not including margins, borders or padding
+                    height:     height, // height not including margins, borders or padding
+                    controls:   // controls to add to the toolbar
+                                "bold italic underline strikethrough " +
+                                "| removeformat | bullets numbering | outdent " +
+                                "indent | link unlink | source",
+                    bodyStyle:  // style to assign to document body contained within the editor
+                                "margin:4px; color:#4c4c4c; font-size:13px; font-family:'Lucida Grande',Helvetica,Verdana,Arial,sans-serif; cursor:text"
+                });
+
+                var $cleditor = $textarea.cleditor()[0];
+                // Down to -- end, this is a workaround for the bug
+                // https://bugs.launchpad.net/openerp-web/+bug/1258463
+                // The editor is initially created with a fixed size so
+                // the buggy event is not bound to $(window), then we restore
+                // a percentage width and bind the "normal" event without the
+                // CHM's buggy change.
+                $cleditor.$main.width('95%');
+                $cleditor.options.width = '95%';
+                $(window).resize(function() {
+                    //Forcefully blurred iframe contentWindow, chrome, IE, safari doesn't trigger blur on window resize and due to which text disappears
+                    var contentWindow = $cleditor.$frame[0].contentWindow;
+                    if(!$.browser.mozilla && contentWindow){
+                        $(contentWindow).trigger('blur');
+                    }
+                });
+                $cleditor.refresh();
+                // -- end
+
+                $cleditor.change(function() {
+                    this.updateTextArea();
+                    this.$area.toggleClass('touched',
+                                        (this.$area.val() != this.$area.attr('data-value')));
+                });
+            });
+        },
+        // use a `read_translations` method instead of a `read`
+        // this latter leave the fields empty if there is no
+        // translation for a field instead of taking the src field
+        do_load_fields_values: function(callback) {
+            var self = this,
+                deferred = [];
+
+            this.$el.find('.oe_translation_field').val('').removeClass('touched');
+            _.each(self.languages, function(lg) {
+                var deff = $.Deferred();
+                deferred.push(deff);
+                var callback = function(values) {
+                };
+                self.view.dataset.call(
+                    'read',
+                    [[self.view.datarecord.id],
+                     self.translatable_fields_keys,
+                     self.view.dataset.get_context({
+                        'lang': lg.code
+                     })]).done(function (values) {
+                        _.each(self.translatable_fields_keys, function(f) {
+                            self.$el.find('.oe_translation_field[name="' + lg.code + '-' + f + '"]')
+                                .val(values[0][f] || '')
+                                .attr('data-value', values[0][f] || '');
+
+                            var $tarea = self.$el.find('.oe_form_field_html .oe_translation_field[name="' + lg.code + '-' + f + '"]');
+                            if ($tarea.length) {
+                                $tarea.cleditor()[0].updateFrame();
+                            }
+                        });
+                        var $textarea = self.$el.find('textarea.oe_translation_field');
+                        $textarea.css({minHeight:'100px'});
+                        $textarea.autosize();
+                        $(window).resize();  // triggers the autosize
+                        deff.resolve();
+                     });
+            });
+            return deferred;
+        },
+        on_button_save: function() {
+            var translations = {},
+                self = this,
+                translation_mutex = new $.Mutex();
+            self.$el.find('.oe_translation_field.touched').each(function() {
+                var field = $(this).attr('name').split('-');
+                if (!translations[field[0]]) {
+                    translations[field[0]] = {};
+                }
+                translations[field[0]][field[1]] = $(this).val();
+            });
+            _.each(translations, function(data, code) {
+                if (code === self.view_language) {
+                    _.each(data, function(value, field) {
+                        var view_field = self.view.fields[field];
+                        var is_dirty = view_field.view.$el.hasClass('oe_form_dirty');
+                        // update the field on the view
+                        view_field.set_value(value);
+                        if ( !is_dirty ) {
+                            // Avoid to set the view dirty when not necessary:
+                            // values have already been saved.
+                            view_field.view.$el.removeClass('oe_form_dirty');
+                        }
+                    });
+                }
+                translation_mutex.exec(function() {
+                    return new instance.web.DataSet(self, self.view.dataset.model, self.view.dataset.get_context()).write(self.view.datarecord.id, data, { context : { 'lang': code }});
+                });
+            });
+            this.close();
+        },
+        on_button_close: function() {
+            this.close();
+        },
+
+    });
+
+    instance.web.form.AbstractField.include({
+        on_translate: function() {
+            // the image next to the fields opens the translate dialog
+            this.view.open_translate_dialog();
+        },
+    });
+};

=== added directory 'web_translate_dialog/static/src/xml'
=== added file 'web_translate_dialog/static/src/xml/base.xml'
--- web_translate_dialog/static/src/xml/base.xml	1970-01-01 00:00:00 +0000
+++ web_translate_dialog/static/src/xml/base.xml	2014-02-25 14:30:24 +0000
@@ -0,0 +1,34 @@
+<templates>
+
+    <t t-name="TranslateDialog">
+        <table t-if="widget.view.translatable_fields" class="oe_frame oe_forms oe_translation_form" border="0" cellpadding="0" cellspacing="0" width="100%">
+        <tr>
+            <td class="oe_form_separator" width="1%" nowrap="nowrap">
+                <div class="separator horizontal">Field</div>
+            </td>
+            <th t-foreach="widget.languages" align="left">
+                <div class="separator horizontal"><t t-esc="name"/></div>
+            </th>
+        </tr>
+        <tr t-foreach="widget.view.translatable_fields" t-as="field" t-att-data-field="field.name">
+            <td class="oe_form_frame_cell" width="1%" nowrap="nowrap">
+                <label class="oe_label"><t t-esc="field.string"/>:</label>
+            </td>
+            <td t-foreach="widget.languages" t-as="lg" class="oe_form_frame_cell">
+                <input t-if="field.field.type == 'char' || field.field.type == 'url'" type="text" t-attf-name="#{lg.code}-#{field.name}" value="" data-value="" class="oe_translation_field"/>
+                <textarea t-if="field.field.type == 'text'" t-attf-name="#{lg.code}-#{field.name}" data-value="" class="oe_translation_field" ></textarea>
+                <div t-if="field.field.type == 'html'" class="oe_form_field_html">
+                    <textarea class="oe_translation_field oe_form_field" t-attf-name="#{lg.code}-#{field.name}" data-value=""/>
+                </div>
+            </td>
+        </tr>
+        </table>
+    </t>
+
+    <t t-name="TranslateDialog.buttons">
+        <button class="oe_form_translate_dialog_save_button oe_button oe_highlight">Save</button>
+        <button class="oe_form_translate_dialog_cancel_button oe_button">Cancel</button>
+    </t>
+
+</templates>
+