[IMP] web_tree_many2one_clickable: improved visualization

OCA · Jan 28, 2025 · 39a01d2 · 39a01d2
1 parent cb8eda2
commit 39a01d2
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 10 deletions.
diff --git a/web_tree_many2one_clickable/static/src/css/web_tree_many2one_clickable.scss b/web_tree_many2one_clickable/static/src/css/web_tree_many2one_clickable.scss
@@ -1,10 +1,38 @@
 td.o_many2one_cell {
-    a {
-        margin-left: 0.5em;
-        visibility: hidden;
-    }
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+/*SECONDARY CONTAINER FOR THE BUTTON AND TEXT*/
+.o_many2one_container {
+    display: flex;
+    gap: 0.5em; /* Space between the containers  */
+}
+
+/*TEXT CONTAINER AND TEXT CSS*/
+.o_text_container {
+    max-width: fit-content;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+td.o_field_text {
+    position: relative;
+    max-width: fit-content;
+    vertical-align: bottom;
+}
+/*BUTTON CONTAINER AND BUTTON CSS*/
+.o_button_container {
+    left: 0;
+}
+td.o_many2one_cell a {
+    margin-left: 0.5;
+    visibility: hidden;
+    position: relative;
+    transition: all 0.2s ease;
+}
 
-    &:hover a {
-        visibility: visible;
-    }
+td.o_many2one_cell:hover a {
+    visibility: visible;
 }
diff --git a/web_tree_many2one_clickable/static/src/js/web_tree_many2one_clickable.js b/web_tree_many2one_clickable/static/src/js/web_tree_many2one_clickable.js
@@ -36,11 +36,26 @@ odoo.define("web_tree_many2one_clickable.many2one_clickable", function (require)
             if (!this.noOpen && this.value) {
                 // Replace '<a>' element
                 this.$el.removeClass("o_form_uri");
-                this.$el = $("<span/>", {
+                var $span = $("<span/>", {
                     html: this.$el.html(),
-                    class: this.$el.attr("class") + " o_field_text",
+                    class: this.$el.attr("class") + "o_field_text",
                     name: this.$el.attr("name"),
                 });
+                this.$el = $("<div/>", {
+                    class: "o_many2one_container",
+                });
+
+                // Create the container for the text (span)
+                var $textContainer = $("<div/>", {
+                    class: "o_text_container",
+                });
+
+                $textContainer.append($span);
+
+                // Create the container for the button (a)
+                var $buttonContainer = $("<div/>", {
+                    class: "o_button_container",
+                });
 
                 // Append button
                 var $a = $("<a/>", {
@@ -63,7 +78,10 @@ odoo.define("web_tree_many2one_clickable.many2one_clickable", function (require)
                         }),
                     });
                 });
-                this.$el.append($a);
+                $buttonContainer.append($a);
+
+                // Adding the two containers to the principal
+                this.$el.append($textContainer).append($buttonContainer);
             }
         },
     });