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

[IMP] website, web, *: allow to choose website font-size

Browse Source 
*: web_editor

Note: this work also prepare the code to be able to support different
font configs per font family.

Part of https://github.com/odoo/odoo/pull/52220
task-2197038
This commit is contained in:
qsm-odoo
2020-06-01 10:48:08 +00:00
parent d345bc4df7
commit be6a8cfde7
7 changed files with 71 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/scss/bootstrap_overridden_frontend.scss
Vendored
+1 -1
View File
@@ -2,4 +2,4 @@
//
// Font, line-height, and color for body text, headings, and more.
$font-size-base: $o-theme-font-size-base !default;
$font-size-base: (14 / 16) * 1rem !default;
addons/web/static/src/scss/primary_variables.scss
-3
View File
@@ -112,6 +112,3 @@ $o-kanban-mobile-empty-height: $o-kanban-image-width;
// Used to manage spacing in complex dropdown menu
$o-kanban-dashboard-dropdown-complex-gap: 5px;
// For the frontend part
$o-theme-font-size-base: (14 / 16) * 1rem;
addons/web_editor/static/src/scss/web_editor.variables.scss
+23
View File
@@ -100,6 +100,7 @@ $o-we-toolbar-height: 32px;
// Used to preserve web_editor and website UI from themes customizations
@mixin o-w-preserve-base {
font-size: $o-we-font-size;
font-family: $o-we-font-family;
line-height: 1.5;
color: $o-we-color-divider;
@@ -116,6 +117,24 @@ $o-we-toolbar-height: 32px;
color: $o-we-color-dark;
font-weight: bold;
}
h1, .h1 {
font-size: 2.4 * $o-we-font-size;
}
h2, .h2 {
font-size: 1.5 * $o-we-font-size;
}
h3, .h3 {
font-size: 1.3 * $o-we-font-size;
}
h4, .h4 {
font-size: 1.2 * $o-we-font-size;
}
h5, .h5 {
font-size: 1.1 * $o-we-font-size;
}
h6, .h6 {
font-size: $o-we-font-size;
}
}
@mixin o-w-preserve-links {
@@ -190,6 +209,10 @@ $o-we-toolbar-height: 32px;
text-align: left;
}
}
.close {
font-size: 1.5 * $o-we-font-size;
}
}
@mixin o-w-preserve-tabs {
addons/website/static/src/scss/bootstrap_overridden.scss
Vendored
+9
View File
@@ -27,6 +27,15 @@ $body-color: palette-color('text') !default;
$font-family-sans-serif: $o-theme-font !default;
$font-size-base: o-website-value('font-size-base') !default;
$h1-font-size: $font-size-base * $o-theme-h1-font-size-multiplier !default;
$h2-font-size: $font-size-base * $o-theme-h2-font-size-multiplier !default;
$h3-font-size: $font-size-base * $o-theme-h3-font-size-multiplier !default;
$h4-font-size: $font-size-base * $o-theme-h4-font-size-multiplier !default;
$h5-font-size: $font-size-base * $o-theme-h5-font-size-multiplier !default;
$h6-font-size: $font-size-base * $o-theme-h6-font-size-multiplier !default;
$headings-font-family: $o-theme-headings-font !default;
$headings-color: palette-color('h1') !default;
addons/website/static/src/scss/primary_variables.scss
+15
View File
@@ -47,6 +47,7 @@ $o-theme-figcaption-opacity: 0.6;
$o-base-website-values-palette: (
'logo-height': null, // Default to navbar height (see portal)
'header-font-size': null, // Default to BS (normal font-size)
'font-size-base': 1rem, // Need a set value as the value is used in bootstrap_overridden files
'font-number': 1,
'headings-font-number': 1,
'navbar-font-number': 1,
@@ -68,6 +69,15 @@ $o-user-website-values: () !default;
// Fonts
//------------------------------------------------------------------------------
// Those are BS values, except BS hardcodes them inside the $hx-font-size
// variables directly and don't make them customizable.
$o-theme-h1-font-size-multiplier: 2.5 !default;
$o-theme-h2-font-size-multiplier: 2 !default;
$o-theme-h3-font-size-multiplier: 1.75 !default;
$o-theme-h4-font-size-multiplier: 1.5 !default;
$o-theme-h5-font-size-multiplier: 1.25 !default;
$o-theme-h6-font-size-multiplier: 1 !default;
$o-theme-fonts: (
('Roboto', sans-serif),
('Open Sans', sans-serif),
@@ -92,3 +102,8 @@ $o-theme-font-names: (
'Noto Serif',
'Arvo',
) !default;
// TODO improve this: we should not have multiple lists regarding fonts but
// instead a unique map: 'name' -> 'config', with config containing the font
// properties configuration + basic info (url, font-family).
$o-theme-font-configs: () !default;
addons/website/static/src/scss/secondary_variables.scss
+22
View File
@@ -3,11 +3,32 @@
// Website customizations
//------------------------------------------------------------------------------
@function o-add-font-config($values) {
$types: ('base': 'font-number', 'headings': 'headings-font-number', 'navbar': 'navbar-font-number', 'buttons': 'buttons-font-number');
@each $type, $number-label in $types {
$number: map-get($values, $number-label) or map-get($o-base-website-values-palette, $number-label);
@if $number <= length($o-theme-font-names) { // At least useful because of google fonts
$font-name: nth($o-theme-font-names, $number);
$font-config: map-get($o-theme-font-configs, $font-name);
@if $font-config {
$type-font-config: map-get($font-config, $type);
@if $type-font-config {
$values: map-merge($values, $type-font-config);
}
}
}
}
@return $values;
}
// By default, most website palette values are null. Each null value is
// automatically replaced with corresponsing values in chosen default values
// palette.
$-website-values-default: nth($o-website-values-palettes, $o-website-values-palette-number);
$-actual-user-website-values-palette: map-merge($-website-values-default, o-map-omit($o-user-website-values));
// Default font selection + User font selection have been merged, now need to
// add the right associated font config while still forcing any user override
$-actual-user-website-values-palette: map-merge(o-add-font-config($-actual-user-website-values-palette), o-map-omit($o-user-website-values));
$o-website-values-palettes: append($o-website-values-palettes, $-actual-user-website-values-palette);
// Enable last website values palette, which is now the user customized one
@@ -88,6 +109,7 @@ $o-theme-fonts: $-with-support-theme-fonts;
$o-theme-navbar-logo-height: o-website-value('logo-height') !default;
$o-theme-navbar-fixed-logo-height: o-website-value('fixed-logo-height') !default;
$o-theme-font: nth($o-theme-fonts, o-website-value('font-number')) !default;
$o-theme-headings-font: nth($o-theme-fonts, o-website-value('headings-font-number')) !default;
$o-theme-navbar-font: nth($o-theme-fonts, o-website-value('navbar-font-number')) !default;
addons/website/views/snippets/snippets.xml
+1
View File
@@ -654,6 +654,7 @@
<we-row string="Texts">
<we-colorpicker data-customize-website-color="" data-color="text"/>
<we-fontfamilypicker data-variable="font-number"/>
<we-input data-customize-website-variable="null" data-variable="font-size-base" data-unit="px" data-save-unit="rem"/>
</we-row>
<we-row string="Headings">
<we-colorpicker data-customize-website-color="" data-color="h1"/>