Support yalign and use start/end for xalign

issue10770
review373611002

src/sao.less

@@ -636,9 +636,6 @@ img.icon {
     .form-many2one > .input-group {
         width: 100%;
     }
-    td.form-one2many, td.form-many2many {
-        vertical-align: top;
-    }
     .form-one2many-menu::after, .form-many2many-menu::after {
         content: "";
         display: table;

src/view/form.js

@@ -80,6 +80,14 @@ function eval_pyson(value){
                 widget.el.css('min-width', attributes.width + 'px');
             }
 
+            if (attributes.xalign === undefined) {
+                attributes.xalign = 0.5;
+            }
+
+            if (attributes.yalign === undefined) {
+                attributes.yalign = 0.5;
+            }
+
             this.container.add(widget, attributes);
 
             if (this._mnemonics[name] && widget.labelled) {
@@ -122,6 +130,18 @@ function eval_pyson(value){
             }
             var text = attributes.string;
             var separator = new Sao.View.Form.Separator(text, attributes);
+            if (text) {
+                var xalign = attributes.xalign;
+                if (xalign === undefined) {
+                    xalign = 0;
+                }
+                if (xalign == 0.5) {
+                    xalign = 'center';
+                } else {
+                    xalign = xalign <= 0.5? 'start' : 'end';
+                }
+                separator.label.css('text-align', xalign);
+            }
             this.view.state_widgets.push(separator);
             this.container.add(separator, attributes);
             if (name) {
@@ -140,6 +160,9 @@ function eval_pyson(value){
             if (attributes.xalign === undefined) {
                 attributes.xalign = 1.0;
             }
+            if (attributes.yalign === undefined) {
+                attributes.yalign = 0.5;
+            }
             var label = new Sao.View.Form.Label(attributes.string, attributes);
             this.view.state_widgets.push(label);
             this.container.add(label, attributes);
@@ -520,23 +543,15 @@ function eval_pyson(value){
             if (attributes.yexpand) {
                 cell.css('height', '100%');
             }
-            if (attributes.yfill) {
-                cell.css('vertical-align', 'top');
-            }
 
             if (attributes.xalign !== undefined) {
-                // TODO replace by start/end when supported
-                var align;
-                if (attributes.xalign != 0.5) {
-                    if (Sao.i18n.rtl) {
-                        align = attributes.xalign >= 0.5? 'left': 'right';
-                    } else {
-                        align = attributes.xalign >= 0.5? 'right': 'left';
-                    }
-                } else if (!xexpand) {
-                    align = 'center';
+                var xalign;
+                if (attributes.xalign == 0.5) {
+                    xalign = 'center';
+                } else {
+                    xalign = attributes.xalign <= 0.5? 'start': 'end';
                 }
-                cell.css('text-align', align);
+                cell.css('text-align', xalign);
             }
             if (xexpand) {
                 cell.addClass('xexpand');
@@ -549,6 +564,16 @@ function eval_pyson(value){
                 }
             }
 
+            if (attributes.yalign !== undefined) {
+                var yalign;
+                if (attributes.yalign == 0.5) {
+                    yalign = 'middle';
+                } else {
+                    yalign = attributes.yalign <= 0.5? 'top': 'bottom';
+                }
+                cell.css('vertical-align', yalign);
+            }
+
             if (attributes.help) {
                 widget.el.attr('title', attributes.help);
             }