[IMP] web_tree_many2one_clickable: improved visualization

web_tree_many2one_clickable/README.rst

@@ -79,6 +79,8 @@ Contributors
 * Artem Kostyuk <a.kostyuk@mobilunity.com>
 * Anand Kansagra <kansagraanand@hotmail.com>
 * Alexandre Díaz <alexandre.diaz@tecnativa.com>
+* Ooops404 <https://ooops404.com>
+  * Sylwester Krasinski <skrasinski62@gmail.com>
 
 Maintainers
 ~~~~~~~~~~~

web_tree_many2one_clickable/readme/CONTRIBUTORS.rst

@@ -5,3 +5,5 @@
 * Artem Kostyuk <a.kostyuk@mobilunity.com>
 * Anand Kansagra <kansagraanand@hotmail.com>
 * Alexandre Díaz <alexandre.diaz@tecnativa.com>
+* Ooops404 <https://ooops404.com>
+  * Sylwester Krasinski <skrasinski62@gmail.com>

web_tree_many2one_clickable/static/description/index.html

@@ -9,10 +9,11 @@
 
 /*
 :Author: David Goodger (goodger@python.org)
-:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $
+:Id: $Id: html4css1.css 9511 2024-01-13 09:50:07Z milde $
 :Copyright: This stylesheet has been placed in the public domain.
 
 Default cascading style sheet for the HTML output of Docutils.
+Despite the name, some widely supported CSS2 features are used.
 
 See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
 customize this style sheet.
@@ -275,7 +276,7 @@ pre.literal-block, pre.doctest-block, pre.math, pre.code {
   margin-left: 2em ;
   margin-right: 2em }
 
-pre.code .ln { color: grey; } /* line numbers */
+pre.code .ln { color: gray; } /* line numbers */
 pre.code, code { background-color: #eeeeee }
 pre.code .comment, code .comment { color: #5C6576 }
 pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
@@ -301,7 +302,7 @@ span.option {
 span.pre {
   white-space: pre }
 
-span.problematic {
+span.problematic, pre.problematic {
   color: red }
 
 span.section-subtitle {
@@ -424,12 +425,16 @@ If you spotted it first, help us to smash it by providing a detailed and welcome
 <li>Artem Kostyuk &lt;<a class="reference external" href="mailto:a.kostyuk&#64;mobilunity.com">a.kostyuk&#64;mobilunity.com</a>&gt;</li>
 <li>Anand Kansagra &lt;<a class="reference external" href="mailto:kansagraanand&#64;hotmail.com">kansagraanand&#64;hotmail.com</a>&gt;</li>
 <li>Alexandre Díaz &lt;<a class="reference external" href="mailto:alexandre.diaz&#64;tecnativa.com">alexandre.diaz&#64;tecnativa.com</a>&gt;</li>
+<li>Ooops404 &lt;<a class="reference external" href="https://ooops404.com">https://ooops404.com</a>&gt;
+* Sylwester Krasinski &lt;<a class="reference external" href="mailto:skrasinski62&#64;gmail.com">skrasinski62&#64;gmail.com</a>&gt;</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
 <h2><a class="toc-backref" href="#toc-entry-7">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
-<a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
+<a class="reference external image-reference" href="https://odoo-community.org">
+<img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" />
+</a>
 <p>OCA, or the Odoo Community Association, is a nonprofit organization whose
 mission is to support the collaborative development of Odoo features and
 promote its widespread use.</p>

web_tree_many2one_clickable/static/src/css/web_tree_many2one_clickable.scss

@@ -1,10 +1,31 @@
 td.o_many2one_cell {
+    display: flex;
+    align-items: center;
+    position: relative;
+
     a {
         margin-left: 0.5em;
         visibility: hidden;
+        position: relative;
     }
 
     &:hover a {
         visibility: visible;
     }
 }
+/*SECONDARY CONTAINER FOR THE BUTTON AND TEXT*/
+.o_many2one_container {
+    display: flex;
+    gap: 0.5em; /* Space between the containers */
+
+    .o_text_container {
+        max-width: fit-content;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        div.o_custom_field_text {
+            position: relative;
+            vertical-align: bottom;
+        }
+    }
+}

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_custom_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);
             }
         },
     });