From cfd1eb439dd9f49f57e6cbfa3188b0973260d1af Mon Sep 17 00:00:00 2001
From: Brieuc-brd <brd@odoo.com>
Date: Wed, 4 Oct 2023 14:29:50 +0200
Subject: [PATCH] [FIX] web_editor: display read-only handles

Prior to this commit, read-only handles were hidden, which created a
layout issue (eg. the header was no longer highlighted when we clicked
on it).

This commit adapts read-only handles to make them visible by using a
border around the selected element.
It also adapts the common borders of all handles to place it
inside the element to avoid being partially hidden when the element is
on the edge of the container (eg. the header or the footer).

task-3537616

closes odoo/odoo#137569

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/scss/wysiwyg_snippets.scss     | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index ebef74151d5..cf4510238c8 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -2130,12 +2130,12 @@ we-select.o_we_border_preview_aligned_select {
                     width: $o-we-handle-edge-size;
                 }
                 &.w {
-                    inset: $o-we-handles-offset-to-hide auto $o-we-handles-offset-to-hide * -1 0;
+                    inset: $o-we-handles-offset-to-hide auto $o-we-handles-offset-to-hide * -1 $o-we-handle-border-width * 0.5;
                     transform: translateX(-50%);
                     cursor: ew-resize;
                 }
                 &.e {
-                    inset: $o-we-handles-offset-to-hide 0 $o-we-handles-offset-to-hide * -1 auto;
+                    inset: $o-we-handles-offset-to-hide $o-we-handle-border-width * 0.5 $o-we-handles-offset-to-hide * -1 auto;
                     transform: translateX(50%);
                     cursor: ew-resize;
                 }
@@ -2145,6 +2145,10 @@ we-select.o_we_border_preview_aligned_select {
 
                     &.o_grid_handle {
                         transform: translateY(-50%);
+
+                        &:before {
+                            transform: translateY($o-we-handle-border-width * 0.5);
+                        }
                     }
                 }
                 &.s {
@@ -2153,25 +2157,29 @@ we-select.o_we_border_preview_aligned_select {
 
                     &.o_grid_handle {
                         transform: translateY(50%);
+
+                        &:before {
+                            transform: translateY($o-we-handle-border-width * -0.5);
+                        }
                     }
                 }
                 &.ne {
-                    inset: $o-we-handles-offset-to-hide 0 auto auto;
+                    inset: ($o-we-handles-offset-to-hide + $o-we-handle-border-width * 0.5) $o-we-handle-border-width * 0.5 auto auto;
                     transform: translate(50%, -50%);
                     cursor: nesw-resize;
                 }
                 &.se {
-                    inset: auto 0 $o-we-handles-offset-to-hide * -1 auto;
+                    inset: auto $o-we-handle-border-width * 0.5 ($o-we-handles-offset-to-hide * -1 + $o-we-handle-border-width * 0.5) auto;
                     transform: translate(50%, 50%);
                     cursor: nwse-resize;
                 }
                 &.sw {
-                    inset: auto auto $o-we-handles-offset-to-hide * -1 0;
+                    inset: auto auto ($o-we-handles-offset-to-hide * -1 + $o-we-handle-border-width * 0.5) $o-we-handle-border-width * 0.5;
                     transform: translate(-50%, 50%);
                     cursor: nesw-resize;
                 }
                 &.nw {
-                    inset: $o-we-handles-offset-to-hide auto auto 0;
+                    inset: ($o-we-handles-offset-to-hide + $o-we-handle-border-width * 0.5) auto auto $o-we-handle-border-width * 0.5;
                     transform: translate(-50%, -50%);
                     cursor: nwse-resize;
                 }
@@ -2246,24 +2254,27 @@ we-select.o_we_border_preview_aligned_select {
                     }
                     &.o_column_handle {
 
-                        &::before {
-                            inset: 0 $o-we-handle-border-width * -0.5;
-                        }
-
                         &.n::before {
                             margin: 0 auto auto;
-                            transform: translateY(-50%);
                         }
 
                         &.s::before {
                             margin: auto auto 0;
-                            transform: translateY(50%);
                         }
                     }
                 }
 
                 &.readonly {
-                    display: none;
+                    cursor: default;
+
+                    &.o_column_handle.o_side_y {
+                        border: none;
+                        background: none;
+                    }
+
+                    &::after, .o_handle_indicator {
+                        display: none;
+                    }
                 }
             }