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

[FIX] website: review website customize dialog

Browse Source 
Make some changes which are needed for theme migration.

- Theme colors as user colors fallback only (not hard choice)
- Review option dependency system
This commit is contained in:
qsm-odoo
2018-09-03 18:40:35 +02:00
parent 017e71322b
commit cde3c9261e
15 changed files with 118 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/scss/bootstrap_overridden.scss
Vendored
+1 -1
View File
@@ -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');
}
addons/website/static/src/js/widgets/theme.js
+10 -9
View File
@@ -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 = $('<div/>', {class: (icon ? 'col-4' : (colorPalette ? 'col-12' : 'col-6'))});
$col = $('<div/>', {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 = $('<div/>', {
$col = $('<div/>', {
class: 'col-12',
}).appendTo($container);
@@ -217,7 +218,7 @@ var ThemeCustomizeDialog = Dialog.extend({
case 'LIST':
var $listContainer = $('<div/>', {class: 'py-1 px-2 o_theme_customize_option_list'});
var $col = $('<div/>', {
$col = $('<div/>', {
class: 'col-6 mt-2',
'data-depends': $item.data('depends'),
}).append($('<h6/>', {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')) {
addons/website/static/src/scss/options/colors/option_color_user_variables.scss
-4
View File
@@ -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);
addons/website/static/src/scss/options/colors/option_colors_01_variables.scss
+3
View File
@@ -0,0 +1,3 @@
$o-color-palette-number: 1;
$o-theme-color-palette-number: 1;
$o-gray-color-palette-number: 1;
addons/website/static/src/scss/options/colors/option_colors_02_variables.scss
+3
View File
@@ -0,0 +1,3 @@
$o-color-palette-number: 2;
$o-theme-color-palette-number: 2;
$o-gray-color-palette-number: 2;
addons/website/static/src/scss/options/colors/option_colors_03_variables.scss
+3
View File
@@ -0,0 +1,3 @@
$o-color-palette-number: 3;
$o-theme-color-palette-number: 3;
$o-gray-color-palette-number: 3;
addons/website/static/src/scss/options/colors/option_colors_04_variables.scss
+3
View File
@@ -0,0 +1,3 @@
$o-color-palette-number: 4;
$o-theme-color-palette-number: 4;
$o-gray-color-palette-number: 4;
addons/website/static/src/scss/options/colors/option_colors_05_variables.scss
+3
View File
@@ -0,0 +1,3 @@
$o-color-palette-number: 5;
$o-theme-color-palette-number: 5;
$o-gray-color-palette-number: 5;
addons/website/static/src/scss/options/colors/option_colors_06_variables.scss
+3
View File
@@ -0,0 +1,3 @@
$o-color-palette-number: 6;
$o-theme-color-palette-number: 6;
$o-gray-color-palette-number: 6;
addons/website/static/src/scss/options/colors/option_colors_07_variables.scss
+3
View File
@@ -0,0 +1,3 @@
$o-color-palette-number: 7;
$o-theme-color-palette-number: 7;
$o-gray-color-palette-number: 7;
addons/website/static/src/scss/options/colors/option_colors_08_variables.scss
+3
View File
@@ -0,0 +1,3 @@
$o-color-palette-number: 8;
$o-theme-color-palette-number: 8;
$o-gray-color-palette-number: 8;
addons/website/static/src/scss/options/colors/option_colors_09_variables.scss
+3
View File
@@ -0,0 +1,3 @@
$o-color-palette-number: 9;
$o-theme-color-palette-number: 9;
$o-gray-color-palette-number: 9;
addons/website/static/src/scss/secondary_variables.scss
+24 -10
View File
@@ -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);
addons/website/static/src/xml/website.editor.xml
-1
View File
@@ -62,7 +62,6 @@
</t>
<t t-name="website.theme_customize_color_palette_button">
<button type="button"
t-att-disabled="colorPalette != 'user' ? 'disabled' : undefined"
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">
addons/website/views/website_templates.xml
+56 -5
View File
@@ -461,8 +461,19 @@
<div>
<!-- Color options -->
<content string="Colors" title="Choose the theme colors">
<opt data-xmlid="website.option_color_user_variables" data-color-palette="user" string="Choose your colors"/>
<opt data-xmlid="" data-color-palette="1" string="Default theme colors"/>
<more data-depends="theme_color_suggestions">
<opt data-xmlid="website.option_colors_01_variables" data-color-palette="1"/>
<opt data-xmlid="website.option_colors_02_variables" data-color-palette="2"/>
<opt data-xmlid="website.option_colors_03_variables" data-color-palette="3"/>
<opt data-xmlid="website.option_colors_04_variables" data-color-palette="4"/>
<opt data-xmlid="website.option_colors_05_variables" data-color-palette="5"/>
<opt data-xmlid="website.option_colors_06_variables" data-color-palette="6"/>
<opt data-xmlid="website.option_colors_07_variables" data-color-palette="7"/>
<opt data-xmlid="website.option_colors_08_variables" data-color-palette="8"/>
<opt data-xmlid="website.option_colors_09_variables" data-color-palette="9"/>
</more>
<opt data-xmlid="" data-color-palette="user" string="Choose your colors"/>
<list string="Menu text">
<opt string="Dark" data-xmlid="" data-reload="/"/>
@@ -511,10 +522,50 @@
</div>
</template>
<!-- Color options -->
<template id="option_color_user_variables" inherit_id="website._assets_secondary_variables" active="True">
<!-- Those are independant from the user palette and act as default for it -->
<template id="option_colors_01_variables" inherit_id="website._assets_primary_variables" active="True">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_color_user_variables.scss"/>
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_colors_01_variables.scss"/>
</xpath>
</template>
<template id="option_colors_02_variables" inherit_id="website._assets_primary_variables" active="False">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_colors_02_variables.scss"/>
</xpath>
</template>
<template id="option_colors_03_variables" inherit_id="website._assets_primary_variables" active="False">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_colors_03_variables.scss"/>
</xpath>
</template>
<template id="option_colors_04_variables" inherit_id="website._assets_primary_variables" active="False">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_colors_04_variables.scss"/>
</xpath>
</template>
<template id="option_colors_05_variables" inherit_id="website._assets_primary_variables" active="False">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_colors_05_variables.scss"/>
</xpath>
</template>
<template id="option_colors_06_variables" inherit_id="website._assets_primary_variables" active="False">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_colors_06_variables.scss"/>
</xpath>
</template>
<template id="option_colors_07_variables" inherit_id="website._assets_primary_variables" active="False">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_colors_07_variables.scss"/>
</xpath>
</template>
<template id="option_colors_08_variables" inherit_id="website._assets_primary_variables" active="False">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_colors_08_variables.scss"/>
</xpath>
</template>
<template id="option_colors_09_variables" inherit_id="website._assets_primary_variables" active="False">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/option_colors_09_variables.scss"/>
</xpath>
</template>