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

[REF] website: review theme dialog engine

Browse Source 
Refactor the code to remove useless parts, simplify behaviors and allow
more customizations in future tasks.

closes odoo/odoo#28167
This commit is contained in:
qsm-odoo
2018-10-26 09:29:53 +00:00
parent 1bf58d282f
commit 8c756a32a0
5 changed files with 89 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/controllers/main.py
+5 -3
View File
@@ -362,15 +362,17 @@ class Website(Home):
return [enable, disable]
@http.route(['/website/theme_customize'], type='json', auth="public", website=True)
def theme_customize(self, enable, disable, get_bundle=False):
def theme_customize(self, enable=None, disable=None, get_bundle=False):
""" enable or Disable lists of ``xml_id`` of the inherit templates """
def set_active(xml_ids, active):
if xml_ids:
real_ids = self.get_view_ids(xml_ids)
request.env['ir.ui.view'].browse(real_ids).write({'active': active})
set_active(disable, False)
set_active(enable, True)
if disable:
set_active(disable, False)
if enable:
set_active(enable, True)
if get_bundle:
context = dict(request.context)
addons/website/static/src/js/widgets/theme.js
+25 -60
View File
@@ -154,72 +154,45 @@ var ThemeCustomizeDialog = Dialog.extend({
switch (item.tagName) {
case 'OPT':
var colorPalette = $item.data('colorPalette') === 'user';
var icon = $item.data('icon');
var widgetName = $item.data('widget');
// Build the options template
var $multiChoiceLabel = $(core.qweb.render('website.theme_customize_modal_option', {
var $option = $(core.qweb.render('website.theme_customize_modal_option', {
name: optionsName,
id: $item.attr('id') || _.uniqueId('o_theme_customize_input_id_'),
string: $item.attr('string'),
icon: icon,
color: $item.data('color'),
icon: $item.data('icon'),
font: $item.data('font'),
colorPalette: colorPalette,
xmlid: $item.data('xmlid'),
enable: $item.data('enable'),
disable: $item.data('disable'),
reload: $item.data('reload'),
widget: widgetName,
}));
$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 (widgetName) {
var $widget = $(core.qweb.render('website.theme_customize_' + widgetName));
$option.append($widget);
}
if ($container.hasClass('form-row')) {
$col = $('<div/>', {class: (icon ? 'col-4' : (colorPalette ? 'col-12' : 'col-6'))});
$col.append($multiChoiceLabel);
$col = $('<div/>', {
class: _.str.sprintf('col-%s', $item.data('col') || 6),
});
$col.append($option);
$container.append($col);
} else {
$container.append($multiChoiceLabel);
$container.append($option);
}
break;
case 'MORE':
var collapseID = _.uniqueId('collapse-');
$col = $('<div/>', {
class: 'col-12',
}).appendTo($container);
var string = $item.attr('string');
if (string) {
var $button = $('<button/>', {
'type': 'button',
class: 'btn btn-primary d-block mx-auto mt-3 collapsed',
'data-toggle': 'collapse',
'data-target': "#" + collapseID,
text: string,
});
$col.append($button);
}
var $collapse = $('<div/>',{
id: collapseID,
class: 'collapse form-row justify-content-between mt-3',
'data-depends': $item.data('depends'),
});
$col.append($collapse);
_processItems($item.children(), $collapse);
break;
case 'LIST':
var $listContainer = $('<div/>', {class: 'py-1 px-2 o_theme_customize_option_list'});
$col = $('<div/>', {
class: 'col-6 mt-2',
class: _.str.sprintf('col-%s mt-2', $item.data('col') || 6),
'data-depends': $item.data('depends'),
}).append($('<h6/>', {text: $item.attr('string')}), $listContainer);
$container.append($col);
@@ -353,21 +326,13 @@ var ThemeCustomizeDialog = Dialog.extend({
$set.prop('checked', checked).closest('label').toggleClass('checked', checked);
});
// Mark the collapsed section as visible if their dependencies are met
var $collapsedElements = this.$('[data-depends]');
_.each($collapsedElements, function (collapsed) {
var $collapsed = $(collapsed);
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')) {
$collapsed.collapse(enabled ? 'show' : 'hide');
} else {
$collapsed.toggleClass('d-none', !enabled);
}
// Make the hidden sections visible if their dependencies are met
_.each(this.$('[data-depends]'), function (hidden) {
var $hidden = $(hidden);
var depends = $hidden.data('depends');
var nbDependencies = depends ? depends.split(',').length : 0;
var enabled = self._getInputs(depends).filter(':checked').length === nbDependencies;
$hidden.toggleClass('d-none', !enabled);
});
},
/**
@@ -377,8 +342,8 @@ var ThemeCustomizeDialog = Dialog.extend({
if (reload || config.debug === 'assets') {
window.location.href = $.param.querystring('/website/theme_customize_reload', {
href: window.location.href,
enable: enable.join(','),
disable: disable.join(','),
enable: (enable || []).join(','),
disable: (disable || []).join(','),
tab: this.$('.nav-link.active').parent().index(),
});
return $.Deferred();
@@ -538,7 +503,7 @@ var ThemeCustomizeDialog = Dialog.extend({
},
});
}).then(function () {
self.$('#' + $color.closest('.o_theme_customize_color_previews').data('depends')).click();
return self._updateStyle();
});
});
colorpicker.open();
addons/website/static/src/scss/website.edit_mode.scss
-4
View File
@@ -86,10 +86,6 @@
line-height: 1;
cursor: pointer;
&.o_theme_customize_option_palette_label {
display: none !important;
}
&.checked {
border-color: $o-brand-odoo;
color: $o-brand-odoo;
addons/website/static/src/xml/website.editor.xml
+31 -29
View File
@@ -22,45 +22,47 @@
<t t-name="website.theme_customize_modal_option">
<div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''}">
<img t-if="icon" t-att-src="icon"/>
<label t-attf-class="d-flex align-items-center justify-content-center text-center #{color ? 'bg-' + color : ''} #{colorPalette ? 'o_theme_customize_option_palette_label' : ''}">
<label t-attf-class="#{widget ? 'd-none' : 'd-flex'} align-items-center justify-content-center text-center">
<input t-att-id="id" t-att-name="name" type="radio" class="o_theme_customize_option_input" t-att-data-xmlid="xmlid" t-att-data-enable="enable" t-att-data-disable="disable" t-att-data-reload="reload"/>
<span><t t-esc="string"/></span>
</label>
<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'), '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>
</div>
</t>
<t t-name="website.theme_customize_color_palette">
<div class="o_theme_customize_color_previews">
<div>
<h6>Main colors</h6>
<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>
</div>
<div>
<h6>Background colors</h6>
<t t-foreach="{'body': _t('Body'), 'menu': _t('Menus'), 'footer': _t('Footer')}" t-as="color">
<t t-call="website.theme_customize_color_palette_button"/>
</t>
</div>
<div>
<h6>Background colors</h6>
<t t-foreach="{'body': _t('Body'), 'menu': _t('Menus'), 'footer': _t('Footer')}" t-as="color">
<t t-call="website.theme_customize_color_palette_button"/>
</t>
</div>
<div>
<h6>Text colors</h6>
<t t-foreach="{'text': _t('Text'), 'h1': _t('Headings 1'), 'h2': _t('Headings 2'), 'h3': _t('Headings 3'), 'h4': _t('Headings 4'), 'h5': _t('Headings 5'), 'h6': _t('Headings 6')}" t-as="color">
<t t-call="website.theme_customize_color_palette_button"/>
</t>
</div>
<div>
<h6>State colors</h6>
<t t-foreach="{'success': _t('Success'), 'info': _t('Info'), 'warning': _t('Warning'), 'danger': _t('Error')}" t-as="color">
<t t-call="website.theme_customize_color_palette_button">
<t t-set="color_type" t-value="'theme'"/>
</t>
</div>
<div>
<h6>Text colors</h6>
<t t-foreach="{'text': _t('Text'), 'h1': _t('Headings 1'), 'h2': _t('Headings 2'), 'h3': _t('Headings 3'), 'h4': _t('Headings 4'), 'h5': _t('Headings 5'), 'h6': _t('Headings 6')}" t-as="color">
<t t-call="website.theme_customize_color_palette_button"/>
</t>
</div>
<div>
<h6>State colors</h6>
<t t-foreach="{'success': _t('Success'), 'info': _t('Info'), 'warning': _t('Warning'), 'danger': _t('Error')}" t-as="color">
<t t-call="website.theme_customize_color_palette_button">
<t t-set="color_type" t-value="'theme'"/>
</t>
</t>
</div>
</t>
</div>
</div>
</t>
<t t-name="website.theme_customize_color_palette_button">
<button type="button"
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-attf-class="btn btn-secondary #{color == 'primary' or color == 'secondary' ? 'd-none' : '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">
<span class="o_color_name"><t t-esc="color_value"/></span>
addons/website/views/website_templates.xml
+28 -25
View File
@@ -437,46 +437,49 @@
<opt>: Declares a new toggle option
-> id (optional) = an ID to associate to the option
-> string (optional) = option's text
-> data-icon (optional) = an image URL to set as option's background
-> data-xmlid (optional) = template(s) to enable if the input is checked (list of comma-separated xml ids)
-> data-enable (optional) = enable other options (list of comma-separated option ids)
-> data-disable (optional) = disable other options (list of comma-separated option ids)
-> data-reload (optional) = force the reloading of the page if the url matches the value
Otherwise, only the main assets are reloaded
-> data-font (optional) = indicates which fonts to use to style the option and adds
default sample text if no 'string' is specified
(see $o-theme-fonts in scss)
-> data-color-palette (optional) = indicates which color palette to use to style the option
(see $o-theme-color-palettes in scss)
-> data-font (optional) = indicates which fonts to use to style the
option and adds default sample text if no 'string' is specified
(see $o-theme-fonts in scss)
-> data-col (optional, default 6) = bootstrap column size for the option
(ignored for options in a <list/>)
<more>: Declares a subset of options which is hidden by default (with a button to show it)
-> string = button's text
-> data-xmlid (optional) = template(s) to enable if the input is
checked (list of comma-separated xml ids)
-> data-enable (optional) = enable other options (list of
comma-separated option ids)
-> data-disable (optional) = disable other options (list of
comma-separated option ids)
-> data-reload (optional) = force the reloading of the page if the url
matches the value. Otherwise, only the main assets are reloaded
-> data-widget (optional) = indicates which widget to use (available
widgets are: color_palette)
<list>: Declares a subset of options showed as a list
-> string = list's title
-> data-col (optional, default 6) = bootstrap column size for the list
-->
<template id="theme_customize">
<div>
<!-- Color options -->
<content id="theme_customize_content_colors" string="Colors" title="Choose the theme colors">
<opt data-xmlid="" data-color-palette="user" string="Choose your colors"/>
<opt data-widget="color_palette" data-col="12"/>
</content>
<!-- Layout Options -->
<content id="theme_customize_content_layout" string="Layout" title="Choose your layout">
<!-- In a <more/> so that it is on a new line if themes add options before -->
<more data-depends="">
<list string="Body">
<opt string="Full" data-xmlid="" data-icon="/website/static/src/img/options/layout-full.png"/>
<opt id="option_layout_boxed" string="Boxed" data-xmlid="website.option_layout_boxed_variables" data-icon="/website/static/src/img/options/layout-boxed.png"/>
</list>
<list string="Background">
<opt id="option_no_background" string="None" data-xmlid=""/>
<opt string="Choose an image" data-xmlid="website.option_custom_body_image"/>
<opt string="Choose a pattern" data-xmlid="website.option_custom_body_image, website.option_custom_body_pattern"/>
</list>
</more>
<list string="Body">
<opt string="Full" data-xmlid="" data-icon="/website/static/src/img/options/layout-full.png"/>
<opt id="option_layout_boxed" string="Boxed" data-xmlid="website.option_layout_boxed_variables" data-icon="/website/static/src/img/options/layout-boxed.png"/>
</list>
<list string="Background">
<opt id="option_no_background" string="None" data-xmlid=""/>
<opt string="Choose an image" data-xmlid="website.option_custom_body_image"/>
<opt string="Choose a pattern" data-xmlid="website.option_custom_body_image, website.option_custom_body_pattern"/>
</list>
</content>
<!-- Font options -->