[tryton-commits] [tryton] [default] Improve style when resizing columns

[Cédric Krier]

details:   https://code.tryton.org/tryton/commit/8370f3ff1e8d
branch:    default
user:      Cédric Krier <c...@b2ck.com>
date:      Wed Mar 18 19:46:20 2026 +0100
description:
        Improve style when resizing columns

        - use box-shadow to simulate border on the stick header
        - show resizer on hover
        - render dashed border for columns when resizing

        Closes #14693
diffstat:

 sao/src/sao.less     |  59 ++++++++++++++++++++++-----------------------------
 sao/src/view/tree.js |   4 ++-
 2 files changed, 28 insertions(+), 35 deletions(-)

diffs (134 lines):

diff -r 6c484bbad45f -r 8370f3ff1e8d sao/src/sao.less
--- a/sao/src/sao.less  Wed Mar 18 17:35:20 2026 +0100
+++ b/sao/src/sao.less  Wed Mar 18 19:46:20 2026 +0100
@@ -844,11 +844,6 @@
     > table.tree {
         width: 100%;
         table-layout: fixed;
-        border: 1px solid transparent;
-
-        &.table-bordered {
-            border-color: @table-border-color;
-        }
 
         col.selection-state, col.favorite, col.tree-menu {
             width: 30px;
@@ -883,6 +878,7 @@
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 margin: 0;
+                vertical-align: bottom;
 
                 &.sortable {
                     cursor: pointer;
@@ -890,15 +886,21 @@
             }
 
             > div.resizer {
-                z-index: 1;
+                background-color: @table-border-color;
+                cursor: ew-resize;
+                height: 100%;
+                inset-inline-end: -5px;
+                opacity: 0;
+                padding: 0 4px;
                 position: absolute;
                 top: 0;
-                inset-inline-end: -5px;
+                transition: opacity 0.2s;
                 width: 2px;
-                height: 100%;
-                cursor: ew-resize;
-                padding: 0 4px;
-                background-color: transparent;
+                z-index: 1;
+
+                &:hover {
+                    opacity: 1;
+                }
             }
 
             &.tree-menu {
@@ -921,17 +923,26 @@
             position: sticky;
             top: 0;
             z-index: 100;
+            box-shadow: inset 0 1px 0 @table-border-color, inset 0 -1px 0 
@table-border-color;
 
             th {
-                border: 1px solid transparent;
                 border-bottom: 2px solid @table-border-color;
             }
 
             &:hover th {
-                border: 1px solid @table-border-color;
-                border-bottom-width: 2px;
+                box-shadow: inset 1px 0 0 @table-border-color, inset -1px 0 0 
@table-border-color;
             }
         }
+        &.table-bordered > thead > tr:first-child {
+            th {
+                box-shadow: inset .5px 0 0 @table-border-color, inset -.5px 0 
0 @table-border-color;
+            }
+        }
+
+        &.resizing td:not(:last-child) {
+            border-right: 2px dashed @table-border-color;
+        }
+
         > tfoot > tr {
             background-color: @body-bg;
             bottom: 0;
@@ -1074,26 +1085,6 @@
         padding-top: 0;
         padding-bottom: 0;
     }
-
-    > table.table-bordered {
-        border: 1px solid @table-border-color;
-        > thead,
-        > tbody,
-        > tfoot {
-            > tr:first-child {
-                > th,
-                > td {
-                    border: 1px solid @table-border-color;
-                }
-            }
-        }
-        > thead > tr:first-child {
-            > th,
-            > td {
-                border-bottom-width: 2px;
-            }
-        }
-    }
 }
 
 .form, .board {
diff -r 6c484bbad45f -r 8370f3ff1e8d sao/src/view/tree.js
--- a/sao/src/view/tree.js      Wed Mar 18 17:35:20 2026 +0100
+++ b/sao/src/view/tree.js      Wed Mar 18 19:46:20 2026 +0100
@@ -249,6 +249,8 @@
                 let is_resizing = false;
                 resizer.on('mousedown', (event) => {
                     is_resizing = true;
+                    let table = this.table;
+                    table.addClass('resizing');
                     let th = event.target.parentNode;
                     let headers = th.parentNode.childNodes;
                     let cols = this.colgroup[0].childNodes;
@@ -280,12 +282,12 @@
                         document.removeEventListener('mousemove', 
on_mouse_move);
                         document.removeEventListener('mouseup', on_mouse_up);
                         setTimeout(() => is_resizing = false, 0);
+                        table.removeClass('resizing');
                     }
 
                     document.addEventListener('mousemove', on_mouse_move);
                     document.addEventListener('mouseup', on_mouse_up);
 
-                    this.table.addClass('table-bordered');
                     event.preventDefault();
                 });