From 2b32d1431a33dea9052be3be4f9668a92cd0422e Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Mon, 24 Apr 2023 08:51:56 +0000 Subject: [PATCH 01/49] [IMP] web: increase base font-size to 14px task-2818586 task-3280695 Part-of: odoo/odoo#116641 --- addons/web/__manifest__.py | 1 + .../odoo_ui_icons/fonts/odoo_ui_icons.woff | Bin 5344 -> 5516 bytes .../odoo_ui_icons/fonts/odoo_ui_icons.woff2 | Bin 4416 -> 4584 bytes addons/web/static/lib/odoo_ui_icons/style.css | 1 + addons/web/static/src/legacy/scss/utils.scss | 2 +- .../static/src/scss/bootstrap_overridden.scss | 3 ++ addons/web/static/src/scss/functions.scss | 32 ++++++++++++++++++ .../static/src/scss/primary_variables.scss | 8 +++-- .../web/static/src/scss/utilities_custom.scss | 5 +++ .../src/views/kanban/kanban_controller.scss | 2 +- .../static/src/views/list/list_renderer.scss | 2 +- .../website/static/src/scss/website.ui.scss | 4 +-- 12 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 addons/web/static/src/scss/functions.scss diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py index 528806989b3..2aa8db8a18e 100644 --- a/addons/web/__manifest__.py +++ b/addons/web/__manifest__.py @@ -515,6 +515,7 @@ This module provides the core of the Odoo Web Client. 'web._assets_helpers': [ 'web/static/lib/bootstrap/scss/_functions.scss', 'web/static/lib/bootstrap/scss/_mixins.scss', + 'web/static/src/scss/functions.scss', 'web/static/src/scss/mixins_forwardport.scss', 'web/static/src/scss/bs_mixins_overrides.scss', 'web/static/src/legacy/scss/utils.scss', diff --git a/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff b/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff index cb7f1df8fddd9211e767cc92ea81ce5170d7e7f2..4e0b81b486a868949183daccf39652df6810c9d4 100644 GIT binary patch delta 3076 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 L*^*~m6e#+CtptJn delta 2913 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 diff --git a/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2 b/addons/web/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2 index 80cbce6c99c94bd99d8e7e2dead80cd5fa210e60..67778cfd18d42649b42433b1ea633a8c45e3553b 100644 GIT binary patch literal 4584 zcmVG01=M>0RR9100000000000000000000 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 diff --git a/addons/web/static/lib/odoo_ui_icons/style.css b/addons/web/static/lib/odoo_ui_icons/style.css index 5435c0a471a..ae4a56ef32b 100644 --- a/addons/web/static/lib/odoo_ui_icons/style.css +++ b/addons/web/static/lib/odoo_ui_icons/style.css @@ -42,3 +42,4 @@ .oi-text-wrap:before { content: '\e815'; } .oi-view-cohort:before { content: '\e816'; } .oi-view-list:before { content: '\e817'; } +.oi-gif-picker:before { content: '\e82e'; } diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss index fce07479e5a..3be4a4e0473 100644 --- a/addons/web/static/src/legacy/scss/utils.scss +++ b/addons/web/static/src/legacy/scss/utils.scss @@ -288,7 +288,7 @@ } // ------- Kanban records mixins ------- -@mixin o-kanban-record-title($font-size) { +@mixin o-kanban-record-title($font-size: 1em) { color: $headings-color; font-size: $font-size; font-weight: 500; diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index 29ed9a31a16..487ec033eeb 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -121,6 +121,9 @@ $font-weight-bolder: 700 !default; $font-family-sans-serif: $o-font-family-sans-serif !default; $font-size-base: $o-font-size-base !default; +$font-size-sm: $o-font-size-base-small !default; +$small-font-size: $font-size-sm !default; + $line-height-base: $o-line-height-base !default; $h1-font-size: $font-size-base * 2.0 !default; diff --git a/addons/web/static/src/scss/functions.scss b/addons/web/static/src/scss/functions.scss new file mode 100644 index 00000000000..127a3508b7f --- /dev/null +++ b/addons/web/static/src/scss/functions.scss @@ -0,0 +1,32 @@ +///============================================================================ +/// Odoo SCSS Functions +/// +/// Regroup functions that can be used at any stage of the compilation process. +///============================================================================ + + +/// Remove the unit of a length +/// --------------------------------------------------------------------------- +/// @param {Number} $-value +/// Number to remove unit from +/// @return {$-value} +/// Unitless number +@function o-strip-unit($-value) { + @if type-of($-value) == 'number' and not unitless($-value) { + @return $-value / ($-value * 0 + 1); + } + + @return $-value; +} + +/// Converts px to rem. +/// --------------------------------------------------------------------------- +/// @param {number or px value} $-px-value +/// The value to convert. +/// @param {number or px value } $-base +/// The base font-size +/// @return {number} +/// `$-px-value` converted in rem units +@function o-to-rem($-px-value, $-base: 16) { + @return (o-strip-unit($-px-value) / o-strip-unit($-base)) * 1rem; +} diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss index afad06533a7..1c60140af16 100644 --- a/addons/web/static/src/scss/primary_variables.scss +++ b/addons/web/static/src/scss/primary_variables.scss @@ -7,9 +7,11 @@ $o-webclient-color-scheme: bright !default; // Font sizes -$o-root-font-size: 12px !default; -$o-font-size-base: 13rem * (1px / $o-root-font-size) !default; -$o-font-size-base-touch: 15px !default; +$o-root-font-size: 1rem !default; +$o-font-size-base: o-to-rem(14px) !default; +$o-font-size-base-touch: o-to-rem(16px) !default; +$o-font-size-base-small: o-to-rem(13px) !default; +$o-font-size-base-smaller: o-to-rem(12px) !default; $o-line-height-base: 1.5 !default; // This is BS default // Global sans-serif fonts stack, defined here as we need to process diff --git a/addons/web/static/src/scss/utilities_custom.scss b/addons/web/static/src/scss/utilities_custom.scss index 44c17479ed3..0521dc92d68 100644 --- a/addons/web/static/src/scss/utilities_custom.scss +++ b/addons/web/static/src/scss/utilities_custom.scss @@ -242,3 +242,8 @@ $utilities: map-merge( } } } + +// Define a smaller font-size +.smaller { + font-size: $o-font-size-base-smaller; +} diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss index 1b182fbf4d0..b7cb583b8d6 100644 --- a/addons/web/static/src/views/kanban/kanban_controller.scss +++ b/addons/web/static/src/views/kanban/kanban_controller.scss @@ -103,7 +103,7 @@ } .o_kanban_record_title { - @include o-kanban-record-title($font-size: 13px); + @include o-kanban-record-title(); overflow-wrap: break-word; word-wrap: break-word; } diff --git a/addons/web/static/src/views/list/list_renderer.scss b/addons/web/static/src/views/list/list_renderer.scss index ec4286ffe1b..3bf2bec10cc 100644 --- a/addons/web/static/src/views/list/list_renderer.scss +++ b/addons/web/static/src/views/list/list_renderer.scss @@ -138,7 +138,7 @@ } .o_list_record_selector { - width: 40px; + width: 40px !important; // Force to 40px regardless by the font-size } .o_list_record_remove, .o_handle_cell { diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss index 399128bee8d..cc4be16277c 100644 --- a/addons/website/static/src/scss/website.ui.scss +++ b/addons/website/static/src/scss/website.ui.scss @@ -8,7 +8,7 @@ $-mini-nav-size: 40px; .o_frontend_to_backend_nav { @include o-position-absolute(0, auto, auto, 0); z-index: $zindex-modal; - font-size: $o-font-size-base * ($o-root-font-size / 16px); + font-size: $o-font-size-base; &::before { content: ""; @@ -40,7 +40,7 @@ $-mini-nav-size: 40px; } .o_frontend_to_backend_apps_menu { - font-size: $o-font-size-base * ($o-root-font-size / 14px); + font-size: $o-font-size-base; max-height: 70vh; overflow: auto; } From e81f4c1a560f74b77c44c1394c3ac53ffa1a6c24 Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Sun, 7 May 2023 14:51:37 +0000 Subject: [PATCH 02/49] [REF] web: uniform spacing Uniform measures for spacing elements. Round up the buttons' paddings: prior to this commit, `.btn` had unrounded padding that created a blurred effect when we used UI Icons in it. task-3280695 task-2818586 Part-of: odoo/odoo#116641 --- .../static/src/scss/bootstrap_overridden.scss | 16 +++++++++++++++- .../web/static/src/scss/primary_variables.scss | 3 ++- .../src/views/kanban/kanban.variables.scss | 4 ++-- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index 487ec033eeb..568d9aa8a70 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -64,7 +64,7 @@ $enable-negative-margins: true !default; $enable-cssgrid: true !default; // Spacing -$spacer: 1rem !default; +$spacer: $o-spacer !default; // Body // @@ -155,8 +155,22 @@ $table-active-bg-factor: .05 !default; $table-active-color: $headings-color !default; $table-th-font-weight: $headings-font-weight !default; +// Buttons + Forms +// +// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. + +$input-btn-padding-y: o-to-rem(5) !default; +$input-btn-padding-x: o-to-rem(10) !default; + +$input-btn-padding-y-sm: o-to-rem(3) !default; +$input-btn-padding-x-sm: o-to-rem(8) !default; + +$input-btn-padding-y-lg: o-to-rem(6) !default; +$input-btn-padding-x-lg: o-to-rem(12) !default; + // Buttons // +// For each of Bootstrap's buttons, define text, background, and border color. $btn-font-weight: $font-weight-bold !default; $btn-disabled-opacity: $o-opacity-disabled !default; diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss index 1c60140af16..038cc9a3184 100644 --- a/addons/web/static/src/scss/primary_variables.scss +++ b/addons/web/static/src/scss/primary_variables.scss @@ -119,9 +119,10 @@ $o-extra-grid-breakpoints: ( xl: 1200px, xxl: 1534px, ) !default; +$o-spacer: 16px !default; // = 1rem $o-form-group-cols: 12 !default; $o-form-spacing-unit: 5px !default; -$o-horizontal-padding: 16px !default; +$o-horizontal-padding: $o-spacer !default; $o-innergroup-rpadding: 45px !default; $o-dropdown-hpadding: 20px !default; $o-dropdown-vpadding: 3px !default; diff --git a/addons/web/static/src/views/kanban/kanban.variables.scss b/addons/web/static/src/views/kanban/kanban.variables.scss index 71d7f0eb0bd..085e5ad8014 100644 --- a/addons/web/static/src/views/kanban/kanban.variables.scss +++ b/addons/web/static/src/views/kanban/kanban.variables.scss @@ -3,8 +3,8 @@ $o-kanban-small-record-width: 240px !default; $o-kanban-header-title-height: 50px !default; $o-kanban-image-width: 64px !default; $o-kanban-image-fill-width: 95px !default; -$o-kanban-inside-vgutter: 8px !default; -$o-kanban-inside-hgutter: 8px !default; +$o-kanban-inside-vgutter: $o-spacer * 0.5 !default; +$o-kanban-inside-hgutter: $o-spacer * 0.5 !default; $o-kanban-color-border-width: 2px !default; $o-kanban-inner-hmargin: 5px !default; $o-kanban-progressbar-height: 20px !default; From 589f6954dc83382f71aa4f94594b7f9420ee8482 Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Fri, 10 Mar 2023 12:04:21 +0000 Subject: [PATCH 03/49] [REF] web, mail, project, website_slides: backend bootstrap review task-2818586 Part-of: odoo/odoo#116641 --- addons/mail/__manifest__.py | 2 +- addons/project/__manifest__.py | 2 +- addons/web/__manifest__.py | 15 +- .../web/static/src/scss/bootstrap_review.scss | 52 +----- .../src/scss/bootstrap_review_backend.scss | 176 ++++++++++++++++++ .../src/scss/bootstrap_review_frontend.scss | 53 ++++++ .../src/scss/bs_mixins_overrides_backend.scss | 66 ++----- addons/web/static/src/scss/functions.scss | 19 ++ .../static/src/scss/primary_variables.scss | 38 ++++ .../web/static/src/scss/utilities_custom.scss | 48 +---- .../src/scss/utilities_custom_backend.scss | 28 +++ .../views/fields/many2one/many2one_field.xml | 2 +- .../web/static/src/webclient/webclient.scss | 22 --- addons/website_slides/__manifest__.py | 2 +- 14 files changed, 355 insertions(+), 170 deletions(-) create mode 100644 addons/web/static/src/scss/bootstrap_review_backend.scss create mode 100644 addons/web/static/src/scss/bootstrap_review_frontend.scss create mode 100644 addons/web/static/src/scss/utilities_custom_backend.scss diff --git a/addons/mail/__manifest__.py b/addons/mail/__manifest__.py index 01c69cf0b98..a8d293f5475 100644 --- a/addons/mail/__manifest__.py +++ b/addons/mail/__manifest__.py @@ -160,7 +160,7 @@ For more specific needs, you may also assign custom-defined actions ('include', 'web._assets_helpers'), ('include', 'web._assets_backend_helpers'), ('include', 'web.assets_common'), - ('include', 'web._assets_bootstrap'), + ('include', 'web._assets_bootstrap_backend'), 'web/static/src/scss/bootstrap_overridden.scss', 'web/static/src/webclient/webclient.scss', 'web/static/src/core/utils/transitions.scss', # included early because used by other files diff --git a/addons/project/__manifest__.py b/addons/project/__manifest__.py index 6f23cbb3e07..ecee52dbfb9 100644 --- a/addons/project/__manifest__.py +++ b/addons/project/__manifest__.py @@ -99,7 +99,7 @@ 'web/static/src/scss/pre_variables.scss', 'web/static/lib/bootstrap/scss/_variables.scss', - ('include', 'web._assets_bootstrap'), + ('include', 'web._assets_bootstrap_backend'), 'base/static/src/css/modules.css', diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py index 2aa8db8a18e..a981ba95414 100644 --- a/addons/web/__manifest__.py +++ b/addons/web/__manifest__.py @@ -172,7 +172,7 @@ This module provides the core of the Odoo Web Client. 'web/static/src/scss/pre_variables.scss', 'web/static/lib/bootstrap/scss/_variables.scss', - ('include', 'web._assets_bootstrap'), + ('include', 'web._assets_bootstrap_backend'), 'base/static/src/css/modules.css', @@ -278,7 +278,7 @@ This module provides the core of the Odoo Web Client. 'web/static/lib/bootstrap/scss/_variables.scss', 'web/static/lib/luxon/luxon.js', - ('include', 'web._assets_bootstrap'), + ('include', 'web._assets_bootstrap_frontend'), 'web/static/src/legacy/scss/tempusdominus_overridden.scss', 'web/static/lib/tempusdominus/tempusdominus.scss', @@ -448,7 +448,7 @@ This module provides the core of the Odoo Web Client. 'web/static/src/scss/pre_variables.scss', 'web/static/lib/bootstrap/scss/_variables.scss', - ('include', 'web._assets_bootstrap'), + ('include', 'web._assets_bootstrap_backend'), 'base/static/src/css/description.css', 'web/static/src/libs/fontawesome/css/font-awesome.css', @@ -530,6 +530,15 @@ This module provides the core of the Odoo Web Client. 'web/static/lib/bootstrap/scss/utilities/_api.scss', 'web/static/src/scss/bootstrap_review.scss', ], + 'web._assets_bootstrap_backend': [ + ('include', 'web._assets_bootstrap'), + ('after', 'web/static/src/scss/utilities_custom.scss', 'web/static/src/scss/utilities_custom_backend.scss'), + 'web/static/src/scss/bootstrap_review_backend.scss', + ], + 'web._assets_bootstrap_frontend': [ + ('include', 'web._assets_bootstrap'), + 'web/static/src/scss/bootstrap_review_frontend.scss', + ], 'web._assets_backend_helpers': [ 'web/static/src/scss/bootstrap_overridden.scss', 'web/static/src/scss/bs_mixins_overrides_backend.scss', diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss index bd37b1bd68f..25de995ba15 100644 --- a/addons/web/static/src/scss/bootstrap_review.scss +++ b/addons/web/static/src/scss/bootstrap_review.scss @@ -9,25 +9,16 @@ clear: both; } -// Extend bootstrap to create background and text utilities for gray colors too -// Note: the card-body rule below needs those grays utilities to be defined -// before so that the related o-bg-color text-muted rules work. -@each $color, $value in $grays { - @include bg-variant(".bg-#{$color}", $value); - @include text-emphasis-variant(".text-#{$color}", $value); -} - -// Restore text-X from BS4 that use text-emphasis-variant -@each $color, $value in $theme-colors { - @include text-emphasis-variant(".text-#{$color}", $value); -} - - -.card-body { +%-card-body-reviewed { // BS4 colored cards do not have a very popular design. This will reset them // to a BS3-like one: only the header and footer are colored and the body // will use the color of a default card background with a light opacity. // Limitation: bg-* utilities cannot be used on card-body elements anymore. + // Note: these rules need grays utilities to be defined before so that the + // related o-bg-color text-muted rules work. Since backend and fronted + // generate these classes differently, this pseudo-class is called in the + // respective 'bootstrap_review_x' file immediately after gray classes + // generation. @include o-bg-color(rgba($card-bg, $o-card-body-bg-opacity)); &:first-child { @@ -164,34 +155,3 @@ $o-btn-outline-defaults: () !default; } } -// Compensate navbar brand padding if no visible border -@if alpha($navbar-dark-toggler-border-color) < 0.001 { - .navbar-dark .navbar-toggler { - padding-left: 0; - padding-right: 0; - } -} -@if alpha($navbar-light-toggler-border-color) < 0.001 { - .navbar-light .navbar-toggler { - padding-left: 0; - padding-right: 0; - } -} - -// Review bootstrap navbar to work with different nav styles -$o-navbar-nav-pills-link-padding-x: $nav-link-padding-x !default; -$o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default; -.navbar-nav.nav-pills .nav-link { - // The rules is needed so that the padding is not reset to 0 in mobile. - // Also use default nav-link paddings instead of navbar ones. - padding-right: $o-navbar-nav-pills-link-padding-x; - padding-left: $o-navbar-nav-pills-link-padding-x; - - @if $o-navbar-nav-pills-link-border-radius != $nav-pills-border-radius { - @include border-radius($o-navbar-nav-pills-link-border-radius); - } -} - -.carousel-control-next .visually-hidden { - left: 50%; // Avoid horizontal scrollbar in Chrome -} diff --git a/addons/web/static/src/scss/bootstrap_review_backend.scss b/addons/web/static/src/scss/bootstrap_review_backend.scss new file mode 100644 index 00000000000..ad817a84534 --- /dev/null +++ b/addons/web/static/src/scss/bootstrap_review_backend.scss @@ -0,0 +1,176 @@ +/// +/// This file regroups the CSS rules made to fix/extend bootstrap in the backend +/// ============================================================================== + + +// Bootstrap '$theme-colors' text-x and bg-x classes generation +// ============================================================================ +// Bootstrap's default behavior is to generate classes directly from its +// '$theme-colors' map. However, we have disabled this to allow our own +// approach. + +// 'text-x' classes +// ---------------------------------------------------------------------------- +// 1. To comply with WCAG standards, we need to use text-colors that are +// different from the ones in the '$theme-colors' map. We achieve this by +// creating a temporary map that overrides uncompliant colors with +// '$o-theme-text-colors' ones. +$-o-theme-text-colors: map-merge($theme-colors, $o-theme-text-colors); + +// 2. Use different colors for links and buttons when in conjunction with +// 'text-x' classes to keep consistency with previous versions of Bootstrap. +// To do so we pass the values through the 'text-emphasis-variant' mixin. +@each $-name, $-value in $-o-theme-text-colors { + @include text-emphasis-variant(".text-#{$-name}", $-value); +} + +// 3. Adapt the behaviour of .btn-link buttons when in conjuction with contextual +// classes (eg. text-warning). 'muted' is set as default text color, while +// the contextual-class color will be used on ':hover'. +// Note: For the custom classes, this is duplicated below where the classes are +// generated with the o-gray +.btn-link { + font-weight: $btn-font-weight; + + @each $-name, $-color in $-o-theme-text-colors{ + &.btn-#{$-name}, &.text-#{$-name} { + @include o-btn-link-variant($o-main-color-muted!important, o-text-color($-name) or $-color!important); + } + } +} + +// 3. Cleanup temporary map +$-o-theme-text-colors: null; + +// 'bg-x' classes +// ---------------------------------------------------------------------------- +// 1. Generate $theme-colors classes using 'o-print-color()' mixin in order to +// assign the color and print relative CSS variables as well. Note that +// 'black' and 'white' are not included in the map, we'll generate these +// classes later in conjunction with legacy 'bg-white-x' and 'bg-black-x' +// ones. +@each $-name, $-color in $theme-colors { + .bg-#{$-name} { + @include o-print-color($-color, background-color, bg-opacity); + } +} + + +// Bootstrap black/white text-x and bg-x classes + legacy opacity ones +// ============================================================================ + +// 1. Define placeholder-selectors (aka pseudo-classes) for both white and +// black. We'll then extend placeholder rather than classes to avoid +// performance issues during SCSS compilation. +%-text-white { + @include o-print-color($o-white, color, text-opacity); +} + +%-text-black { + @include o-print-color($o-black, color, text-opacity); +} + +%-bg-white { + @include o-print-color($o-white, background-color, bg-opacity); +} + +%-bg-black { + @include o-print-color($o-black, background-color, bg-opacity); +} + +.text-white { + @extend %-text-white; +} + +.text-black { + @extend %-text-black; +} + +.bg-white { + @extend %-bg-white; +} + +.bg-black { + @extend %-bg-black; +} + +// 2. Generate legacy opacity-variations classes for both white and black. We +// don't specifically assign colors here, we just extend placeholder +// selectors. To control opacity we act on the '--X-opacity' Bootstrap +// default CSS variables. +$-o-grayscale-opacities: map-remove($o-opacities, 0, 100); +@each $-name, $-value in $-o-grayscale-opacities { + .bg-white-#{$-name} { + --bg-opacity: #{$-value}; + @extend %-bg-white; + } + + .bg-black-#{$-name} { + --bg-opacity: #{$-value}; + @extend %-bg-black; + } +} + +@each $-name, $-value in $-o-grayscale-opacities { + .text-white-#{$-name} { + --text-opacity: #{$-value}; + @extend %-text-white; + } + + .text-black-#{$-name} { + --text-opacity: #{$-value}; + @extend %-text-black; + } +} + +// 3. Cleanup temporary map +$-o-grayscale-opacities: null; + + +// Odoo custom text/bg colors classes generation +// ============================================================================ + +// 1. Extend odoo's custom colors maps adding Bootstrap's grays. +// Note: the card-body rule below needs those grays utilities to be defined +// before, so that the related o-bg-color text-muted rules work. +$-o-text-colors-custom: map-merge($o-text-colors-custom, $o-grays); +$-o-bg-colors-custom: map-merge($o-bg-colors-custom, $o-grays); + +// 2. Generate custom 'text-x' contextual classes +@each $-name, $-color in $-o-text-colors-custom { + @include text-emphasis-variant(".text-#{$-name}", $-color); +} + +// 3. Generate custom 'bg-x' and 'text-bg-x' contextual classes +@each $-name, $-color in map-merge($-o-bg-colors-custom, $o-grays) { + .bg-#{$-name}, .text-bg-#{$-name} { + @include o-print-color($-color, background-color, bg-opacity); + } + + .text-bg-#{$-name} { + @include o-print-color(color-contrast($-color), color, text-opacity); + } +} + +// 4. Cleanup temporary maps +$-o-text-colors-custom: null; +$-o-bg-colors-custom: null; + +// 5. Adapt the behaviour of .btn-link buttons when in conjuction with the custom +// contextual classes (eg. text-action). 'muted' is set as default text color, +// while the contextual-class color will be used on ':hover'. +// Note: the same is done above for the '$theme-colors'. Here on the +// '$o-text-colors-custom' because we don't want it to apply on the '$o-grays'. +.btn-link { + @each $-name, $-color in $o-text-colors-custom{ + &.btn-#{$-name}, &.text-#{$-name} { + @include o-btn-link-variant($o-main-color-muted!important, o-text-color($-name) or $-color!important); + } + } +} + +// Cards +// ============================================================================ +.card-body { + @extend %-card-body-reviewed; // See bootstrap_review.scss +} \ No newline at end of file diff --git a/addons/web/static/src/scss/bootstrap_review_frontend.scss b/addons/web/static/src/scss/bootstrap_review_frontend.scss new file mode 100644 index 00000000000..20b9ff93bf7 --- /dev/null +++ b/addons/web/static/src/scss/bootstrap_review_frontend.scss @@ -0,0 +1,53 @@ +/// +/// This file regroups the CSS rules made to fix/extend bootstrap in frontend +/// ============================================================================== + +// Extend bootstrap to create background and text utilities for gray colors too +// Note: the card-body rule below needs those grays utilities to be defined +// before so that the related o-bg-color text-muted rules work. +@each $color, $value in $grays { + @include bg-variant(".bg-#{$color}", $value); + @include text-emphasis-variant(".text-#{$color}", $value); +} + +// Restore text-X from BS4 that use text-emphasis-variant +@each $color, $value in $theme-colors { + @include text-emphasis-variant(".text-#{$color}", $value); +} + +// Cards +.card-body { + @extend %-card-body-reviewed; // See bootstrap_review.scss +} + +// Compensate navbar brand padding if no visible border +@if alpha($navbar-dark-toggler-border-color) < 0.001 { + .navbar-dark .navbar-toggler { + padding-left: 0; + padding-right: 0; + } +} +@if alpha($navbar-light-toggler-border-color) < 0.001 { + .navbar-light .navbar-toggler { + padding-left: 0; + padding-right: 0; + } +} + +// Review bootstrap navbar to work with different nav styles +$o-navbar-nav-pills-link-padding-x: $nav-link-padding-x !default; +$o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default; +.navbar-nav.nav-pills .nav-link { + // The rules is needed so that the padding is not reset to 0 in mobile. + // Also use default nav-link paddings instead of navbar ones. + padding-right: $o-navbar-nav-pills-link-padding-x; + padding-left: $o-navbar-nav-pills-link-padding-x; + + @if $o-navbar-nav-pills-link-border-radius != $nav-pills-border-radius { + @include border-radius($o-navbar-nav-pills-link-border-radius); + } +} + +.carousel-control-next .visually-hidden { + left: 50%; // Avoid horizontal scrollbar in Chrome +} diff --git a/addons/web/static/src/scss/bs_mixins_overrides_backend.scss b/addons/web/static/src/scss/bs_mixins_overrides_backend.scss index 793c3ebb7ee..9c36b006845 100644 --- a/addons/web/static/src/scss/bs_mixins_overrides_backend.scss +++ b/addons/web/static/src/scss/bs_mixins_overrides_backend.scss @@ -1,63 +1,33 @@ -//============================================================================== +//============================================================================= // Bootstrap Mixins and Functions Extensions // Those will affect how bootstrap is generated in the backend only -//============================================================================== +//============================================================================= -// Function used to retrive a text color prioritizing our finetuned ones. -//------------------------------------------------------------------------------ +// Function used to retrieve a text color prioritizing our fine-tuned ones. +// ---------------------------------------------------------------------------- @function o-text-color($key) { - $-all-text-colors: map-merge($theme-colors, $o-theme-text-colors); + $-all-text-colors: map-merge($theme-colors, $o-theme-text-colors); - @if map-has-key($-all-text-colors, $key) { - @return map-get($-all-text-colors, $key); - } + @if map-has-key($-all-text-colors, $key) { + @return map-get($-all-text-colors, $key); + } - @return false; + @return false; } - -// Customize boostrap 'text-emphasis-variant' mixin allowing text colors other +// Customize Bootstrap 'text-emphasis-variant' mixin allowing text colors other // than the '$theme-colors' ones. // It prioritizes the '$o-theme-text-colors' map and fallbacks to default. -//------------------------------------------------------------------------------ -@mixin text-emphasis-variant($parent, $color) { - $-hover: $link-shade-percentage; - - // Check for the color name in '$theme-colors'. - $color-name: null; - @each $-name, $-value in $theme-colors { - @if $-value == $color { - $color-name: $-name; - } - } - - // Retrive the finetuned text color or fallback to default. - $color-value: o-text-color($color-name) or $color; - - #{$parent} { - color: $color-value!important; - } - - a#{$parent}, button#{$parent} { - &:hover, &:focus { - color: darken($color-value, $-hover) !important; - } - } - - // Handle a very specific exception for the 'fa-circle' class when used in - // conjunction with contextual classes to achieve "status" graphical elements. - // Ideally any '.fa-circle.text-x'occurrency should be replaced with the - // 'o_status' component that uses background-color rather than text-color. - @if map-has-key($o-theme-text-colors, $color-name) { - #{$parent}.fa-circle { - color: $color!important; +// ---------------------------------------------------------------------------- +@mixin text-emphasis-variant($-parent, $-color) { + #{$-parent} { + @include o-print-color($-color, color, text-opacity); } - a#{$parent}.fa-circle, button#{$parent}.fa-circle { - &:hover, &:focus { - color: darken($color, $-hover) !important; - } + a#{$-parent}, button#{$-parent} { + &:hover, &:focus, &:active, &.active { + @include o-print-color(darken($-color, $link-shade-percentage), color, text-opacity); + } } - } } diff --git a/addons/web/static/src/scss/functions.scss b/addons/web/static/src/scss/functions.scss index 127a3508b7f..ca6fedddc21 100644 --- a/addons/web/static/src/scss/functions.scss +++ b/addons/web/static/src/scss/functions.scss @@ -30,3 +30,22 @@ @function o-to-rem($-px-value, $-base: 16) { @return (o-strip-unit($-px-value) / o-strip-unit($-base)) * 1rem; } + + +/// Mixins +/// =========================================================================== + +/// Generate Bootstrap, BS-legacy and custom text/bg classes in a consistent +/// way. It applies the desired color to a specified rule using CSS variables. +/// --------------------------------------------------------------------------- +/// @param {color} $-color +/// Desidered color +/// @param {string} $-rule +/// CSS property to be affected +/// @param {string} $-css-opacity-var +/// CSS varible defining the opacity +/// --------------------------------------------------------------------------- +@mixin o-print-color($-color, $-rule, $-css-opacity-var) { + --#{$-rule}: RGBA(#{to-rgb($-color)}, var(--#{$-css-opacity-var}, 1)); + #{$-rule}: var(--#{$-rule}) !important; +} diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss index 038cc9a3184..f27ba8bad09 100644 --- a/addons/web/static/src/scss/primary_variables.scss +++ b/addons/web/static/src/scss/primary_variables.scss @@ -36,6 +36,18 @@ $o-gray-700: #495057 !default; $o-gray-800: #343a40 !default; $o-gray-900: #212529 !default; +$o-grays: ( + 100: $o-gray-100, + 200: $o-gray-200, + 300: $o-gray-300, + 400: $o-gray-400, + 500: $o-gray-500, + 600: $o-gray-600, + 700: $o-gray-700, + 800: $o-gray-800, + 900: $o-gray-900, +) !default; + $o-community-color: #71639e !default; $o-enterprise-color: #714B67 !default; $o-enterprise-primary-color: #017e84 !default; @@ -52,6 +64,8 @@ $o-warning: #ffac00 !default; $o-danger: #dc3545 !default; // Fine-tune contextual text colors. +// Overrides $theme-colors generated 'text-x' classes only. +// Custom colors are set by $o-text-colors-custom $o-theme-text-colors: ( "success": #008818, "info": #0180a5, @@ -60,14 +74,27 @@ $o-theme-text-colors: ( "odoo": $o-brand-odoo, )!default; +// Opacities $o-opacity-disabled: .5 !default; $o-opacity-muted: .76 !default; +$o-opacities: ( + 0: 0, + 25: .25, + 50: .5, + 75: .75, + 100: 1, + disabled: $o-opacity-disabled, + muted: $o-opacity-muted, +) !default; + +// Font families $o-font-family-sans-serif: o-add-unicode-support-font($o-system-fonts) !default; $o-font-family-monospace: o-add-unicode-support-font((SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)) !default; $o-headings-font-family: o-add-unicode-support-font(("SF Pro Display", $o-system-fonts)) !default; +// Font colors $o-main-text-color: $o-gray-700 !default; $o-main-bg-color: #f0eeee !default; $o-main-color-muted: rgba($o-main-text-color, $o-opacity-muted) !default; @@ -76,6 +103,8 @@ $o-main-link-color: darken($o-brand-primary, 5%) !default; $o-main-favorite-color: #f3cc00 !default; $o-main-code-color: #d2317b !default; +// Components colors +// TODO: move variables in components $o-view-background-color: white !default; $o-shadow-color: #303030 !default; @@ -91,6 +120,15 @@ $o-tooltip-text-color: $o-main-text-color !default; $o-tooltip-title-text-color: $o-main-headings-color !default; $o-tooltip-title-background-color: $o-view-background-color !default; +// Custom colors generation maps +$o-text-colors-custom: ( + "favourite": $o-main-favorite-color, +) !default; +$o-bg-colors-custom: ( + "view": $o-view-background-color, + "favourite": $o-main-favorite-color, +) !default; + // Components (BS) $o-border-color: $o-gray-300 !default; diff --git a/addons/web/static/src/scss/utilities_custom.scss b/addons/web/static/src/scss/utilities_custom.scss index 0521dc92d68..8f75fcf041c 100644 --- a/addons/web/static/src/scss/utilities_custom.scss +++ b/addons/web/static/src/scss/utilities_custom.scss @@ -15,17 +15,7 @@ $rounded-sizes: map-merge( ); $utilities-opacity: () !default; -$utilities-opacity: map-merge( - $utilities-opacity, - ( - 0: 0, - 25: .25, - 50: .5, - 75: .75, - 100: 1, - disabled: $o-opacity-disabled, - ) -); +$utilities-opacity: map-merge($utilities-opacity, $o-opacities); $utilities-sizes: () !default; $utilities-sizes: map-merge( @@ -74,17 +64,6 @@ $utilities: map-merge( values: $utilities-opacity, ), ), - "background-color": map-merge( - map-get($utilities, "background-color"), - ( - values: map-merge( - map-get(map-get($utilities, "background-color"), "values"), - ( - "view": $o-view-background-color, - ) - ) - ) - ), "border-color": map-merge( map-get($utilities, "border-color"), ( @@ -206,31 +185,6 @@ $utilities: map-merge( ) ); -// Restore text-X from BS4 that use text-emphasis-variant -// we don't merge $utilities-text-colors into $utilities -// to avoid same utilises classes generated twice. -// See bootstrap_review.scss -$utilities: map-merge( - $utilities, - ( - "color": ( - property: color, - class: text, - local-vars: ( - "text-opacity": 1 - ), - values: ( - "body": $body-color, - "black": $black, - "white": $white, - "muted": $text-muted, - "black-50": rgba($black, .5), // deprecated - "white-50": rgba($white, .5), // deprecated - "reset": inherit, - ), - ), - ) -); // Define opacity:hover classes while defining the triggerer behavior. // Use'.opacity-trigger-hover' class to allow hovered parents to diff --git a/addons/web/static/src/scss/utilities_custom_backend.scss b/addons/web/static/src/scss/utilities_custom_backend.scss new file mode 100644 index 00000000000..1f8df33b04c --- /dev/null +++ b/addons/web/static/src/scss/utilities_custom_backend.scss @@ -0,0 +1,28 @@ +/// +/// Backend Custom Utility Classes +/// ============================================================================== + +$utilities: map-merge( + $utilities, + ( + // Limit 'text-X' classes generation. + // See bootstrap_review_backend.scss + "color": ( + property: color, + class: text, + local-vars: ( + "text-opacity": 1 + ), + values: ( + "body": $body-color, + "muted": $text-muted, + "reset": inherit, + ), + ), + + // Disable 'bg-X' classes generation. + // See bootstrap_review_backend.scss + "background-color": null + ) +); + diff --git a/addons/web/static/src/views/fields/many2one/many2one_field.xml b/addons/web/static/src/views/fields/many2one/many2one_field.xml index 89067067251..b587a4f05ff 100644 --- a/addons/web/static/src/views/fields/many2one/many2one_field.xml +++ b/addons/web/static/src/views/fields/many2one/many2one_field.xml @@ -45,7 +45,7 @@ +
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 05144ff68b7..b664a12096e 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -282,7 +282,7 @@ $o-base-color-palette: ( ) !default; $o-color-palettes: ( 'base-1': ( - 'o-color-1': scale-color($o-enterprise-primary-color, $saturation: -50%, $lightness: 20%), + 'o-color-1': scale-color($o-enterprise-action-color, $saturation: -50%, $lightness: 20%), 'o-color-2': scale-color($o-enterprise-color, $saturation: -50%), 'o-color-3': #F6F6F6, 'o-color-4': #FFFFFF, @@ -305,7 +305,7 @@ $o-theme-color-palettes: ( // They should not be used in the code base anymore and ideally they will // not generate any classes for >= 13.4 databases. 'base-1': ( - 'alpha': $o-enterprise-primary-color, + 'alpha': $o-enterprise-action-color, 'beta': $o-enterprise-color, 'gamma': #5C5B80, 'delta': #5B899E, diff --git a/addons/website_hr_recruitment/views/hr_job_views.xml b/addons/website_hr_recruitment/views/hr_job_views.xml index 91644f56624..2fc2a29c9b3 100644 --- a/addons/website_hr_recruitment/views/hr_job_views.xml +++ b/addons/website_hr_recruitment/views/hr_job_views.xml @@ -8,7 +8,7 @@
- Published + Published
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss index 8ca1b473b2a..18ed412b962 100644 --- a/addons/website_sale/static/src/scss/website_sale.scss +++ b/addons/website_sale/static/src/scss/website_sale.scss @@ -733,7 +733,7 @@ a.no-decoration { bottom: percentage(1/3); width: 2rem; border-radius: 5px; - background-color: $o-enterprise-primary-color; + background-color: $o-enterprise-action-color; } .o_carousel_product_remove { diff --git a/addons/website_slides/views/slide_channel_views.xml b/addons/website_slides/views/slide_channel_views.xml index d7fc4aaa130..4c04a686ccf 100644 --- a/addons/website_slides/views/slide_channel_views.xml +++ b/addons/website_slides/views/slide_channel_views.xml @@ -272,7 +272,7 @@
- Published + Published
From 24e89badac0f0c619164b51ac7195bc61585b374 Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Tue, 7 Mar 2023 14:30:49 +0000 Subject: [PATCH 05/49] [REF] web,project,hr_holidays: buttons design task-2818586 Part-of: odoo/odoo#116641 --- .../static/src/scss/accrual_plan_level.scss | 10 +-- .../project_task_state_selection.js | 12 +-- .../project_task_state_selection.xml | 5 +- .../web/static/src/scss/bootstrap_review.scss | 34 -------- .../src/scss/bootstrap_review_backend.scss | 77 +++++++++++++++++++ .../src/scss/bootstrap_review_frontend.scss | 33 ++++++++ .../static/src/scss/primary_variables.scss | 59 ++++++++++++-- .../fields/statusbar/statusbar_field.scss | 3 + .../src/views/form/form_controller.scss | 10 --- .../web/static/src/webclient/webclient.scss | 74 ------------------ 10 files changed, 179 insertions(+), 138 deletions(-) diff --git a/addons/hr_holidays/static/src/scss/accrual_plan_level.scss b/addons/hr_holidays/static/src/scss/accrual_plan_level.scss index becd4e5ae7e..5dc0d22b1cd 100644 --- a/addons/hr_holidays/static/src/scss/accrual_plan_level.scss +++ b/addons/hr_holidays/static/src/scss/accrual_plan_level.scss @@ -64,7 +64,7 @@ $o-hr-holidays-border-color: map-get($grays, '300'); width: 90px; padding: 3px 0px; border-radius: 3px; - background-color: $o-btn-secondary-bg; + background-color: $o-gray-200; box-shadow: 0 1px 2px rgba(0,0,0,.1); } @@ -75,7 +75,7 @@ $o-hr-holidays-border-color: map-get($grays, '300'); margin-right: 2px; width: 500px; border-radius: 3px; - background-color: $o-btn-secondary-bg; + background-color: $o-gray-200; box-shadow: 0 1px 2px rgba(0,0,0,.1); // Triangle @@ -85,7 +85,7 @@ $o-hr-holidays-border-color: map-get($grays, '300'); margin-left: 10px; width: 14px; height: 14px; - background-color: $o-btn-secondary-bg; + background-color: $o-gray-200; border-bottom: 1px solid $o-hr-holidays-border-color; transform: rotate(45deg); } @@ -98,12 +98,12 @@ $o-hr-holidays-border-color: map-get($grays, '300'); height: 12px; border: 2px solid $o-brand-primary; border-radius: 10px; - background: $o-btn-secondary-bg; + background: $o-gray-200; } .content { position: relative; - background-color: $o-btn-secondary-bg; + background-color: $o-gray-200; padding: 5px 7px; font-size: 14px; } diff --git a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.js b/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.js index 51584f5ba61..0f7f5d03b98 100644 --- a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.js +++ b/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.js @@ -33,12 +33,12 @@ export class ProjectTaskStateSelection extends StateSelectionField { "04_waiting_normal": "", }; this.colorButton = { - "01_in_progress": "btn-light border-2 border-dark", - "03_approved": "btn-light border-2 border-success", - "02_changes_requested": "btn-light border-2 border-warning", - "1_done": "btn-success", - "1_canceled": "btn-danger", - "04_waiting_normal": "btn-light border-2 border-dark", + "01_in_progress": "btn-outline-secondary", + "03_approved": "btn-outline-success", + "02_changes_requested": "btn-outline-warning", + "1_done": "btn-outline-success", + "1_canceled": "btn-outline-danger", + "04_waiting_normal": "btn-outline-secondary", }; if (this.props.viewType != 'form') { super.setup(); diff --git a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml b/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml index 300c4e78559..7e4e65ceb2f 100644 --- a/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml +++ b/addons/project/static/src/components/project_task_state_selection/project_task_state_selection.xml @@ -27,7 +27,8 @@
diff --git a/addons/web/static/src/core/tags_list/tags_list.js b/addons/web/static/src/core/tags_list/tags_list.js index b939fa8b7d2..61e4b267851 100644 --- a/addons/web/static/src/core/tags_list/tags_list.js +++ b/addons/web/static/src/core/tags_list/tags_list.js @@ -9,6 +9,7 @@ export class TagsList extends Component { displayText: true, }; static props = { + className: { type: String, optional: true }, displayBadge: { type: Boolean, optional: true }, displayText: { type: Boolean, optional: true }, itemsVisible: { type: Number, optional: true }, diff --git a/addons/web/static/src/core/tags_list/tags_list.scss b/addons/web/static/src/core/tags_list/tags_list.scss index e259b6236e1..a76a4d0f321 100644 --- a/addons/web/static/src/core/tags_list/tags_list.scss +++ b/addons/web/static/src/core/tags_list/tags_list.scss @@ -1,63 +1,24 @@ .o_tag { - user-select: none; + font-size: var(--Tag-font-size, #{$font-size-sm}); + max-width: var(--Tag-max-width, 100%); .o_badge_text, a { - color: inherit; line-height: 1.1; } - .o_tag_badge_text { - font-size: 12px; - } - - img { - height: 1.6em; - aspect-ratio: 1/1; - - + .o_tag_badge_text { - padding: 0.25em 0; - } + a { + color: inherit; } @for $size from 1 through length($o-colors) { &.o_tag_color_#{$size - 1} { - @if $size == 1 { - & { - background-color: $o-view-background-color; - color: nth($o-colors, $size); - box-shadow: inset 0 0 0 1px; - } - &:focus-within { - color: darken(nth($o-colors, $size), 40%) ; - } - &::after { - background-color: nth($o-colors, $size); - } - } @else { - &, &::after { - background-color: nth($o-colors, $size); - color: color-contrast(nth($o-colors, $size)); - } + $-bg: adjust-color(nth($o-colors, $size), $lightness: 25%, $saturation: 15%); + $-color: adjust-color(nth($o-colors, $size), $lightness: -40%, $saturation: -15%); + + &, &::after { + @include o-print-color($-bg, background-color, bg-opacity); + @include o-print-color($-color, color, text-opacity); } } } -} - -.o_kanban_view .o_kanban_record .o_tag { - display: inline-block; - margin-right: 4px; - font-size: 11px; - font-weight: 500; - background-color: transparent; - color: inherit; - box-shadow: none; - @include o-kanban-tag-color; - - span { - display: inline-block; - width: 6px; - height: 6px; - margin-right: 4px; - border-radius: 100%; - } -} +} \ No newline at end of file diff --git a/addons/web/static/src/core/tags_list/tags_list.xml b/addons/web/static/src/core/tags_list/tags_list.xml index 7e0d688cdfd..3283cd2ced1 100644 --- a/addons/web/static/src/core/tags_list/tags_list.xml +++ b/addons/web/static/src/core/tags_list/tags_list.xml @@ -3,15 +3,23 @@ - - - -
- - -
- - + + + + +
+ diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss index 8cad9875e99..d68b6acea83 100644 --- a/addons/web/static/src/legacy/scss/fields.scss +++ b/addons/web/static/src/legacy/scss/fields.scss @@ -153,22 +153,6 @@ padding-bottom: 0; } - // Many2OneAvatar - &.o_field_many2one_avatar { - .o_m2o_avatar > img, .o_m2o_avatar > .o_m2o_avatar_empty { - border-radius: 50%; - width: 19px; - height: 19px; - object-fit: cover; - margin-right: 4px; - } - .o_m2o_avatar_empty { - display: block; - background: $o-black; - opacity: .1; - } - } - // Many2many tags &.o_field_many2manytags { flex-flow: row wrap; diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss index 3be4a4e0473..3b41bed25c2 100644 --- a/addons/web/static/src/legacy/scss/utils.scss +++ b/addons/web/static/src/legacy/scss/utils.scss @@ -336,20 +336,8 @@ } // No Color - &:first-child > a { - position: relative; - &::before { - content: ""; - @include o-position-absolute(-2px, $left: 10px); - display: block; - width: 1px; - height: 20px; - transform: rotate(45deg); - background-color: red; - } - &::after { - background-color: white; - } + &:first-child > a:after { + background: linear-gradient(45deg, rgba($dropdown-bg, 0) 0%, rgba($dropdown-bg, 0) 48%, $danger 48%, $danger 52%, rgba($dropdown-bg, 0) 52%, rgba($dropdown-bg, 0) 100%); } } } diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index 80661c93a43..c36d9be94c5 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -281,7 +281,7 @@ $form-range-thumb-bg: $primary !default; // Badge $badge-color: inherit !default; $badge-padding-y: 0.25em !default; -$badge-padding-x: 0.4em !default; +$badge-padding-x: 0.82em !default; // Placeholder color $input-placeholder-color: $gray-300 !default; diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss index 4436bdf9607..f2b747aa934 100644 --- a/addons/web/static/src/scss/primary_variables.scss +++ b/addons/web/static/src/scss/primary_variables.scss @@ -200,7 +200,7 @@ $o-list-group-active-bg: lighten(saturate(adjust-hue($o-info, 15), 1.8), 50) !de // == Badges // Define a minimum width. This value is arbitrary and strictly font-related. -$o-badge-min-width: 2.5ch !default; +$o-badge-min-width: 3ch !default; $o-nb-calendar-colors: 24 !default; diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss index 04309feb61d..a636b541526 100644 --- a/addons/web/static/src/scss/secondary_variables.scss +++ b/addons/web/static/src/scss/secondary_variables.scss @@ -5,8 +5,8 @@ $o-list-group-header-color: lighten($o-brand-lightsecondary, 10%) !default; // UI custom colors for tags, kanban records' colors, ...) // Note: the first value is the old BS3 gray-light value -$o-colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968, - #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8 !default; +$o-colors: #a2a2a2, #ee2d2d, #dc8534, #e8bb1d, #5794dd, #9f628f, #db8865, + #41a9a2, #304be0, #ee2f8a, #61c36e, #9872e6 !default; $o-colors-secondary: #aa4b6b, #30C381, #97743a, #F7CD1F, #4285F4, #8E24AA, #D6145F, #173e43, #348F50, #AA3A38, #795548, #5e0231, diff --git a/addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.xml b/addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.xml index c1a1c8faa96..123a2a31b5e 100644 --- a/addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.xml +++ b/addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.xml @@ -2,6 +2,8 @@ - +
+ +
diff --git a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js index a89b7f5a73d..e93882a9e24 100644 --- a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js +++ b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js @@ -158,7 +158,7 @@ export class Many2ManyTagsField extends Component { focusTag(index) { const autoCompleteParent = this.autoCompleteRef.el.parentElement; - const tags = autoCompleteParent.getElementsByClassName("badge"); + const tags = autoCompleteParent.getElementsByClassName("o_tag"); if (tags.length) { if (index === undefined) { tags[tags.length - 1].focus(); @@ -219,8 +219,8 @@ export class Many2ManyTagsField extends Component { } const hotkey = getActiveHotkey(ev); const autoCompleteParent = this.autoCompleteRef.el.parentElement; - const tags = [...autoCompleteParent.getElementsByClassName("badge")]; - const closestTag = ev.target.closest(".badge"); + const tags = [...autoCompleteParent.getElementsByClassName("o_tag")]; + const closestTag = ev.target.closest(".o_tag"); const tagIndex = tags.indexOf(closestTag); const input = this.autoCompleteRef.el.querySelector(".o-autocomplete--input"); switch (hotkey) { diff --git a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss index 03da097806a..5b275a29794 100644 --- a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss +++ b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss @@ -11,11 +11,6 @@ .o_tags_input { padding: 1px 0; - - .o_tag { - padding-left: 0.6em; - padding-right: 0.6em; - } } .o_field_many2many_selection { @@ -29,12 +24,7 @@ .badge { flex: 0 0 auto; - margin: 1px 2px 1px 0; - border: none; - font-size: 12px; - user-select: none; display: flex; - max-width: 100%; &.dropdown { cursor: pointer; @@ -47,15 +37,6 @@ .o_badge_text, .o_tag_badge_text { @include o-text-overflow(inline-block); max-width: 200px; - color: inherit; - line-height: 1.1; - } - - .o_delete { - color: inherit; - cursor: pointer; - padding-left: 4px; - line-height: 1; } } } diff --git a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.xml b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.xml index 62ea1c44999..1a350617272 100644 --- a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.xml +++ b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.xml @@ -3,7 +3,7 @@
diff --git a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss index 8f44c546db1..3710e1c6308 100644 --- a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss +++ b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss @@ -1,74 +1,22 @@ .o_field_widget.o_field_many2many_tags_avatar { - flex-flow: row wrap; + $-text-spacing-v: $o-line-height-base * 1em; + --img-text-gap-v: calc(var(--Avatar-size, #{$o-avatar-size}) - #{$-text-spacing-v}); - .o_tags_input { - padding: 1px 0; - } + flex-flow: row wrap; + margin-top: calc(var(--img-text-gap-v) * -0.5); // using transform conflicts with dropdown position .o_field_many2many_selection { flex: 1 0 50px; - .o_input { + .o-autocomplete, .o_input { height: 100%; + } + + .o_input { border: none; } } - .o_dropdown_button { - top: $o-input-padding-y; - } - - .badge { - flex: 0 0 auto; - margin: 1px 2px 1px 0; - border: none; - font-size: 12px; - user-select: none; - display: flex; - max-width: 100%; - align-items: center; - padding: 0; - padding-right: 0.6rem; - box-shadow: inset 0 0 0 1px; - - &.dropdown { - cursor: pointer; - } - - a { - color: inherit; - } - - .o_badge_text { - @include o-text-overflow(inline-block); - max-width: 200px; - color: inherit; - line-height: 1.1; - } - - .o_delete { - color: inherit; - cursor: pointer; - padding-left: 4px; - line-height: 1; - } - - img { - height: 1.4em; - width: 1.4em; - object-fit: cover; - } - - .o_badge_text, .o_delete { - padding-top: 0.25em; - padding-bottom: 0.25em; - } - - .o_tag_badge_text { - padding-left:2px; - } - } - } .o_kanban_record { @@ -85,10 +33,7 @@ } .o_list_view .o_field_widget.o_field_many2many_tags_avatar { - .o_tags_input { - border: 0; - padding: 0; - } + --img-text-gap-v: 0; .o_field_many2many_selection { flex-basis: 40px; diff --git a/addons/web/static/src/views/fields/properties/property_tags.xml b/addons/web/static/src/views/fields/properties/property_tags.xml index dfe6456c5ec..a333989336b 100644 --- a/addons/web/static/src/views/fields/properties/property_tags.xml +++ b/addons/web/static/src/views/fields/properties/property_tags.xml @@ -5,7 +5,8 @@
+ displayBadge="displayBadge" + className="props.canChangeTags ? '' : 'o_field_property_tag_readonly'"/>
diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss index eb7bb1e003b..b0154830067 100644 --- a/addons/web/static/src/webclient/webclient.scss +++ b/addons/web/static/src/webclient/webclient.scss @@ -55,6 +55,7 @@ kbd { //== Badges .badge { min-width: $o-badge-min-width; + line-height: 1.1; } // Set position of our custom o-dropdown-menu (not bootstrap) diff --git a/addons/web/static/tests/core/colorlist_tests.js b/addons/web/static/tests/core/colorlist_tests.js index cd9d318dfce..f3d63e22ba7 100644 --- a/addons/web/static/tests/core/colorlist_tests.js +++ b/addons/web/static/tests/core/colorlist_tests.js @@ -48,8 +48,8 @@ QUnit.module("Components", () => { const secondBtn = target.querySelectorAll(".o_colorlist button")[1]; assert.strictEqual( secondBtn.attributes.title.value, - "Fuchsia", - "second button color is Fuchsia" + "Raspberry", + "second button color is Raspberry" ); assert.hasClass( secondBtn, diff --git a/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js b/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js index 09f0ffb5d43..76e53441079 100644 --- a/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js +++ b/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js @@ -455,24 +455,24 @@ QUnit.module("Fields", (hooks) => { assert.containsN( target, - ".o_field_many2many_tags_avatar.o_field_widget .badge", + ".o_field_many2many_tags_avatar.o_field_widget .o_tag", 2, "should have 2 records" ); await click( - target.querySelector(".o_field_many2many_tags_avatar.o_field_widget .badge .o_delete") + target.querySelector(".o_field_many2many_tags_avatar.o_field_widget .o_tag .o_delete") ); assert.containsOnce( target, - ".o_field_many2many_tags_avatar.o_field_widget .badge", + ".o_field_many2many_tags_avatar.o_field_widget .o_tag", "should have 1 record" ); await clickSave(target); assert.containsOnce( target, - ".o_field_many2many_tags_avatar.o_field_widget .badge", + ".o_field_many2many_tags_avatar.o_field_widget .o_tag", "should have 1 record" ); }); From 79f57643ce37c010dc2a1a10e1bb0c32c20d012e Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Tue, 14 Mar 2023 17:21:00 +0000 Subject: [PATCH 08/49] [REF] web, mail, hr, website, auth_totp, test_apikeys: top-menu design task-2818586 Part-of: odoo/odoo#116641 --- addons/auth_totp/static/tests/totp_flow.js | 8 +- .../hr/static/tests/tours/hr_employee_flow.js | 2 +- .../static/src/web/activity/activity_menu.xml | 2 +- .../src/web/messaging_menu/messaging_menu.xml | 2 +- .../src/views/kanban/kanban_controller.scss | 9 +- .../webclient/burger_menu/burger_menu.scss | 20 +++-- .../burger_menu/burger_menu.variables.scss | 8 +- .../src/webclient/burger_menu/burger_menu.xml | 19 +++-- .../static/src/webclient/navbar/navbar.scss | 84 +++++++++---------- .../webclient/navbar/navbar.variables.scss | 51 +++++++---- .../static/src/webclient/navbar/navbar.xml | 4 +- .../src/webclient/user_menu/user_menu.scss | 8 +- .../src/webclient/user_menu/user_menu.xml | 9 +- .../static/tests/webclient/user_menu_tests.js | 6 +- .../src/systray_items/edit_website.scss | 4 +- .../static/src/systray_items/edit_website.xml | 2 +- .../src/systray_items/mobile_preview.xml | 2 +- .../static/src/systray_items/new_content.xml | 2 +- .../static/src/systray_items/publish.js | 2 +- .../src/systray_items/translate_website.scss | 2 +- .../src/systray_items/translate_website.xml | 2 +- .../static/tests/tours/reset_password.js | 2 +- .../test_apikeys/static/tests/apikey_flow.js | 6 +- 23 files changed, 150 insertions(+), 106 deletions(-) diff --git a/addons/auth_totp/static/tests/totp_flow.js b/addons/auth_totp/static/tests/totp_flow.js index fd9badb6d82..416f85262b2 100644 --- a/addons/auth_totp/static/tests/totp_flow.js +++ b/addons/auth_totp/static/tests/totp_flow.js @@ -21,7 +21,7 @@ function openRoot() { function openUserProfileAtSecurityTab() { return [{ content: 'Open user account menu', - trigger: '.o_user_menu .oe_topbar_name', + trigger: '.o_user_menu .dropdown-toggle', run: 'click', }, { content: "Open preferences / profile screen", @@ -154,7 +154,7 @@ registry.category("web_tour.tours").add('totp_login_enabled', { } }, { content: "check we're logged in", - trigger: ".o_user_menu .oe_topbar_name", + trigger: ".o_user_menu .dropdown-toggle", run() {} }]}); @@ -191,7 +191,7 @@ registry.category("web_tour.tours").add('totp_login_device', { } }, { content: "check we're logged in", - trigger: ".o_user_menu .oe_topbar_name", + trigger: ".o_user_menu .dropdown-toggle", run: 'click', }, { content: "click the Log out button", @@ -212,7 +212,7 @@ registry.category("web_tour.tours").add('totp_login_device', { trigger: 'button:contains("Log in")', }, { content: "check we're logged in without 2FA", - trigger: ".o_user_menu .oe_topbar_name", + trigger: ".o_user_menu .dropdown-toggle", run() {} }, // now go and disable two-factor authentication would be annoying to do in a separate tour diff --git a/addons/hr/static/tests/tours/hr_employee_flow.js b/addons/hr/static/tests/tours/hr_employee_flow.js index bd1208b7179..cdfc8f39643 100644 --- a/addons/hr/static/tests/tours/hr_employee_flow.js +++ b/addons/hr/static/tests/tours/hr_employee_flow.js @@ -20,7 +20,7 @@ registry.category("web_tour.tours").add('hr_employee_tour', { }, { content: "Open user account menu", - trigger: ".o_user_menu .oe_topbar_name", + trigger: ".o_user_menu .dropdown-toggle", run: 'click', }, { content: "Open My Profile", diff --git a/addons/mail/static/src/web/activity/activity_menu.xml b/addons/mail/static/src/web/activity/activity_menu.xml index 491af0f9d97..ddda9dccaf2 100644 --- a/addons/mail/static/src/web/activity/activity_menu.xml +++ b/addons/mail/static/src/web/activity/activity_menu.xml @@ -5,7 +5,7 @@ - +
diff --git a/addons/mail/static/src/web/messaging_menu/messaging_menu.xml b/addons/mail/static/src/web/messaging_menu/messaging_menu.xml index c5ac62ab40a..84bcc98f3c0 100644 --- a/addons/mail/static/src/web/messaging_menu/messaging_menu.xml +++ b/addons/mail/static/src/web/messaging_menu/messaging_menu.xml @@ -5,7 +5,7 @@ - + diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss index 880f14aa170..0a2b5cf11d3 100644 --- a/addons/web/static/src/views/kanban/kanban_controller.scss +++ b/addons/web/static/src/views/kanban/kanban_controller.scss @@ -1,3 +1,10 @@ +// ------- Kanban View ------- +.o_kanban_view { + @include media-breakpoint-down(md) { + --ControlPanel-border-bottom: none; + } +} + // ------- Kanban renderer ------- .o_kanban_renderer { // ---------------------------------------------------------------------------- @@ -587,7 +594,7 @@ margin: calc(var(--KanbanRecord-margin-v) * 0.5) var(--KanbanRecord-margin-h); @include media-breakpoint-down(md) { - margin: 0 0 -1px 0; + margin: 0 0 -1px 0 0 #{-$border-width}; flex-basis: 100%; } diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.scss index 22eab2ffe23..f2cfe10e651 100644 --- a/addons/web/static/src/webclient/burger_menu/burger_menu.scss +++ b/addons/web/static/src/webclient/burger_menu/burger_menu.scss @@ -16,10 +16,11 @@ // ====== Top-Bar .o_burger_menu_topbar { - min-height: $o-navbar-height-xs; + min-height: $o-navbar-height; background-color: $o-burger-topbar-bg; color: $o-burger-topbar-color; - line-height: $o-navbar-height-xs; + line-height: $o-navbar-height; + box-shadow: inset 0 -1px 0 $border-color; .dropdown-toggle, .o_burger_menu_close { padding: 0 $o-horizontal-padding; @@ -28,15 +29,12 @@ // ====== Menu content container (both App's and User's entries) .o_burger_menu_content { - &.o_burger_menu_dark { - background-color: darken($o-burger-base-bg, 5%); + &.o_burger_menu_app { + background-color: $o-burger-base-bg; } // Menu entries size and layout ul { - background-color: rgba(invert($o-burger-base-color), .1); - box-shadow: inset 0 -1px 0 rgba($o-burger-base-color, .1); - li > div, li { padding-left: $o-horizontal-padding; } @@ -45,14 +43,18 @@ li { ul > li { &, > div { - text-indent: 2em; + text-indent: .5em; } ul > li { &, > div { - text-indent: 3em; + text-indent: 1em; } } } + + &:last-child { + margin-bottom: map-get($map: $spacers, $key: 2); + } } } diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss index 9711b398434..be6bb703367 100644 --- a/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss +++ b/addons/web/static/src/webclient/burger_menu/burger_menu.variables.scss @@ -1,7 +1,7 @@ // = Burger Menu Variables // ============================================================================ -$o-burger-topbar-bg: $o-brand-odoo !default; -$o-burger-topbar-color: $o-white !default; +$o-burger-base-bg: $o-white !default; +$o-burger-base-color: $o-gray-800 !default; -$o-burger-base-bg: $o-burger-topbar-bg !default; -$o-burger-base-color: $o-burger-topbar-color !default; +$o-burger-topbar-bg: $o-gray-100 !default; +$o-burger-topbar-color: $o-gray-900 !default; \ No newline at end of file diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.xml b/addons/web/static/src/webclient/burger_menu/burger_menu.xml index 79a7c9edfe3..0aa68ce88b5 100644 --- a/addons/web/static/src/webclient/burger_menu/burger_menu.xml +++ b/addons/web/static/src/webclient/burger_menu/burger_menu.xml @@ -5,7 +5,7 @@