From c12b472dba5cf293075be2dc0d58eb77940b111f Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Wed, 19 Sep 2018 11:53:31 +0200 Subject: [PATCH] [FIX] website, *: review navbar color system * web_editor, website_slides Current system is styling all navbars with the user color. This was not the expected behavior but it is in fact quite nice, so we decided to keep it. There was however a problem: choosing the menu text color only applied to the main navbar (as it was an xpath toggling the navbar-dark class). This commit solves the problem by forcing navbar-light to behave as navbar-dark automatically if the menu background is dark, and this without any JS or extra CSS rules. This allows to get rid of the menu text color option. This commit also reviews the light and dark colors which are used when website is not installed. --- .../static/src/scss/bootstrap_overridden.scss | 6 +++--- addons/website/static/src/scss/website.scss | 11 +++++++++-- addons/website/static/src/xml/website.editor.xml | 2 +- addons/website/views/website_templates.xml | 12 ------------ addons/website_slides/views/website_slides_embed.xml | 2 +- 5 files changed, 14 insertions(+), 19 deletions(-) diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss index 6eee3def5f4..eb3f346595f 100644 --- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss +++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss @@ -18,9 +18,9 @@ $-palette: map-merge(( // BS light and dark colors are not used for any BS component, just // for color utilities. By default, we set them to a very light and - // very dark version of a desaturate version of the primary color - 'light': lighten(desaturate($-main-color, 40%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness - 'dark': darken(desaturate($-main-color, 40%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness + // very dark version of a desaturate version of the main color + 'light': lighten(desaturate($-main-color, 80%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness + 'dark': darken(desaturate($-main-color, 80%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness ), o-map-omit($-palette)); @if $-is-backend { $-palette: map-remove($-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'); diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index ffbb01e7e68..c926dfe6df7 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -32,8 +32,15 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number); } } -.navbar { - @include o-bg-color(color('menu')); +.navbar-light { + // Style only navbar-light which Odoo is only supposed to use in standard + // anyway. Automatically mimic navbar-dark if the user's menu color is dark. + // Note: this only works because navbar-light is defined before navbar-dark, + // we may want to use a safest way when possible. + background-color: color('menu') !important; + @if (color-yiq(color('menu')) != $yiq-text-dark) { + @extend .navbar-dark; + } .nav-item { transition: opacity 1000ms ease 0s; diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index 5b3f456caf9..46174daaf72 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -37,7 +37,7 @@
Background colors
- +
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml index 034dc3f30c5..d0c203e1117 100644 --- a/addons/website/views/website_templates.xml +++ b/addons/website/views/website_templates.xml @@ -464,11 +464,6 @@ - - - - - @@ -517,13 +512,6 @@ - - -