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

[IMP] website: improve customize dialog UI for font selection

Browse Source 
Replace the font selection UI by a dropdown. Make the system generic
so that a dropdown can be used for any set of options.

task-1942241

closes odoo/odoo#32437

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>


Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Kaushalya Mandaliya
2019-04-30 14:30:09 +00:00
committed by qsm-odoo
co-authored by qsm-odoo
parent 97780e5b8b
commit 3f18d67f9e
4 changed files with 132 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/widgets/theme.js
+56 -25
View File
@@ -293,7 +293,7 @@ var ThemeCustomizeDialog = Dialog.extend({
var $optionsContainer = $navContent.find('.o_options_container');
// Process content items
_processItems($content.children(), $optionsContainer);
_processItems($content.children(), $optionsContainer, false);
});
this.$('[title]').tooltip();
@@ -310,13 +310,13 @@ var ThemeCustomizeDialog = Dialog.extend({
this._setActive();
this._updateValues();
function _processItems($items, $container) {
function _processItems($items, $container, isSelectionContainer) {
var optionsName = _.uniqueId('option-');
var alone = ($items.length === 1);
_.each($items, function (item) {
var $item = $(item);
var $col;
var $element;
switch (item.tagName) {
case 'OPT':
@@ -331,14 +331,14 @@ var ThemeCustomizeDialog = Dialog.extend({
}, $item.data());
// Build the options template
var $option = $(core.qweb.render('website.theme_customize_modal_option', _.extend({
$element = $(core.qweb.render('website.theme_customize_modal_option', _.extend({
alone: alone,
name: xmlid === undefined ? _.uniqueId('option-') : optionsName,
id: $item.attr('id') || _.uniqueId('o_theme_customize_input_id_'),
checked: xmlid === undefined || xmlid && (!_.difference(self._getXMLIDs($item), data.enabled).length),
widget: widgetName,
}, renderingOptions)));
$option.find('input')
$element.find('input')
.addClass('o_theme_customize_option_input')
.attr({
'data-xmlid': xmlid,
@@ -349,36 +349,48 @@ var ThemeCustomizeDialog = Dialog.extend({
if (widgetName) {
var $widget = $(core.qweb.render('website.theme_customize_widget_' + widgetName, renderingOptions));
$option.find('label').append($widget);
$element.find('label').append($widget);
}
var $final;
if ($container.hasClass('form-row')) {
$final = $('<div/>', {
class: _.str.sprintf('col-%s', $item.data('col') || 6),
});
$final.append($option);
} else {
$final = $option;
if (isSelectionContainer) {
$element.removeClass("my-1 flex-grow-0").addClass("dropdown-item p-0");
$element.find('label')
.addClass('justify-content-start')
.attr('data-font-id', $item.data('font'));
}
$final.attr('data-depends', $item.data('depends'));
$container.append($final);
break;
case 'LIST':
var $listContainer = $('<div/>', {class: 'py-1 px-2 o_theme_customize_option_list'});
$col = $('<div/>', {
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);
_processItems($item.children(), $listContainer);
$element = $('<div/>', {class: 'py-1 px-2 o_theme_customize_option_list'});
_processItems($item.children(), $element, false);
break;
case 'SELECTION':
$element = $(core.qweb.render('website.theme_customize_dropdown_option'));
_processItems($item.children(), $element.find('.o_theme_customize_selection'), true);
break;
default:
_processItems($item.children(), $container);
break;
_processItems($item.children(), $container, false);
return;
}
if ($container.hasClass('form-row')) {
var $col = $('<div/>', {
class: _.str.sprintf('col-%s', $item.data('col') || 6),
});
if (item.tagName === 'LIST') {
$col.addClass('mt-2');
$col.append($('<h6/>', {text: $item.attr('string')}));
}
$col.append($element);
$element = $col;
}
$element.attr('data-depends', $item.data('depends'));
$container.append($element);
});
}
},
@@ -668,6 +680,25 @@ var ThemeCustomizeDialog = Dialog.extend({
$span.text(value);
}
});
_.each(this.$('.o_theme_customize_dropdown'), function (dropdown) {
var $dropdown = $(dropdown);
$dropdown.find('.dropdown-item.active').removeClass('active');
var $checked = $dropdown.find('label.checked');
$checked.closest('.dropdown-item').addClass('active');
var classes = 'btn btn-light dropdown-toggle w-100 o_theme_customize_dropdown_btn';
if ($checked.data('font-id')) {
classes += _.str.sprintf(' o_theme_customize_option_font_%s', $checked.data('font-id'));
}
var $btn = $('<button/>', {
type: 'button',
class: classes,
'data-toggle': 'dropdown',
html: $dropdown.find('label.checked > span').text() || '&#8203;',
});
$dropdown.find('.o_theme_customize_dropdown_btn').remove();
$dropdown.prepend($btn);
});
},
//--------------------------------------------------------------------------
addons/website/static/src/scss/website.edit_mode.scss
+31 -18
View File
@@ -11,7 +11,6 @@
width: 96%;
max-width: 550px;
}
.modal-header {
background-color: $o-brand-odoo;
color: white;
@@ -26,7 +25,6 @@
color: white;
}
.nav {
padding: 0;
@@ -50,6 +48,12 @@
}
}
.dropdown-menu {
position: static !important;
transform: none !important;
width: 100%;
}
.o_theme_customize_option {
position: relative;
width: 100%;
@@ -72,8 +76,6 @@
min-height: 24px;
margin: 0;
padding: 8px;
border: 2px solid transparent;
background-color: $o-brand-lightsecondary;
text-align: center;
font-size: 14px;
line-height: 1;
@@ -86,26 +88,18 @@
background-color: rgba(0, 32, 64, 0.03);
}
&.checked {
border-color: $o-brand-odoo;
color: $o-brand-odoo;
}
&.o_switch {
justify-content: flex-start;
}
}
&:not(.dropdown-item) label {
border: 2px solid transparent;
background-color: $o-brand-lightsecondary;
$i: 1;
@each $font in $o-theme-fonts {
&.o_theme_customize_option_font_#{$i} {
font-family: if($font, $font, $font-family-base);
> label > span::before {
content: nth($o-theme-font-names, $i);
}
&.checked {
border-color: $o-brand-odoo;
color: $o-brand-odoo;
}
$i: $i + 1;
}
&.o_theme_customize_with_widget {
@@ -182,6 +176,25 @@
.o_theme_customize_option_list {
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05);
}
.o_theme_customize_dropdown_btn {
background-color: $o-brand-lightsecondary;
}
$i: 1;
@each $font in $o-theme-fonts {
.o_theme_customize_option_font_#{$i} {
font-family: if($font, $font, $font-family-base);
&.o_theme_customize_option > label > span,
&.dropdown-toggle {
&::before {
content: nth($o-theme-font-names, $i);
}
}
}
$i: $i + 1;
}
}
addons/website/static/src/xml/website.editor.xml
+5
View File
@@ -48,6 +48,11 @@
</label>
</div>
</t>
<t t-name="website.theme_customize_dropdown_option">
<div t-attf-class="dropdown o_theme_customize_dropdown">
<div class="dropdown-menu rounded-0 o_theme_customize_selection" role="menu"/>
</div>
</t>
<t t-name="website.theme_customize_widget_color">
<div t-attf-class="o_theme_customize_color o_theme_customize_color_#{color}"
t-att-data-color="color"
addons/website/views/website_templates.xml
+40 -28
View File
@@ -497,6 +497,10 @@
-> string = list's title
-> data-col (optional, default 6) = bootstrap column size for the list
<selection>: Declares a subset of options showed as a selection (dropdown)
-> data-col (optional, default 6) = bootstrap column size for the option
(ignored for options in a <list/>)
Other elements will be ignored and their children will be processed as if
that element was omitted, except that those children will be considered as
in a new set of option. That allows to wrap an option in a fake element to
@@ -568,37 +572,45 @@
<!-- Font options -->
<content id="theme_customize_content_fonts" string="Fonts" title="Choose your fonts">
<list id="theme_customize_content_fonts_title" string="Title">
<opt data-xmlid="" data-font="1"/>
<opt data-xmlid="website.option_font_title_02_variables" data-font="2"/>
<opt data-xmlid="website.option_font_title_03_variables" data-font="3"/>
<opt data-xmlid="website.option_font_title_04_variables" data-font="4"/>
<opt data-xmlid="website.option_font_title_05_variables" data-font="5"/>
<opt data-xmlid="website.option_font_title_06_variables" data-font="6"/>
<list string="Title">
<selection id="theme_customize_content_fonts_title">
<opt data-xmlid="" data-font="1"/>
<opt data-xmlid="website.option_font_title_02_variables" data-font="2"/>
<opt data-xmlid="website.option_font_title_03_variables" data-font="3"/>
<opt data-xmlid="website.option_font_title_04_variables" data-font="4"/>
<opt data-xmlid="website.option_font_title_05_variables" data-font="5"/>
<opt data-xmlid="website.option_font_title_06_variables" data-font="6"/>
</selection>
</list>
<list id="theme_customize_content_fonts_body" string="Body">
<opt data-xmlid="" data-font="1"/>
<opt data-xmlid="website.option_font_body_02_variables" data-font="2"/>
<opt data-xmlid="website.option_font_body_03_variables" data-font="3"/>
<opt data-xmlid="website.option_font_body_04_variables" data-font="4"/>
<opt data-xmlid="website.option_font_body_05_variables" data-font="5"/>
<opt data-xmlid="website.option_font_body_06_variables" data-font="6"/>
<list string="Body">
<selection id="theme_customize_content_fonts_body">
<opt data-xmlid="" data-font="1"/>
<opt data-xmlid="website.option_font_body_02_variables" data-font="2"/>
<opt data-xmlid="website.option_font_body_03_variables" data-font="3"/>
<opt data-xmlid="website.option_font_body_04_variables" data-font="4"/>
<opt data-xmlid="website.option_font_body_05_variables" data-font="5"/>
<opt data-xmlid="website.option_font_body_06_variables" data-font="6"/>
</selection>
</list>
<list id="theme_customize_content_fonts_button" string="Button">
<opt data-xmlid="" data-font="1"/>
<opt data-xmlid="website.option_font_button_02_variables" data-font="2"/>
<opt data-xmlid="website.option_font_button_03_variables" data-font="3"/>
<opt data-xmlid="website.option_font_button_04_variables" data-font="4"/>
<opt data-xmlid="website.option_font_button_05_variables" data-font="5"/>
<opt data-xmlid="website.option_font_button_06_variables" data-font="6"/>
<list string="Button">
<selection id="theme_customize_content_fonts_button">
<opt data-xmlid="" data-font="1"/>
<opt data-xmlid="website.option_font_button_02_variables" data-font="2"/>
<opt data-xmlid="website.option_font_button_03_variables" data-font="3"/>
<opt data-xmlid="website.option_font_button_04_variables" data-font="4"/>
<opt data-xmlid="website.option_font_button_05_variables" data-font="5"/>
<opt data-xmlid="website.option_font_button_06_variables" data-font="6"/>
</selection>
</list>
<list id="theme_customize_content_fonts_navbar" string="Navbar">
<opt data-xmlid="" data-font="1"/>
<opt data-xmlid="website.option_font_navbar_02_variables" data-font="2"/>
<opt data-xmlid="website.option_font_navbar_03_variables" data-font="3"/>
<opt data-xmlid="website.option_font_navbar_04_variables" data-font="4"/>
<opt data-xmlid="website.option_font_navbar_05_variables" data-font="5"/>
<opt data-xmlid="website.option_font_navbar_06_variables" data-font="6"/>
<list string="Navbar">
<selection id="theme_customize_content_fonts_navbar">
<opt data-xmlid="" data-font="1"/>
<opt data-xmlid="website.option_font_navbar_02_variables" data-font="2"/>
<opt data-xmlid="website.option_font_navbar_03_variables" data-font="3"/>
<opt data-xmlid="website.option_font_navbar_04_variables" data-font="4"/>
<opt data-xmlid="website.option_font_navbar_05_variables" data-font="5"/>
<opt data-xmlid="website.option_font_navbar_06_variables" data-font="6"/>
</selection>
</list>
</content>
</div>