From 48b87b4c7fc7fc57ef16c3599b8c3caa5be7027a Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 1 Oct 2021 08:09:23 +0000
Subject: [PATCH] [FIX] website: limit palettes number proposed by the ui

Prior to this commit the entire palettes library (139 entries) was
rendered into the "Theme" tab palettes dropdown.

The final result was overwhelming, especially considering that palettes
were not ordered by color. Moreover, since palettes have been designed
to provide variety within themes, a lot of them appeared very similar
(if not exact clones) when compared in the context of a general library.

This commit keeps palettes' definitions to avoid breaking
pre-existing DBs design, but will propose the user the "configurator"
ones (+ the 2 system ones) only.

Themes can eventually inject a preferred palette in the list in order to
match screenshoot and "pre-configurator" demo content.

This commit also removes the previous prefix-based ordering system, now
obsolete. Indeed several themes use palettes defined by other themes,
invalidating the prefix mechanism.

task-2656337

X-original-commit: 9ff9417d1d5ccb85e0d0751acc8de5faced30236
Part-of: odoo/odoo#77857
---
 .../static/src/js/editor/snippets.options.js  | 12 ++------
 .../static/src/scss/primary_variables.scss    | 30 +++++++++++++++++--
 .../static/src/scss/website.wysiwyg.scss      | 25 ++++++++--------
 3 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index c27b5086c94..4a3b11b9f6b 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1230,18 +1230,10 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
     async _renderCustomXML(uiFragment) {
         const paletteSelectorEl = uiFragment.querySelector('[data-variable="color-palettes-name"]');
         const style = window.getComputedStyle(document.documentElement);
-        const priorityPrefix = weUtils.getCSSVariableValue('priority-palette-prefix', style).replace(/'/g, "");
-        const allPaletteNames = weUtils.getCSSVariableValue('palette-names', style).split(' ').map((name) => {
+        const allPaletteNames = weUtils.getCSSVariableValue('palette-names', style).split(', ').map((name) => {
             return name.replace(/'/g, "");
         });
-        const themePaletteNames = allPaletteNames.filter((name) => {
-            return name.startsWith(priorityPrefix);
-        });
-        const otherPaletteNames = allPaletteNames.filter((name) => {
-            return !name.startsWith(priorityPrefix);
-        });
-        const sortedPaletteNames = themePaletteNames.concat(otherPaletteNames);
-        for (const paletteName of sortedPaletteNames) {
+        for (const paletteName of allPaletteNames) {
             const btnEl = document.createElement('we-button');
             btnEl.classList.add('o_palette_color_preview_button');
             btnEl.dataset.customizeWebsiteVariable = `'${paletteName}'`;
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index d14838650bf..51f05b2a468 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -1876,8 +1876,34 @@ $o-color-palettes-compatibility-indexes: (
 $o-gray-color-palettes-compatibility-indexes: null; // Default to the color one above
 $o-theme-color-palettes-compatibility-indexes: null; // Default to the color one above
 
-// Palettes with this prefix will be displayed first in the editor panel
-$o-palette-priority-prefix: 'base';
+// Create the list of palettes proposed by the UI
+$o-selected-color-palettes-names: (
+    // Proposed by the configurator
+    'avantgarde-2',
+    'bistro-6',
+    'bookstore-4',
+    'generic-4',
+    'bookstore-5',
+    'beauty-3',
+    'cobalt-1',
+    'odoo-experts-2',
+    'artists-4',
+    'bewise-1',
+    'generic-16',
+    'generic-12',
+    'clean-2',
+    'generic-8',
+    'vehicle-1',
+    'anelusia-4',
+    'nano-2',
+    'notes-3',
+    'graphene-2',
+    'enark-4',
+
+    // System default
+    'base-1',
+    'base-2',
+);
 
 //------------------------------------------------------------------------------
 // Website customizations
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index b05b48a4f59..68d986d3e00 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -11,8 +11,6 @@
     // without duplicating the css.
     @include print-variable('o-we-toolbar-height', $o-navbar-height);
 
-    @include print-variable('priority-palette-prefix', $o-palette-priority-prefix);
-
     // Need the colors, name, menu background color and footer background color of each color palette
     $o-palette-names: ();
     $-default-cc: ();
@@ -24,27 +22,28 @@
         $-default-cc: map-merge($-default-cc, ($attr: map-get($o-base-color-palette, $attr)))
     }
 
-    @each $palette-name, $palette in $o-color-palettes {
-        @if $palette-name != 'user-palette' {
-            @each $key, $value in $palette {
-                @include print-variable('o-palette-#{$palette-name}-#{$key}', $value);
+    @each $-selected-palette-name in $o-selected-color-palettes-names {
+        $-palette: map-get($o-color-palettes, $-selected-palette-name);
+
+        @if $-selected-palette-name != 'user-palette' {
+            @each $key, $value in $-palette {
+                @include print-variable('o-palette-#{$-selected-palette-name}-#{$key}', $value);
             }
-            $o-palette-names: append($o-palette-names, $palette-name);
 
             @each $attr-name, $default-cc-idx in $-default-cc {
                 $-cc-idx: $default-cc-idx;
-                @if map-has-key($palette, $attr-name) {
-                    $-cc-idx: map-get($palette, $attr-name);
+                @if map-has-key($-palette, $attr-name) {
+                    $-cc-idx: map-get($-palette, $attr-name);
                 }
                 $-bg: $body-bg;
                 @if $-cc-idx != null {
                     $-cc: nth($o-color-combinations, $-cc-idx);
-                    $-bg: o-safe-get($palette, 'o-cc#{$-cc-idx}-bg', map-get($-cc, 'bg'));
+                    $-bg: o-safe-get($-palette, 'o-cc#{$-cc-idx}-bg', map-get($-cc, 'bg'));
                     @if type-of($-bg) != color {
-                        $-bg: map-get($palette, $-bg);
+                        $-bg: map-get($-palette, $-bg);
                     }
                 }
-                @include print-variable('o-palette-#{$palette-name}-#{$attr-name}-bg', $-bg);
+                @include print-variable('o-palette-#{$-selected-palette-name}-#{$attr-name}-bg', $-bg);
             }
         }
     }
@@ -56,7 +55,7 @@
         @include print-variable('o-default-#{$attr-name}-bg', $-default-bg);
     }
 
-    @include print-variable('palette-names', $o-palette-names);
+    @include print-variable('palette-names', $o-selected-color-palettes-names);
 
     // Need info about the base grays which are used to compute the final grays
     @each $name, $color in $o-base-gray-color-palette {