pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] web_editor, *: review color theming system

Browse Source 
* web, website

- Introduce gray color palettes (needed for themes migration)

- Synchronize BS4 color maps with individual variables (see comments
 about this in the code).

- Review alpha/primary, beta/secondary matching:

Before this commit, we decided that the common way to define a color
palette was defining primary, secondary, gamma, delta and epsilon.
alpha and beta were then forced to primary and secondary without other
possibility.
The new system makes more sense:
1) define alpha, beta, gamma, delta and epsilon
2) primary and secondary will automatically be set to your alpha and
  beta (allowing to style the default UI with BS4-independant
  variables)
3) if you are not happy with (2), you can define primary / secondary
  in your color palette so that they are not automatically set to
  alpha / beta

This commit also changes what classes the editor uses. Background colors
and text colors will now use alpha/beta/gamma/delta/epsilon (not primary
and secondary anymore). For buttons, all the possibilities are suggested
but color duplicates are hidden (so if your primary and alpha are equal,
only one button color is suggested).
This commit is contained in:
qsm-odoo
2018-08-30 11:10:56 +02:00
parent 6e33301693
commit 77402a4efc
12 changed files with 137 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/scss/bootstrap_overridden_frontend.scss
Vendored
-3
View File
@@ -1,3 +0,0 @@
$black: black;
$white: white;
addons/web_editor/static/src/js/widgets/widgets.js
+16 -1
View File
@@ -1164,7 +1164,7 @@ var MediaDialog = Dialog.extend({
self.$media = self.$media.parent();
self.media = self.$media[0];
tabToShow = 'video';
}
}
self.$('[href="#editor-media-' + tabToShow + '"]').tab('show');
});
@@ -1457,6 +1457,21 @@ var LinkDialog = Dialog.extend({
this.$('input[name="url"]').val(match ? match[1] : this.data.url);
}
// Hide the duplicate color buttons (most of the times, primary = alpha
// and secondary = beta for example but this may depend on the theme)
this.opened().then(function () {
var colors = [];
_.each(self.$('.o_btn_preview'), function (btn) {
var $btn = $(btn);
var color = $btn.css('background-color');
if (_.contains(colors, color)) {
$btn.remove();
} else {
colors.push(color);
}
});
});
this._adaptPreview();
this.$('input:visible:first').focus();
addons/web_editor/static/src/scss/bootstrap_overridden.scss
Vendored
+63 -14
View File
@@ -1,3 +1,5 @@
// Hacky way to detect if its the backend or not
$-is-backend: variable-exists('primary');
// Automatically update bootstrap colors map (unused by BS itself)
$-palette: nth($o-color-palettes, $o-color-palette-number);
@@ -6,28 +8,75 @@ $colors: map-merge($-palette, $colors);
// Automatically extend bootstrap to create theme background/text/button classes
$-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number);
$-main-color: map-get($-palette, 'primary');
$-main-color: map-get($-palette, 'alpha');
$-main-color-lightness: lightness($-main-color);
$-palette: map-merge($-palette, (
// Compatibility: alpha and beta color exist but will now always be
// equal to primary and secondary colors
alpha: $-main-color,
beta: map-get($-palette, 'secondary'),
$-palette: map-merge((
// alpha and beta colors are used to override primary and secondary BS4
// colors by default, so that theme colors affect the default Odoo layouts
primary: $-main-color,
secondary: map-get($-palette, 'beta'),
// 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
// 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
));
), $-palette);
@if $-is-backend {
$-palette: map-remove($-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
}
$theme-colors: () !default;
$theme-colors: map-merge($-palette, $theme-colors);
// Extend grays with transparent ones (for some reason, BS4 create black-50 and
// white-50 but does not allow overridding that with variables). Also add black
// and white ones too as they were also not added by BS4...
// white-50 but does not allow overridding that with variables), also use the
// theme gray palette (which is supposed to at least declare white and black).
$-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number);
$-palette: map-merge($o-transparent-grays, $-palette);
@if $-is-backend {
$-palette: map-remove($-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900');
}
$grays: () !default;
$grays: map-merge(map-merge($o-transparent-grays, (
black: $black, // Note: those two needs to be redefined before bootstrap,
white: $white, // otherwise they do not exist yet
)), $grays);
$grays: map-merge($-palette, $grays);
// Bootstrap use standard variables to define individual colors which are then
// placed into a map which is then used to get the value of each individual
// color. As BS4 allows to extend the map a priori to define our own colors,
// it does not take care of making the standard variables match the values in
// the user's map. The problem is that, at least for grays, bootstrap uses the
// standard variables in its _variables.scss file, so if:
//
// User file:
// $grays: (
// '100': blue,
// );
//
// BS4:
// $gray-100: gray !default;
// $grays: () !default;
// $grays: map-merge((
// '100': $gray-100,
// ), $grays);
//
// -> Here gray('100') is blue but $gray-100 is still gray... so BS4 is not
// correctly generated as BS4 uses $gray-100 in _variables.scss
$primary: theme-color('primary') !default;
$secondary: theme-color('secondary') !default;
$success: theme-color('success') !default;
$info: theme-color('info') !default;
$warning: theme-color('warning') !default;
$danger: theme-color('danger') !default;
$light: theme-color('light') !default;
$dark: theme-color('dark') !default;
$white: gray('white') !default;
$gray-100: gray('100') !default;
$gray-200: gray('200') !default;
$gray-300: gray('300') !default;
$gray-400: gray('400') !default;
$gray-500: gray('500') !default;
$gray-600: gray('600') !default;
$gray-700: gray('700') !default;
$gray-800: gray('800') !default;
$gray-900: gray('900') !default;
$black: gray('black') !default;
addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss
Vendored
-4
View File
@@ -1,4 +0,0 @@
// Hacky way to prevent our web_editor/website themes to affect the backend UI but
// still allow to define extra colors for backend HTML editors
$theme-colors: map-remove($theme-colors, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark');
addons/web_editor/static/src/scss/web_editor.variables.scss
+9 -3
View File
@@ -230,8 +230,8 @@ $o-color-palette-number: 1;
// Theme colors
$o-theme-color-palettes: (
(
primary: $o-enterprise-primary-color,
secondary: $o-enterprise-color,
alpha: $o-enterprise-primary-color,
beta: $o-enterprise-color,
gamma: #5C5B80,
delta: #5B899E,
epsilon: #E46F78,
@@ -248,7 +248,13 @@ $o-transparent-grays: (
white-50: rgba(white, 0.5),
white-75: rgba(white, 0.75),
) !default;
$o-gray-color-palettes: (
(
'white': #FFFFFF, // Those two will enforce the creation of bg-white
'black': #000000, // and bg-black classes.
),
) !default;
$o-gray-color-palette-number: 1;
// Translations
$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
addons/web_editor/static/src/xml/editor.xml
+1 -1
View File
@@ -278,7 +278,7 @@
<input class="d-none link-style" name="link_style_color" type="radio" value=""/>
<i class="fa"/>
</label>
<t t-foreach="['primary', 'secondary', 'gamma', 'delta', 'epsilon', 'success', 'info', 'warning', 'danger']" t-as="color">
<t t-foreach="['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'primary', 'secondary', 'success', 'info', 'warning', 'danger']" t-as="color">
<label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-#{color}" t-attf-aria-label="Color for #{color}" t-attf-title="Color for #{color}">
<input type="radio" name="link_style_color" class="d-none link-style" t-att-value="color"/>
<i class="fa"/>
addons/web_editor/views/editor.xml
+2 -3
View File
@@ -69,7 +69,6 @@
<template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden_backend.scss"/>
</xpath>
</template>
@@ -154,8 +153,8 @@
<template id="web_editor.colorpicker" name="Color-Picker">
<colorpicker>
<div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask">
<button data-color="primary"></button>
<button data-color="secondary"></button>
<button data-color="alpha"></button>
<button data-color="beta"></button>
<button data-color="gamma"></button>
<button data-color="delta"></button>
<button data-color="epsilon"></button>
addons/website/static/src/js/tours/customize.js
+1 -1
View File
@@ -11,7 +11,7 @@ tour.register('theme_customize', {
url: '/',
wait_for: base.ready(),
}, [{
trigger: 'button.o_theme_customize_color_primary',
trigger: 'button.o_theme_customize_color_primary, button.o_theme_customize_color_alpha',
content: _t("Click here to choose your main branding color.<br/>It will recompute the palette with suggested matching colors."),
position: 'bottom',
}]);
addons/website/static/src/js/widgets/theme.js
+28 -4
View File
@@ -62,6 +62,27 @@ var ThemeCustomizeDialog = Dialog.extend({
var $tabs = this.$('[data-toggle="tab"]');
this.opened().then(function () {
$tabs.eq(self.defaultTab).tab('show');
var $colorPreview = self.$('.o_theme_customize_color_previews:visible');
var $primary = $colorPreview.find('.o_theme_customize_color[data-color="primary"]');
var $alpha = $colorPreview.find('.o_theme_customize_color[data-color="alpha"]');
var $secondary = $colorPreview.find('.o_theme_customize_color[data-color="secondary"]');
var $beta = $colorPreview.find('.o_theme_customize_color[data-color="beta"]');
var sameAlphaPrimary = $primary.find('.o_color_preview').css('background-color') === $alpha.find('.o_color_preview').css('background-color');
var sameBetaSecondary = $secondary.find('.o_color_preview').css('background-color') === $beta.find('.o_color_preview').css('background-color');
if (!sameAlphaPrimary) {
$alpha.find('.o_color_name').text(_t("Extra Color"));
$primary.removeClass('d-none').addClass('d-flex');
}
if (!sameBetaSecondary) {
$beta.find('.o_color_name').text(_t("Extra Color"));
$secondary.removeClass('d-none').addClass('d-flex');
}
if (!sameAlphaPrimary && sameBetaSecondary) {
$beta.insertBefore($alpha);
} else if (sameAlphaPrimary && !sameBetaSecondary) {
$secondary.insertAfter($alpha);
}
});
// Hide the tab navigation if only one tab
@@ -153,6 +174,9 @@ var ThemeCustomizeDialog = Dialog.extend({
reload: $item.data('reload'),
}));
$multiChoiceLabel.find('.o_theme_customize_color[data-color="primary"]').addClass('d-none').removeClass('d-flex');
$multiChoiceLabel.find('.o_theme_customize_color[data-color="secondary"]').addClass('d-none').removeClass('d-flex');
if ($container.hasClass('form-row')) {
var $col = $('<div/>', {class: (icon ? 'col-4' : (colorPalette ? 'col-12' : 'col-6'))});
$col.append($multiChoiceLabel);
@@ -214,8 +238,8 @@ var ThemeCustomizeDialog = Dialog.extend({
params: {
xml_ids: this._getXMLIDs(this.$inputs),
},
}).done(function (data) {
self.$inputs.prop('checked', false);
}).done(function (data) {
self.$inputs.prop('checked', false);
_.each(self.$inputs.filter('[data-xmlid]:not([data-xmlid=""])'), function (input) {
var $input = $(input);
if (!_.difference(self._getXMLIDs($input), data[0]).length) {
@@ -454,7 +478,7 @@ var ThemeCustomizeDialog = Dialog.extend({
var colorType = $color.data('colorType');
var colorpicker = new ColorpickerDialog(this, {
defaultColor: $color.find('span').css('background-color'),
defaultColor: $color.find('.o_color_preview').css('background-color'),
});
colorpicker.on('colorpicker:saved', this, function (ev) {
ev.stopPropagation();
@@ -551,4 +575,4 @@ var ThemeCustomizeMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
websiteNavbarData.websiteNavbarRegistry.add(ThemeCustomizeMenu, '#theme_customize');
return ThemeCustomizeDialog;
});
});
addons/website/static/src/scss/options/colors/user_theme_color_palette.scss
+8 -3
View File
@@ -1,15 +1,20 @@
$o-user-theme-color-palette: map-merge((
// Theme colors
primary: null,
secondary: null,
alpha: null,
beta: null,
gamma: null,
epsilon: null,
delta: null,
// Depending on the theme, alpha and beta may not be equal to
// primary and secondary
primary: null,
secondary: null,
// BS state colors
success: null,
info: null,
warning: null,
danger: null,
danger: null,
), o-map-omit($o-user-theme-color-palette));
addons/website/static/src/scss/secondary_variables.scss
+7 -7
View File
@@ -8,14 +8,14 @@
$-palette-1: nth($o-color-palettes, 1);
$o-color-palettes: append($o-color-palettes, map-merge($-palette-1, o-map-omit($o-user-color-palette)));
// Generate default theme color scheme if primary is set
$-primary: map-get($o-user-theme-color-palette, 'primary');
@if ($-primary) {
// Generate default theme color scheme if alpha is set
$-alpha: map-get($o-user-theme-color-palette, 'alpha');
@if ($-alpha) {
$o-user-theme-color-palette: map-merge($o-user-theme-color-palette, map-merge((
secondary: lighten(desaturate($-primary, 60%), 30%),
gamma: desaturate(adjust-hue($-primary, -45deg), 10%),
delta: desaturate(adjust-hue($-primary, 45deg), 10%),
epsilon: desaturate(adjust-hue($-primary, 180deg), 10%),
beta: lighten(desaturate($-alpha, 60%), 30%),
gamma: desaturate(adjust-hue($-alpha, -45deg), 10%),
delta: desaturate(adjust-hue($-alpha, 45deg), 10%),
epsilon: desaturate(adjust-hue($-alpha, 180deg), 10%),
), o-map-omit($o-user-theme-color-palette)));
}
addons/website/static/src/xml/website.editor.xml
+2 -2
View File
@@ -29,7 +29,7 @@
<div t-if="colorPalette" class="o_theme_customize_color_previews" t-att-data-depends="id">
<div>
<h6>Main colors</h6>
<t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'gamma': _t('Extra Color 1'), 'delta': _t('Extra Color 2'), 'epsilon': _t('Extra Color 3')}" t-as="color">
<t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'alpha': _t('Primary'), 'beta': _t('Secondary'), 'gamma': _t('Extra Color'), 'delta': _t('Extra Color'), 'epsilon': _t('Extra Color')}" t-as="color">
<t t-call="website.theme_customize_color_palette_button">
<t t-set="color_type" t-value="'theme'"/>
</t>
@@ -66,7 +66,7 @@
t-attf-class="btn btn-sm btn-secondary d-flex align-items-center w-100 mt-2 justify-content-between o_theme_customize_color o_theme_customize_color_#{color}"
t-att-data-color="color"
t-att-data-color-type="color_type">
<t t-esc="color_value"/>
<span class="o_color_name"><t t-esc="color_value"/></span>
<span t-attf-class="o_color_preview bg-#{color}"/>
</button>
</t>