[tryton-commits] changeset in sao:default Use horizontal form for Dict widget

[Cédric Krier]

changeset 2a43e5b36ed7 in sao:default
details: https://hg.tryton.org/sao?cmd=changeset;node=2a43e5b36ed7
description:
        Use horizontal form for Dict widget

        This allows to vertically align label and input.
        It reduces also the space for label and limit the size of checkbox.
        It align the search input with others and add a placeholder.

        issue7990
        review45881002
diffstat:

 src/sao.less     |   2 +-
 src/view/form.js |  19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diffs (65 lines):

diff -r 09174297aa7d -r 2a43e5b36ed7 src/sao.less
--- a/src/sao.less      Sun Feb 03 20:41:51 2019 +0100
+++ b/src/sao.less      Sun Feb 03 20:44:50 2019 +0100
@@ -428,7 +428,7 @@
     .center-block();
 }
 
-.form-boolean, .editabletree-boolean {
+.form-boolean, .dict-boolean, .editabletree-boolean {
     input[type=checkbox] {
         width: initial;
     }
diff -r 09174297aa7d -r 2a43e5b36ed7 src/view/form.js
--- a/src/view/form.js  Sun Feb 03 20:41:51 2019 +0100
+++ b/src/view/form.js  Sun Feb 03 20:44:50 2019 +0100
@@ -3996,7 +3996,7 @@
             label.attr('for', this.el.attr('id'));
 
             var body = jQuery('<div/>', {
-                'class': this.class_ + '-body panel-body'
+                'class': this.class_ + '-body panel-body form-horizontal'
             }).appendTo(this.el);
             this.container = jQuery('<div/>', {
                 'class': this.class_ + '-container'
@@ -4005,15 +4005,14 @@
             var group = jQuery('<div/>', {
                 'class': 'input-group input-group-sm'
             }).appendTo(jQuery('<div>', {
-                'class': 'col-md-12'
+                'class': 'col-sm-10 col-sm-offset-2'
             }).appendTo(jQuery('<div/>', {
-                'class': 'row'
-            }).appendTo(jQuery('<div/>', {
-                'class': 'container-fluid'
-            }).appendTo(body))));
+                'class': 'form-group'
+            }).appendTo(body)));
             this.wid_text = jQuery('<input/>', {
                 'type': 'text',
-                'class': 'form-control input-sm'
+                'class': 'form-control input-sm',
+                'placeholder': Sao.i18n.gettext('Search'),
             }).appendTo(group);
 
             // TODO completion
@@ -4131,16 +4130,16 @@
             this.fields[key] = field = new (
                 this.get_entries(key_schema.type_))(key, this);
             this.rows[key] = row = jQuery('<div/>', {
-                'class': 'row'
+                'class': 'form-group'
             });
             var text = key_schema.string + Sao.i18n.gettext(':');
             var label = jQuery('<label/>', {
                 'text': text
             }).appendTo(jQuery('<div/>', {
-                'class': 'dict-label col-md-4'
+                'class': 'dict-label col-sm-2 control-label'
             }).appendTo(row));
 
-            field.el.addClass('col-md-8').appendTo(row);
+            field.el.addClass('col-sm-10').appendTo(row);
 
             label.uniqueId();
             field.labelled.uniqueId();