From cde3c9261edecaa126d7bd858d14e9b50b8bd518 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 3 Sep 2018 13:26:37 +0200 Subject: [PATCH] [FIX] website: review website customize dialog Make some changes which are needed for theme migration. - Theme colors as user colors fallback only (not hard choice) - Review option dependency system --- .../static/src/scss/bootstrap_overridden.scss | 2 +- addons/website/static/src/js/widgets/theme.js | 19 +++--- .../colors/option_color_user_variables.scss | 4 -- .../colors/option_colors_01_variables.scss | 3 + .../colors/option_colors_02_variables.scss | 3 + .../colors/option_colors_03_variables.scss | 3 + .../colors/option_colors_04_variables.scss | 3 + .../colors/option_colors_05_variables.scss | 3 + .../colors/option_colors_06_variables.scss | 3 + .../colors/option_colors_07_variables.scss | 3 + .../colors/option_colors_08_variables.scss | 3 + .../colors/option_colors_09_variables.scss | 3 + .../static/src/scss/secondary_variables.scss | 34 ++++++++--- .../website/static/src/xml/website.editor.xml | 1 - addons/website/views/website_templates.xml | 61 +++++++++++++++++-- 15 files changed, 118 insertions(+), 30 deletions(-) delete mode 100644 addons/website/static/src/scss/options/colors/option_color_user_variables.scss create mode 100644 addons/website/static/src/scss/options/colors/option_colors_01_variables.scss create mode 100644 addons/website/static/src/scss/options/colors/option_colors_02_variables.scss create mode 100644 addons/website/static/src/scss/options/colors/option_colors_03_variables.scss create mode 100644 addons/website/static/src/scss/options/colors/option_colors_04_variables.scss create mode 100644 addons/website/static/src/scss/options/colors/option_colors_05_variables.scss create mode 100644 addons/website/static/src/scss/options/colors/option_colors_06_variables.scss create mode 100644 addons/website/static/src/scss/options/colors/option_colors_07_variables.scss create mode 100644 addons/website/static/src/scss/options/colors/option_colors_08_variables.scss create mode 100644 addons/website/static/src/scss/options/colors/option_colors_09_variables.scss diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss index 2a0b900b10c..fa199849e55 100644 --- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss +++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss @@ -21,7 +21,7 @@ $-palette: map-merge(( // 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); +), 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/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js index e2879fb25c6..5cef69414ba 100644 --- a/addons/website/static/src/js/widgets/theme.js +++ b/addons/website/static/src/js/widgets/theme.js @@ -150,10 +150,11 @@ var ThemeCustomizeDialog = Dialog.extend({ _.each($items, function (item) { var $item = $(item); + var $col; switch (item.tagName) { case 'OPT': - var colorPalette = $item.data('colorPalette'); + var colorPalette = $item.data('colorPalette') === 'user'; var icon = $item.data('icon'); // Build the options template @@ -178,7 +179,7 @@ var ThemeCustomizeDialog = Dialog.extend({ $multiChoiceLabel.find('.o_theme_customize_color[data-color="secondary"]').addClass('d-none').removeClass('d-flex'); if ($container.hasClass('form-row')) { - var $col = $('
', {class: (icon ? 'col-4' : (colorPalette ? 'col-12' : 'col-6'))}); + $col = $('
', {class: (icon ? 'col-4' : (colorPalette ? 'col-12' : 'col-6'))}); $col.append($multiChoiceLabel); $container.append($col); } else { @@ -189,7 +190,7 @@ var ThemeCustomizeDialog = Dialog.extend({ case 'MORE': var collapseID = _.uniqueId('collapse-'); - var $col = $('
', { + $col = $('
', { class: 'col-12', }).appendTo($container); @@ -217,7 +218,7 @@ var ThemeCustomizeDialog = Dialog.extend({ case 'LIST': var $listContainer = $('
', {class: 'py-1 px-2 o_theme_customize_option_list'}); - var $col = $('
', { + $col = $('
', { class: 'col-6 mt-2', 'data-depends': $item.data('depends'), }).append($('
', {text: $item.attr('string')}), $listContainer); @@ -254,7 +255,7 @@ var ThemeCustomizeDialog = Dialog.extend({ }); self._setActive(); }).fail(function (d, error) { - Dialog.alert(this, error.data.message) + Dialog.alert(this, error.data.message); }); }, /** @@ -334,7 +335,6 @@ var ThemeCustomizeDialog = Dialog.extend({ // Look at all options to see if they are enabled or disabled var $enable = this.$inputs.filter('[data-xmlid]:checked'); - var $disable = this.$inputs.filter('[data-xmlid]:not(:checked)'); // Mark the labels as checked accordingly this.$('label').removeClass('checked'); @@ -358,9 +358,10 @@ var ThemeCustomizeDialog = Dialog.extend({ var $collapsedElements = this.$('[data-depends]'); _.each($collapsedElements, function (collapsed) { var $collapsed = $(collapsed); - var enabled = true; - if (self._getInputs($collapsed.data('depends')).not(':checked').length) { - enabled = false; + var enabled = false; + var nbDependencies = $collapsed.data('depends') ? $collapsed.data('depends').split(',').length : 0; + if (self._getInputs($collapsed.data('depends')).filter(':checked').length === nbDependencies) { + enabled = true; } if ($collapsed.is('.collapse')) { diff --git a/addons/website/static/src/scss/options/colors/option_color_user_variables.scss b/addons/website/static/src/scss/options/colors/option_color_user_variables.scss deleted file mode 100644 index b398843ead7..00000000000 --- a/addons/website/static/src/scss/options/colors/option_color_user_variables.scss +++ /dev/null @@ -1,4 +0,0 @@ - -// Enable last color palette, which is the user customized color palette -$o-color-palette-number: length($o-color-palettes); -$o-theme-color-palette-number: length($o-theme-color-palettes); diff --git a/addons/website/static/src/scss/options/colors/option_colors_01_variables.scss b/addons/website/static/src/scss/options/colors/option_colors_01_variables.scss new file mode 100644 index 00000000000..851a3be93b0 --- /dev/null +++ b/addons/website/static/src/scss/options/colors/option_colors_01_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 1; +$o-theme-color-palette-number: 1; +$o-gray-color-palette-number: 1; diff --git a/addons/website/static/src/scss/options/colors/option_colors_02_variables.scss b/addons/website/static/src/scss/options/colors/option_colors_02_variables.scss new file mode 100644 index 00000000000..2823f135ff0 --- /dev/null +++ b/addons/website/static/src/scss/options/colors/option_colors_02_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 2; +$o-theme-color-palette-number: 2; +$o-gray-color-palette-number: 2; diff --git a/addons/website/static/src/scss/options/colors/option_colors_03_variables.scss b/addons/website/static/src/scss/options/colors/option_colors_03_variables.scss new file mode 100644 index 00000000000..9bdce540ea6 --- /dev/null +++ b/addons/website/static/src/scss/options/colors/option_colors_03_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 3; +$o-theme-color-palette-number: 3; +$o-gray-color-palette-number: 3; diff --git a/addons/website/static/src/scss/options/colors/option_colors_04_variables.scss b/addons/website/static/src/scss/options/colors/option_colors_04_variables.scss new file mode 100644 index 00000000000..9150d434509 --- /dev/null +++ b/addons/website/static/src/scss/options/colors/option_colors_04_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 4; +$o-theme-color-palette-number: 4; +$o-gray-color-palette-number: 4; diff --git a/addons/website/static/src/scss/options/colors/option_colors_05_variables.scss b/addons/website/static/src/scss/options/colors/option_colors_05_variables.scss new file mode 100644 index 00000000000..58021de79ec --- /dev/null +++ b/addons/website/static/src/scss/options/colors/option_colors_05_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 5; +$o-theme-color-palette-number: 5; +$o-gray-color-palette-number: 5; diff --git a/addons/website/static/src/scss/options/colors/option_colors_06_variables.scss b/addons/website/static/src/scss/options/colors/option_colors_06_variables.scss new file mode 100644 index 00000000000..bd9a2b5bbbf --- /dev/null +++ b/addons/website/static/src/scss/options/colors/option_colors_06_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 6; +$o-theme-color-palette-number: 6; +$o-gray-color-palette-number: 6; diff --git a/addons/website/static/src/scss/options/colors/option_colors_07_variables.scss b/addons/website/static/src/scss/options/colors/option_colors_07_variables.scss new file mode 100644 index 00000000000..464ff4af34b --- /dev/null +++ b/addons/website/static/src/scss/options/colors/option_colors_07_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 7; +$o-theme-color-palette-number: 7; +$o-gray-color-palette-number: 7; diff --git a/addons/website/static/src/scss/options/colors/option_colors_08_variables.scss b/addons/website/static/src/scss/options/colors/option_colors_08_variables.scss new file mode 100644 index 00000000000..6fa642a9f55 --- /dev/null +++ b/addons/website/static/src/scss/options/colors/option_colors_08_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 8; +$o-theme-color-palette-number: 8; +$o-gray-color-palette-number: 8; diff --git a/addons/website/static/src/scss/options/colors/option_colors_09_variables.scss b/addons/website/static/src/scss/options/colors/option_colors_09_variables.scss new file mode 100644 index 00000000000..da879d234ce --- /dev/null +++ b/addons/website/static/src/scss/options/colors/option_colors_09_variables.scss @@ -0,0 +1,3 @@ +$o-color-palette-number: 9; +$o-theme-color-palette-number: 9; +$o-gray-color-palette-number: 9; diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss index 762b498b75e..517a541c99a 100644 --- a/addons/website/static/src/scss/secondary_variables.scss +++ b/addons/website/static/src/scss/secondary_variables.scss @@ -3,23 +3,37 @@ // Colors //------------------------------------------------------------------------------ -// By default, all user color palette values are null. Each null value is automatically -// replaced with corresponsing color in color palette 1. -$-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))); +// Color palette +// ------------- + +// By default, all user color palette values are null. Each null value is +// automatically replaced with corresponsing colors in chosen default color +// palette. +$-palette-default: nth($o-color-palettes, $o-color-palette-number); +$o-color-palettes: append($o-color-palettes, map-merge($-palette-default, o-map-omit($o-user-color-palette))); + +// Theme color palette +// ------------------- // 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(( + $o-user-theme-color-palette: map-merge(( 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))); + ), o-map-omit($o-user-theme-color-palette)); } -// By default, all user theme color palette values are null. Each null value is automatically -// replaced with corresponsing color in theme color palette 1. -$-palette-1: nth($o-theme-color-palettes, 1); -$o-theme-color-palettes: append($o-theme-color-palettes, map-merge($-palette-1, o-map-omit($o-user-theme-color-palette))); +// By default, all user theme color palette values are null. Each null value is +// automatically replaced with corresponsing colors in chosen default theme +// color palette. +$-palette-default: nth($o-theme-color-palettes, $o-theme-color-palette-number); +$o-theme-color-palettes: append($o-theme-color-palettes, map-merge($-palette-default, o-map-omit($o-user-theme-color-palette))); + + +// Enable last color and theme color palettes, which are now the user customized +// color palettes +$o-color-palette-number: length($o-color-palettes); +$o-theme-color-palette-number: length($o-theme-color-palettes); diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index 56cac3b3feb..0c78fb1250d 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -62,7 +62,6 @@