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

[IMP] website: restructure the header formatting options

Browse Source 
This commit allows to restructure the header formatting options. The
font style option is now alone on one line. A new line of options is
added with the font size, font color and the alignment of the navigation
elements. Note that the font color option is a brand new one.

task-2904507

Part-of: odoo/odoo#99732
This commit is contained in:
Guillaume (gdi)
2023-10-12 08:09:27 +00:00
committed by qsm-odoo
parent 85befe55ba
commit d54028e5ed
5 changed files with 43 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+10
View File
@@ -1634,6 +1634,16 @@
}
}
&.o_we_header_font_row > div {
justify-content: space-between;
we-select {
max-width: fit-content;
min-width: fit-content;
margin-right: 0px !important;
}
}
> div {
display: flex;
align-items: center;
addons/website/static/src/js/editor/snippets.options.js
+4 -4
View File
@@ -2398,12 +2398,12 @@ options.registry.HeaderNavbar = options.Class.extend({
async updateUI() {
await this._super(...arguments);
// For all header templates except those in the following array, change
// the label of the option to "Mobile Alignment" (instead of
// the title of the option to "Mobile Alignment" (instead of
// "Alignment") because it only impacts the mobile view.
if (!["'default'", "'hamburger'", "'sidebar'", "'magazine'", "'hamburger-full'", "'slogan'"]
.includes(weUtils.getCSSVariableValue("header-template"))) {
const alignmentOptionTitleEl = this.el.querySelector('[data-name="header_alignment_opt"] we-title');
alignmentOptionTitleEl.textContent = _t("Mobile Alignment");
.includes(weUtils.getCSSVariableValue("header-template"))) {
this.el.querySelector("[data-name='header_alignment_opt']").title =
_t("Mobile Alignment");
}
},
addons/website/static/src/scss/primary_variables.scss
+1
View File
@@ -2022,6 +2022,7 @@ $o-base-website-values-palette: (
'header-template': 'default', // 'default' / 'hamburger' / 'vertical' / 'sidebar'
'header-font-size': null, // Default to BS (normal font-size)
'header-text-color': null,
'header-links-style': 'default', // 'default' / 'fill' / 'outline' / 'pills' / 'block' / 'border-bottom'
'logo-height': null, // Default to navbar height (see portal)
'hamburger-type': 'default', // 'default' / 'off-canvas'
addons/website/static/src/scss/website.scss
+10
View File
@@ -309,6 +309,16 @@ $-seen-urls: ();
@include o-add-gradient('menu-gradient');
}
// TODO this should be reviewed. While it allowed to choose a color for the
// navbar text, there is no :hover effect, the active item is not visible and
// the selector is probably too specific and should rather be about extending
// bootstrap if possible.
#wrapwrap:not(.o_header_overlay) header, header.o_header_is_scrolled {
.nav-item > .nav-link > *, .nav-item > .nav-link::after, .js_language_selector span, .badge {
color: o-website-value('header-text-color') !important;
}
}
$-header-nav-link-height: $nav-link-height;
@if o-website-value('header-font-size') {
$-header-nav-link-height: o-website-value('header-font-size') * $line-height-base + $nav-link-padding-y * 2;
addons/website/views/snippets/snippets.xml
+18 -13
View File
@@ -900,17 +900,6 @@
data-selector="#wrapwrap > header nav.navbar"
data-no-check="true"
groups="website.group_website_designer">
<!-- Generic alignment option controling all the template at once. -->
<!-- Currently needed to be this way as the SCSS variable controls -->
<!-- the mobile alignement which is the same for all templates. -->
<we-select string="Alignment"
data-name="header_alignment_opt"
data-variable="hamburger-position"
data-reload="/">
<we-button data-customize-website-views="" data-customize-website-variable="'left'">Left</we-button>
<we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_hamburger_align_center, website.template_header_slogan_align_center" data-customize-website-variable="'center'">Center</we-button>
<we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right, website.template_header_slogan_align_right" data-customize-website-variable="'right'">Right</we-button>
</we-select>
<!-- Generic Hamburger Options (mobile or not) -->
<we-select string="Hamburger Type"
@@ -933,9 +922,25 @@
<we-button data-customize-website-views="website.option_header_off_canvas_logo_show">Image</we-button>
</we-select>
<we-row string="Font">
<we-fontfamilypicker data-variable="navbar-font"/>
<we-fontfamilypicker string="Font" data-variable="navbar-font"/>
<we-row string="Format" class="o_we_header_font_row">
<we-input data-customize-website-variable="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
<we-colorpicker data-variable="header-text-color" data-customize-website-variable=""/>
<!-- Generic alignment option controling all the template at once. -->
<!-- Currently needed to be this way as the SCSS variable controls -->
<!-- the mobile alignement which is the same for all templates. -->
<we-select class="o_we_icon_select" data-name="header_alignment_opt" data-variable="hamburger-position" data-reload="/" title="Alignment">
<we-button data-customize-website-views=""
data-customize-website-variable="'left'"
data-icon="fa-align-left"/>
<we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_hamburger_align_center, website.template_header_slogan_align_center"
data-customize-website-variable="'center'"
data-icon="fa-align-center"/>
<we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right, website.template_header_slogan_align_right"
data-customize-website-variable="'right'"
data-icon="fa-align-right"/>
</we-select>
</we-row>
<we-select string="Links Style" data-variable="header-links-style" data-reload="/">