From be84f9a54d46b68053b5edde0f901ca6dd03f606 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 : 6.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 bac1b8d556..89a8baa2b8 100644
--- a/sao/src/sao.less
+++ b/sao/src/sao.less
@@ -636,7 +636,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 39cfb4d9a4..523a81c23f 100644
--- a/sao/src/view/form.js
+++ b/sao/src/view/form.js
@@ -2149,10 +2149,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));
             if (this.attributes.translate) {
                 var button  = jQuery('<button/>', {
@@ -2161,7 +2164,7 @@ function eval_pyson(value){
                     'aria-label': 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));
@@ -2235,13 +2238,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',
@@ -2249,7 +2255,7 @@ function eval_pyson(value){
                     'aria-label': 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));