From be6a8cfde76515afb06792a0287219d34a4f2e3f Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 28 May 2020 10:04:34 +0000 Subject: [PATCH] [IMP] website, web, *: allow to choose website font-size *: 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 --- .../scss/bootstrap_overridden_frontend.scss | 2 +- .../static/src/scss/primary_variables.scss | 3 --- .../static/src/scss/web_editor.variables.scss | 23 +++++++++++++++++++ .../static/src/scss/bootstrap_overridden.scss | 9 ++++++++ .../static/src/scss/primary_variables.scss | 15 ++++++++++++ .../static/src/scss/secondary_variables.scss | 22 ++++++++++++++++++ addons/website/views/snippets/snippets.xml | 1 + 7 files changed, 71 insertions(+), 4 deletions(-) diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss index b36ccc0ae24..d7f30a8d869 100644 --- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss +++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss @@ -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; diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss index 6610cd97c73..b241ebfad19 100644 --- a/addons/web/static/src/scss/primary_variables.scss +++ b/addons/web/static/src/scss/primary_variables.scss @@ -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; diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index c178844b095..d0fa36444c4 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -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 { diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss index 011e16511f5..89b6ce93036 100644 --- a/addons/website/static/src/scss/bootstrap_overridden.scss +++ b/addons/website/static/src/scss/bootstrap_overridden.scss @@ -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; diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss index 02eef522380..c702c00b21e 100644 --- a/addons/website/static/src/scss/primary_variables.scss +++ b/addons/website/static/src/scss/primary_variables.scss @@ -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; diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss index 68094734a72..a6292647ba6 100644 --- a/addons/website/static/src/scss/secondary_variables.scss +++ b/addons/website/static/src/scss/secondary_variables.scss @@ -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; diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index cf06cc51ddc..c1513a0c96d 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -654,6 +654,7 @@ +