Use toggle button and label on translate dialog

A toggle button with a label is easier to understand that it should be toggled
to edit.
It is cleaner to only display a fuzzy label than having a column of
checkboxes.

Closes #3125

sao/CHANGELOG

@@ -1,3 +1,4 @@
+* Use toggle button and label on translate dialog
 * Support border type of images
 * Manage domain on id in single value list as unique
 * Do not validate domain and enforce uniqueness for empty fields unless they're required

sao/src/sao.less

@@ -50,6 +50,14 @@ html[theme="default"] {
     z-index: 3;
 }
 
+.input-group-addon {
+    > .label {
+        position: absolute;
+        right: 0px;
+        top: -5px;
+    }
+}
+
 .navbar-inverse {
     .close {
         color: @navbar-inverse-link-color;

sao/src/view/form.js

@@ -1313,7 +1313,7 @@ function eval_pyson(value){
         class_: 'form',
         init: function(languages, widget) {
             var dialog = new Sao.Dialog(
-                Sao.i18n.gettext('Translate'), this.class_, 'lg');
+                Sao.i18n.gettext('Translate'), this.class_, 'md');
             this.languages = languages;
             this.read(widget, dialog);
             jQuery('<button/>', {
@@ -1350,24 +1350,23 @@ function eval_pyson(value){
             function field_value(result) {
                 return result[0][widget.field_name] || '';
             }
+            dialog.content.addClass('form-horizontal');
             this.languages.forEach(lang => {
                 var value;
                 var row = jQuery('<div/>', {
-                    'class':'row form-group'
+                    'class':'form-group'
                 });
                 var input = widget.translate_widget();
                 input.attr('data-lang-id', lang.id);
-                var checkbox = jQuery('<input/>', {
-                    'type':'checkbox',
-                    'title': Sao.i18n.gettext('Edit')
-                });
+                var edit = jQuery('<button/>', {
+                    'type': 'button',
+                    'class': 'btn btn-default',
+                }).text(Sao.i18n.gettext('Edit'));
                 if (widget._readonly) {
-                    checkbox.attr('disabled', true);
+                    edit.attr('disabled', true);
                 }
-                var fuzzy_box = jQuery('<input/>', {
-                    'type':'checkbox',
-                    'disabled': true,
-                    'title': Sao.i18n.gettext('Fuzzy')
+                var fuzzy_label = jQuery('<span>', {
+                    'class': 'label',
                 });
                 var prm1 = Sao.rpc({
                     'method': 'model.' + widget.model.name  + '.read',
@@ -1392,25 +1391,28 @@ function eval_pyson(value){
                 jQuery.when(prm1, prm2).done(function(value, fuzzy_value) {
                     widget.translate_widget_set(input, fuzzy_value);
                     widget.translate_widget_set_readonly( input, true);
-                    fuzzy_box.attr('checked', value !== fuzzy_value);
+                    if (value !== fuzzy_value) {
+                        fuzzy_label.addClass('label-warning');
+                        fuzzy_label.text(Sao.i18n.gettext("Fuzzy"));
+                    }
                 });
-                checkbox.click(function() {
+                edit.click(function() {
+                    jQuery(this).toggleClass('active');
                     widget.translate_widget_set_readonly(
-                        input, !jQuery(this).prop('checked'));
+                        input, !jQuery(this).hasClass('active'));
                 });
                 dialog.body.append(row);
+                input.uniqueId();
+                row.append(jQuery('<label/>', {
+                    'for': input.attr('id'),
+                    'class': 'col-sm-3 control-label',
+                }).append(' ' + lang.name));
                 row.append(jQuery('<div/>', {
-                    'class':'col-sm-2'
-                }).append(lang.name));
-                row.append(jQuery('<div/>', {
-                    'class':'col-sm-8'
-                }).append(input));
-                row.append(jQuery('<div/>', {
-                    'class':'col-sm-1'
-                }).append(checkbox));
-                row.append(jQuery('<div/>', {
-                    'class':'col-sm-1'
-                }).append(fuzzy_box));
+                    'class': 'col-sm-9 input-group',
+                }).append(input)
+                    .append(jQuery('<span/>', {
+                        'class': 'input-group-addon',
+                    }).append(edit).append(fuzzy_label)));
             });
         },
         write: function(widget, dialog) {
@@ -2297,10 +2299,12 @@ function eval_pyson(value){
             this.input.prop('readonly', readonly);
         },
         translate_widget: function() {
-            return jQuery('<textarea/>', {
+            var widget = jQuery('<textarea/>', {
                     'class': 'form-control',
-                    'readonly': 'readonly'
+                    'readonly': 'readonly',
                 });
+            widget.css('min-height', this.el.height());
+            return widget;
         }
     });
 

tryton/CHANGELOG

@@ -1,3 +1,4 @@
+* Use toggle button and label on translate dialog
 * Manage domain on id in single value list as unique
 * Do not validate domain and enforce uniqueness for empty fields unless they're required
 * Display the number of selected records on xxx2Many

tryton/tryton/client.py

@@ -30,6 +30,9 @@ def main():
     label.editable {
         font-style: italic;
     }
+    label.warning {
+        color: @warning_color;
+    }
     .window-title, .wizard-title {
         font-size: large;
         font-weight: bold;

tryton/tryton/gui/window/view_form/view/form_gtk/widget.py

@@ -204,17 +204,15 @@ class TranslateDialog(NoModal):
             widget.set_vexpand(self.widget.expand)
             widget.set_hexpand(True)
             grid.attach(widget, 1, i, 1, 1)
-            editing = Gtk.CheckButton()
+            editing = Gtk.ToggleButton(label=_("Edit"))
             editing.connect('toggled', self.editing_toggled, widget)
             editing.props.sensitive = not readonly
-            tooltips.set_tip(editing, _('Edit'))
             grid.attach(editing, 2, i, 1, 1)
-            fuzzy = Gtk.CheckButton()
-            fuzzy.set_active(value != fuzzy_value)
-            fuzzy.props.sensitive = False
-            tooltips.set_tip(fuzzy, _('Fuzzy'))
-            grid.attach(fuzzy, 4, i, 1, 1)
-            self.widgets[language['code']] = (widget, editing, fuzzy)
+            if value != fuzzy_value:
+                fuzzy = Gtk.Label(_("Fuzzy"))
+                widget_class(fuzzy, 'warning', True)
+                grid.attach(fuzzy, 4, i, 1, 1)
+            self.widgets[language['code']] = (widget, editing)
 
         tooltips.enable()
         vbox = Gtk.VBox()
@@ -241,7 +239,7 @@ class TranslateDialog(NoModal):
     def response(self, win, response):
         if response == Gtk.ResponseType.OK:
             for code, widget in self.widgets.items():
-                widget, editing, fuzzy = widget
+                widget, editing = widget
                 if not editing.get_active():
                     continue
                 value = self.widget.translate_widget_get(widget)