[FIX] web_editor: review temporary text tools design

The text tools are being reworked with the new editor. Meanwhile, this
commit will get closer to the desired design with a pure CSS solution.

Part of https://github.com/odoo/odoo/pull/58638

1 files changed, 60 insertions, 2 deletions

diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index ba1ba15ce43..e73da07afbf 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -44,7 +44,10 @@ body.editor_enable.editor_has_snippets {
 
 // Ugly hack to force ugly rules... while waiting for new editor
 #oe_snippets#oe_snippets .o_we_snippet_text_tools {
-    padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
+    $-text-tools-gap: 3px;
+    $-text-tools-header-height: 35px;
+
+    padding: $-text-tools-header-height $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
     box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
     z-index: $o-we-zindex;
 
@@ -58,15 +61,70 @@ body.editor_enable.editor_has_snippets {
     .popover-body {
         padding: 0 !important;
         border: none !important;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: $-text-tools-gap;
 
         > * {
-            margin-bottom: $o-we-sidebar-content-field-spacing;
+            margin: 0 0 $o-we-sidebar-content-field-spacing*.5 0;
         }
     }
     .btn {
         @extend %we-generic-button;
+        border-radius: 0;
+        padding: 0 $o-we-sidebar-content-field-button-group-button-spacing!important;
+        line-height: $o-we-sidebar-content-field-height + ($o-we-sidebar-content-field-border-width*2)!important;
+    }
+    // Achieve a "button-group effect" for siblings buttons.
+    .popover-body > .btn-group {
+        > .btn  {
+            border-radius: 0;
+        }
+        > .btn:first-of-type, > div:first-of-type .btn {
+            @include border-left-radius($o-we-sidebar-content-field-border-radius);
+        }
+        > .btn:last-of-type, > div:last-of-type .btn {
+            @include border-right-radius($o-we-sidebar-content-field-border-radius);
+        }
     }
     .btn-group {
+
+        &.note-color {
+            order: -3;
+
+            .note-back-color-preview {
+                margin-left: $-text-tools-gap;
+            }
+            .btn:after {
+                display: none;
+            }
+        }
+        &.note-style {
+            order: -2;
+
+            &, > div {
+                flex-grow: 1;
+            }
+        }
+        &.note-fontsize {
+            order: -1;
+        }
+        &.note-font [data-name="clear"] {
+            @include o-position-absolute(($-text-tools-header-height*-1) + 5px, 0);
+            background: 0;
+            border: 0;
+            @extend %we-generic-link;
+        }
+        &.note-para {
+            flex-grow: 1;
+            gap: $-text-tools-gap;
+            justify-content: space-between;
+
+            > * {
+                flex: 1 1 33%;
+            }
+        }
         > .d-none + * {
             margin-left: 0 !important;
         }