From 730132a931f0e90eb7d66c7c216e88b0f2bca2c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Tue, 14 May 2024 19:44:39 +0200
Subject: [PATCH] Put textarea and richtext under an input-group

If the widget is translatable, the translate button is an input-group-btn
which must be under the same input-group as the principal input.

Closes #13238
(grafted from 20af97ade53035f1c725cb2600e9abbb2664f664)

--HG--
branch : 7.0
---
 sao/src/sao.less     |  2 +-
 sao/src/view/form.js | 22 ++++++++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/sao/src/sao.less b/sao/src/sao.less
index 8139510f67..a01ee296fb 100644
--- a/sao/src/sao.less
+++ b/sao/src/sao.less
@@ -724,7 +724,7 @@ img.icon {
         }
     }
     .form-text, .form-richtext {
-        > textarea, .richtext {
+        textarea, .richtext {
             height: 100%;
             line-height: 2.5ex;
             min-height: 12.5ex;
diff --git a/sao/src/view/form.js b/sao/src/view/form.js
index d7eef85b2a..8a52ca8d1d 100644
--- a/sao/src/view/form.js
+++ b/sao/src/view/form.js
@@ -2272,10 +2272,13 @@ function eval_pyson(value){
             this.el = jQuery('<div/>', {
                 'class': this.class_
             });
+            this.group = jQuery('<div/>', {
+                'class': 'input-group',
+            }).appendTo(this.el);
             this.input = this.labelled = jQuery('<textarea/>', {
                 'class': 'form-control input-sm mousetrap',
                 'name': attributes.name,
-            }).appendTo(this.el);
+            }).appendTo(this.group);
             this.input.change(this.focus_out.bind(this));
             this.input.on('keydown', this.send_modified.bind(this));
             if (this.attributes.translate) {
@@ -2286,7 +2289,7 @@ function eval_pyson(value){
                     'title': Sao.i18n.gettext("Translate"),
                 }).appendTo(jQuery('<span/>', {
                     'class': 'input-group-btn'
-                }).appendTo(this.el));
+                }).appendTo(this.group));
                 button.append(
                     Sao.common.ICONFACTORY.get_icon_img('tryton-translate'));
                 button.click(this.translate.bind(this));
@@ -2362,13 +2365,16 @@ function eval_pyson(value){
                         'class': 'panel-heading',
                     }).appendTo(this.el));
             }
+            this.group = jQuery('<div/>', {
+                'class': 'input-group',
+            }).appendTo(jQuery('<div/>', {
+                'class': 'panel-body',
+            }).appendTo(this.el));
             this.input = this.labelled = jQuery('<div/>', {
                 'class': 'richtext mousetrap',
-                'contenteditable': true
-            }).appendTo(jQuery('<div/>', {
-                'class': 'panel-body'
-            }).appendTo(this.el));
-            this.el.focusout(this.focus_out.bind(this));
+                'contenteditable': true,
+            }).appendTo(this.group);
+            this.group.focusout(this.focus_out.bind(this));
             if (this.attributes.translate) {
                 var button = jQuery('<button/>', {
                     'class': 'btn btn-default btn-sm form-control',
@@ -2377,7 +2383,7 @@ function eval_pyson(value){
                     'title': Sao.i18n.gettext("Translate"),
                 }).appendTo(jQuery('<span/>', {
                     'class': 'input-group-btn',
-                }).appendTo(this.el));
+                }).appendTo(this.group));
                 button.append(
                     Sao.common.ICONFACTORY.get_icon_img('tryton-translate'));
                 button.click(this.translate.bind(this));