[IMP] web_editor: come back to a more regular summernote colorpicker

Splitting the summernote colorpicker into bg colorpicker and foreground
colorpicker seems to have been a bad idea as people tend to click on
the recent color button thinking it will open a dropdown.

This commit keeps the design that had been decided for colorpicker
template and do not change the "background-color" snippet option.
However, the colors for background and foreground text changes are
now displayed in an unique dropdown again, with reviewed style.

+ adapt the rte tour

1 files changed, 43 insertions, 25 deletions

diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index f453d0ca384..f3b91123d78 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -726,29 +726,33 @@ html[lang] > body.editor_enable{
                 .o-text-overflow(inline-block);
                 max-width: 100px;
             }
+
+            &.active {
+                border-top: 2px solid white;
+                background-color: @o-we-color-dark;
+                color: @o-we-color-text-light;
+                box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
+            }
         }
-        .btn.active {
-            border-top: 2px solid white;
-            background-color: @o-we-color-dark;
-            color: @o-we-color-text-light;
-            box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
-        }
-        >.btn-group {
-            margin-top: -2px
-        }
-        .btn-group.open .dropdown-toggle {
-            border-top: 2px solid white;
-            background-color: @o-we-color-darker;
-            color: white;
-            box-shadow: none;
+        > .btn-group {
+            margin-top: -2px;
+
+            &.open .dropdown-toggle {
+                border-top: 2px solid white;
+                background-color: @o-we-color-darker;
+                color: white;
+                box-shadow: none;
+            }
         }
         .dropdown-menu {
             margin: 0;
             border-radius: 0;
             background-color: @o-we-color-darker;
+            color: @o-we-color-text-normal;
             > li > a {
                 width: 100%;
                 color: @o-we-color-text-light;
+
                 &:hover {
                     background-color: @o-we-tab-active-bg;
                     color: white;
@@ -765,16 +769,31 @@ html[lang] > body.editor_enable{
             border: 1px solid #989898;
             border-color: fadeOut(@o-we-color-text-normal, 0.5);
         }
-        .note-color-palette td > button, .note-color-palette div .note-color-btn {
-            border-color: fadeOut(white, 50%);
-            border-radius: 0;
-            margin: 1px;
-        }
+        .note-color-palette .note-color-row {
+            height: auto!important;
+
+            &::after {
+                content: "";
+                display: table;
+                clear: both;
+            }
+
+            .note-color-btn {
+                float: left;
+                margin: 1px 1px 0 0;
+                border-color: black;
+
+                &.o_small {
+                    width: 16px;
+                    height: 16px;
+                    margin: 3px 3px 2px 2px;
+                    border-radius: 50%;
+                }
 
-        // COLORPICKER
-        .note-color {
-            border: 1px solid @o-we-color-divider;
-            border-width: 0 1px;
+                &.o_clear {
+                    clear: both;
+                }
+            }
         }
     }
 }
@@ -804,8 +823,7 @@ html[lang] > body.editor_enable{
             content: '\f0c3';
         }
         .dropdown-menu {
-            min-width: 250px!important;
-            padding: 0!important;
+            min-width: 353px!important;
         }
     }
 }