Skip to content
Permalink
Browse files

[IMP] website: UI Improvement

Replaced font selection options with a dropdown.

Task-ID: 1942241
closes #32437
  • Loading branch information...
kma-odoo committed Mar 29, 2019
1 parent 5b2cf15 commit e885572bd28ba43b4c83ef9b83af6f9e9dfd8914
@@ -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,7 +310,7 @@ 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);

@@ -328,6 +328,7 @@ var ThemeCustomizeDialog = Dialog.extend({
string: $item.attr('string') || data.names[xmlid.split(',')[0].trim()],
icon: $item.data('icon'),
font: $item.data('font'),
selection: isSelectionContainer,
}, $item.data());

// Build the options template
@@ -361,6 +362,14 @@ var ThemeCustomizeDialog = Dialog.extend({
} else {
$final = $option;
}

if (isSelectionContainer) {
var $label = $option.find('label');
$option.removeClass("my-1 flex-grow-0").addClass("dropdown-item p-0");
$label.prepend($('<i>', { 'class': 'fa fa-check mr-1' })).addClass('justify-content-start');
$label.attr('data-font-id', $item.data('font'));
}

$final.attr('data-depends', $item.data('depends'));
$container.append($final);
break;
@@ -372,11 +381,21 @@ var ThemeCustomizeDialog = Dialog.extend({
'data-depends': $item.data('depends'),
}).append($('<h6/>', {text: $item.attr('string')}), $listContainer);
$container.append($col);
_processItems($item.children(), $listContainer);
_processItems($item.children(), $listContainer, false);
break;

case 'SELECTION':
var $listContainer = $(core.qweb.render('website.theme_customize_dropdown_option'));
$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.find('div.o_theme_customize_selection'), true);
break;

default:
_processItems($item.children(), $container);
_processItems($item.children(), $container, false);
break;
}
});
@@ -668,6 +687,21 @@ var ThemeCustomizeDialog = Dialog.extend({
$span.text(value);
}
});
_.each(this.$('.o_theme_customize_option_list.dropdown'), function (dropdown) {
var $dropdown = $(dropdown);
var classes = "btn btn-light dropdown-toggle w-100 o_theme_customize_dropdown_btn";
if ($dropdown.find('label.checked').data('font-id')) {
classes += _.str.sprintf(" o_theme_customize_option_font_%s", $dropdown.find('label.checked').data('font-id'));
}
var $btn = $('<button/>', {
'class': classes,
'data-toggle': 'dropdown',
'type': 'button',
'text': $dropdown.find('label.checked > span').text(),
});
$dropdown.find('.o_theme_customize_dropdown_btn').remove();
$dropdown.prepend($btn);
});
},

//--------------------------------------------------------------------------
@@ -11,6 +11,9 @@
width: 96%;
max-width: 550px;
}
.modal-body {
min-height: 450px;
}

.modal-header {
background-color: $o-brand-odoo;
@@ -95,17 +98,19 @@
justify-content: flex-start;
}
}

$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);
&.dropdown-item {
> label {
border: none;
background-color: transparent;
> i.fa-check {
visibility: hidden;
}
&.checked {
> i.fa-check {
visibility: visible;
}
}
}
$i: $i + 1;
}

&.o_theme_customize_with_widget {
@@ -181,6 +186,32 @@

.o_theme_customize_option_list {
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05);

button.o_theme_customize_dropdown_btn {
background-color: $o-brand-lightsecondary;
}

.dropdown-menu.o_theme_customize_selection {
max-height: 430px;
overflow-y: auto;
}

// have some space between font name and caret
> button[class*="o_theme_customize_option_font_"]::before {
margin-right: $caret-spacing;
}

$i: 1;
@each $font in $o-theme-fonts {
.o_theme_customize_option_font_#{$i} {
font-family: if($font, $font, $font-family-base);
}
> button.o_theme_customize_option_font_#{$i}::before,
.dropdown-item.o_theme_customize_option_font_#{$i} > label > span::before {
content: nth($o-theme-font-names, $i);
}
$i: $i + 1;
}
}
}

@@ -48,6 +48,11 @@
</label>
</div>
</t>
<t t-name="website.theme_customize_dropdown_option">
<div t-attf-class="dropdown py-1 px-2 o_theme_customize_option_list">
<div class="dropdown-menu o_theme_customize_selection" role="menu" aria-labelledby="dropdownMenuButton"/>
</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"
@@ -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)
-> string = selection's title
-> data-col (optional, default 6) = bootstrap column size for the selection
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,38 +572,38 @@

<!-- Font options -->
<content id="theme_customize_content_fonts" string="Fonts" title="Choose your fonts">
<list id="theme_customize_content_fonts_title" string="Title">
<selection 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>
<list id="theme_customize_content_fonts_body" string="Body">
</selection>
<selection 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>
<list id="theme_customize_content_fonts_button" string="Button">
</selection>
<selection 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>
<list id="theme_customize_content_fonts_navbar" string="Navbar">
</selection>
<selection 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>
</selection>
</content>
</div>
</template>

0 comments on commit e885572

Please sign in to comment.
You can’t perform that action at this time.