From dd9877e080a53dbeb137a9dd7947272738e7945a Mon Sep 17 00:00:00 2001 From: Pierre Paridans Date: Sat, 8 Oct 2022 15:10:29 +0000 Subject: [PATCH] [REF] web,*: each module handle its own dark mode variables Instead of having a dedicated module for all-things dark mode related, this commit moves the (S)CSS files into their respecting modules and uses `web` and `web_enterprise` to provide the base infrastructure for the dark mode (cf. dedicated assets bundle). Note: Don't forget that you have to handle 2 cases: 1: SCSS variables must be placed BEFORE bright ones 2: CSS variables must be placed AFTER task-2710677 Part-of: odoo/odoo#102868 --- addons/hr_holidays/__manifest__.py | 8 ++++++++ .../src/dashboard/time_off_card.dark.scss | 6 ++++++ .../calendar_filter_panel.dark.scss | 8 ++++++++ addons/mail/__manifest__.py | 6 ++++++ .../attachment_viewer.dark.scss | 7 +++++++ .../call_action_list.dark.scss | 7 +++++++ .../call_participant_card.dark.scss | 7 +++++++ .../components/call_view/call_view.dark.scss | 7 +++++++ .../chat_window_header.dark.scss | 7 +++++++ .../emoji_category_bar_view.dark.scss | 7 +++++++ .../message_action_list.dark.scss | 7 +++++++ .../message_action_view.dark.scss | 7 +++++++ addons/web/__manifest__.py | 3 +++ addons/web_editor/__manifest__.py | 7 +++++++ .../src/scss/odoo-editor/powerbox.dark.scss | 16 ++++++++++++++++ .../src/scss/odoo-editor/tablepicker.dark.scss | 13 +++++++++++++ .../src/scss/odoo-editor/tableui.dark.scss | 11 +++++++++++ .../src/scss/web_editor.common.dark.scss | 7 +++++++ .../static/src/scss/wysiwyg.dark.scss | 17 +++++++++++++++++ addons/website/__manifest__.py | 12 ++++++++++++ .../configurator/configurator.dark.scss | 6 ++++++ .../static/src/components/dialog/seo.dark.scss | 6 ++++++ .../website_loader/website_loader.dark.scss | 6 ++++++ .../static/src/scss/website.backend.dark.scss | 7 +++++++ .../src/scss/onboarding.variables.dark.scss | 18 ++++++++++++++++++ 25 files changed, 213 insertions(+) create mode 100644 addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss create mode 100644 addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss create mode 100644 addons/mail/static/src/components/attachment_viewer/attachment_viewer.dark.scss create mode 100644 addons/mail/static/src/components/call_action_list/call_action_list.dark.scss create mode 100644 addons/mail/static/src/components/call_participant_card/call_participant_card.dark.scss create mode 100644 addons/mail/static/src/components/call_view/call_view.dark.scss create mode 100644 addons/mail/static/src/components/chat_window_header/chat_window_header.dark.scss create mode 100644 addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.dark.scss create mode 100644 addons/mail/static/src/components/message_action_list/message_action_list.dark.scss create mode 100644 addons/mail/static/src/components/message_action_view/message_action_view.dark.scss create mode 100644 addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss create mode 100644 addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss create mode 100644 addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss create mode 100644 addons/web_editor/static/src/scss/web_editor.common.dark.scss create mode 100644 addons/web_editor/static/src/scss/wysiwyg.dark.scss create mode 100644 addons/website/static/src/client_actions/configurator/configurator.dark.scss create mode 100644 addons/website/static/src/components/dialog/seo.dark.scss create mode 100644 addons/website/static/src/components/website_loader/website_loader.dark.scss create mode 100644 addons/website/static/src/scss/website.backend.dark.scss create mode 100644 odoo/addons/base/static/src/scss/onboarding.variables.dark.scss diff --git a/addons/hr_holidays/__manifest__.py b/addons/hr_holidays/__manifest__.py index 295fda03633..733d75b370f 100644 --- a/addons/hr_holidays/__manifest__.py +++ b/addons/hr_holidays/__manifest__.py @@ -83,6 +83,14 @@ A synchronization with an internal agenda (Meetings of the CRM module) is also p 'hr_holidays/static/src/tours/*.js', 'hr_holidays/static/src/radio_image_field/*.js', 'hr_holidays/static/src/radio_image_field/*.xml', + + # Don't include dark mode files in light mode + ('remove', 'hr_holidays/static/src/views/**/*.dark.scss'), + ('remove', 'hr_holidays/static/src/dashboard/**/*.dark.scss'), + ], + "web.dark_mode_assets_backend": [ + 'hr_holidays/static/src/views/**/*.dark.scss', + 'hr_holidays/static/src/dashboard/**/*.dark.scss', ], 'web.tests_assets': [ 'hr_holidays/static/tests/helpers/**/*', diff --git a/addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss b/addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss new file mode 100644 index 00000000000..18f431a8982 --- /dev/null +++ b/addons/hr_holidays/static/src/dashboard/time_off_card.dark.scss @@ -0,0 +1,6 @@ +// = HR Holidays +// ============================================================================ +// No CSS hacks, variables overrides only +.o_timeoff_card { + --timeOffCard-icon-filter: invert(1) brightness(2); +} diff --git a/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss new file mode 100644 index 00000000000..5dc1764395f --- /dev/null +++ b/addons/hr_holidays/static/src/views/calendar/filter_panel/calendar_filter_panel.dark.scss @@ -0,0 +1,8 @@ +// = HR Holidays +// ============================================================================ +// No CSS hacks, variables overrides only +.o_calendar_filter { + --calendarFilter-icon--plain: url("/hr/static/src/img/icons/plain_dark.svg"); + --calendarFilter-icon--hatched: url("/hr/static/src/img/icons/hatched_dark.svg"); + --calendarFilter-icon--line: url("/hr/static/src/img/icons/line_dark.svg"); +} diff --git a/addons/mail/__manifest__.py b/addons/mail/__manifest__.py index dbb66178680..5977ca97432 100644 --- a/addons/mail/__manifest__.py +++ b/addons/mail/__manifest__.py @@ -204,6 +204,12 @@ For more specific needs, you may also assign custom-defined actions 'mail/static/src/webclient/commands/*.js', 'mail/static/src/widgets/*/*.js', 'mail/static/src/widgets/*/*.scss', + + # Don't include dark mode files in light mode + ('remove', 'mail/static/src/components/*/*.dark.scss'), + ], + "web.dark_mode_assets_backend": [ + 'mail/static/src/components/*/*.dark.scss', ], 'web.assets_backend_prod_only': [ 'mail/static/src/main.js', diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.dark.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.dark.scss new file mode 100644 index 00000000000..2b58a834947 --- /dev/null +++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.dark.scss @@ -0,0 +1,7 @@ +// = Attachment Viewer View +// ============================================================================ +// No CSS hacks, variables overrides only + +.o_AttachmentViewer_toolbarButton { + --AttachmentViewer_toolbarButton-background-color: #{$o-gray-200}; +} diff --git a/addons/mail/static/src/components/call_action_list/call_action_list.dark.scss b/addons/mail/static/src/components/call_action_list/call_action_list.dark.scss new file mode 100644 index 00000000000..c507d9a18e5 --- /dev/null +++ b/addons/mail/static/src/components/call_action_list/call_action_list.dark.scss @@ -0,0 +1,7 @@ +// = Call Action List View +// ============================================================================ +// No CSS hacks, variables overrides only + +.o_CallActionList_button:not(.btn-danger) { + --CallActionList_button-background-color: #{$o-gray-200}; +} diff --git a/addons/mail/static/src/components/call_participant_card/call_participant_card.dark.scss b/addons/mail/static/src/components/call_participant_card/call_participant_card.dark.scss new file mode 100644 index 00000000000..69d8a10574a --- /dev/null +++ b/addons/mail/static/src/components/call_participant_card/call_participant_card.dark.scss @@ -0,0 +1,7 @@ +// = Call Participant Card View +// ============================================================================ +// No CSS hacks, variables overrides only + +.o_CallParticipantCard_avatarFrame { + --CallParticipantCard_avatarFrame-background-color: #{$o-gray-100}; +} diff --git a/addons/mail/static/src/components/call_view/call_view.dark.scss b/addons/mail/static/src/components/call_view/call_view.dark.scss new file mode 100644 index 00000000000..4bbe45efd3d --- /dev/null +++ b/addons/mail/static/src/components/call_view/call_view.dark.scss @@ -0,0 +1,7 @@ +// = Call View +// ============================================================================ +// No CSS hacks, variables overrides only + +.o_CallView { + --CallView-background-color: #{$o-gray-100}; +} diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.dark.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.dark.scss new file mode 100644 index 00000000000..5e2c91aa023 --- /dev/null +++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.dark.scss @@ -0,0 +1,7 @@ +// = ChatWindow Header View +// ============================================================================ +// No CSS hacks, variables overrides only + +.o_ChatWindowHeader { + --ChatWindowHeader-background-color: #{$o-gray-100}; +} diff --git a/addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.dark.scss b/addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.dark.scss new file mode 100644 index 00000000000..03421537191 --- /dev/null +++ b/addons/mail/static/src/components/emoji_category_bar_view/emoji_category_bar_view.dark.scss @@ -0,0 +1,7 @@ +// = Emoji Category Bar View +// ============================================================================ +// No CSS hacks, variables overrides only + +.o_EmojiCategoryBarView { + --EmojiCategoryBarView-background-color: #{$o-gray-100}; +} diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.dark.scss b/addons/mail/static/src/components/message_action_list/message_action_list.dark.scss new file mode 100644 index 00000000000..3c30c5e37fe --- /dev/null +++ b/addons/mail/static/src/components/message_action_list/message_action_list.dark.scss @@ -0,0 +1,7 @@ +// = Message Action List View +// ============================================================================ +// No CSS hacks, variables overrides only + +.o_MessageActionList { + --MessageActionList-background-color: #{$o-gray-100}; +} diff --git a/addons/mail/static/src/components/message_action_view/message_action_view.dark.scss b/addons/mail/static/src/components/message_action_view/message_action_view.dark.scss new file mode 100644 index 00000000000..f0108c8bd0e --- /dev/null +++ b/addons/mail/static/src/components/message_action_view/message_action_view.dark.scss @@ -0,0 +1,7 @@ +// = Message Action View +// ============================================================================ +// No CSS hacks, variables overrides only + +.o_MessageActionView { + --MessageActionView-background-color--hover: #{$o-gray-300}; +} diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py index 65f38ffda73..7cdcf22df13 100644 --- a/addons/web/__manifest__.py +++ b/addons/web/__manifest__.py @@ -524,6 +524,9 @@ This module provides the core of the Odoo Web Client. "web.dark_mode_assets_backend": [ ('include', 'web.assets_backend'), ], + "web.dark_mode_variables": [ + ('before', 'base/static/src/scss/onboarding.variables.scss', 'base/static/src/scss/onboarding.variables.dark.scss'), + ], # --------------------------------------------------------------------- # SUB BUNDLES diff --git a/addons/web_editor/__manifest__.py b/addons/web_editor/__manifest__.py index 1170461d8cc..140b0d2aed2 100644 --- a/addons/web_editor/__manifest__.py +++ b/addons/web_editor/__manifest__.py @@ -113,6 +113,13 @@ Odoo Web Editor widget. 'web_editor/static/src/js/backend/**/*', 'web_editor/static/src/xml/backend.xml', ], + "web.dark_mode_assets_backend": [ + 'web_editor/static/src/scss/odoo-editor/powerbox.dark.scss', + 'web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss', + 'web_editor/static/src/scss/odoo-editor/tableui.dark.scss', + 'web_editor/static/src/scss/wysiwyg.dark.scss', + 'web_editor/static/src/scss/web_editor.common.dark.scss', + ], 'web.assets_frontend_minimal': [ 'web_editor/static/src/js/frontend/loader_loading.js', ], diff --git a/addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss b/addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss new file mode 100644 index 00000000000..070a9f193d9 --- /dev/null +++ b/addons/web_editor/static/src/scss/odoo-editor/powerbox.dark.scss @@ -0,0 +1,16 @@ +// = Notes powerbox +// ============================================================================ +// No CSS hacks, variables overrides only + +.oe-powerbox-wrapper { + --oePowerbox__wrapper-bg: #{$o-gray-300}; + + --oePowerbox__category-color: #{$o-gray-700}; + + --oePowerbox__commandName-bg: #{$o-gray-200}; + --oePowerbox__commandName-color: #{$o-gray-900}; + --oePowerbox__commandDescription-color: #{$o-gray-500}; + + --oePowerbox__commandImg-bg: #{$o-gray-400}; + --oePowerbox__commandImg-color: #{$o-gray-900}; +} diff --git a/addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss b/addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss new file mode 100644 index 00000000000..7e31572288e --- /dev/null +++ b/addons/web_editor/static/src/scss/odoo-editor/tablepicker.dark.scss @@ -0,0 +1,13 @@ +// = Knowledge: Table +// ============================================================================ +// No CSS hacks, variables overrides only + +.oe-tablepicker-wrapper { + --oeTablepicker__wrapper-bg: #{$o-gray-300}; + --oeTablepicker-color-accent: #{$o-brand-primary}; +} + +.oe-tablepicker { + --oeTablepicker__cell-bg: #{$o-gray-200}; +} + diff --git a/addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss b/addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss new file mode 100644 index 00000000000..d7adc3b6c2c --- /dev/null +++ b/addons/web_editor/static/src/scss/odoo-editor/tableui.dark.scss @@ -0,0 +1,11 @@ +// = Table UI +// ============================================================================ +// No CSS hacks, variables overrides only + +.o_table_ui { + --o-table-ui-bg: #{$o-gray-300}; + --o-table-ui-color: #{$o-gray-900}; + --o-table-ui-border: #{$o-gray-200}; + --o-table-ui-hover: #{$o-gray-200}; +} + diff --git a/addons/web_editor/static/src/scss/web_editor.common.dark.scss b/addons/web_editor/static/src/scss/web_editor.common.dark.scss new file mode 100644 index 00000000000..c8240de1971 --- /dev/null +++ b/addons/web_editor/static/src/scss/web_editor.common.dark.scss @@ -0,0 +1,7 @@ +// = Web Editor Common Variables +// ============================================================================ +// No CSS hacks, variables overrides only + +.o_we_search_prompt { + --WebEditor__SearchPromptArrow-filter: invert(1); +} diff --git a/addons/web_editor/static/src/scss/wysiwyg.dark.scss b/addons/web_editor/static/src/scss/wysiwyg.dark.scss new file mode 100644 index 00000000000..d32fab262d6 --- /dev/null +++ b/addons/web_editor/static/src/scss/wysiwyg.dark.scss @@ -0,0 +1,17 @@ +// = Wysiwyg Variables +// ============================================================================ +// No CSS hacks, variables overrides only + +.oe-toolbar.oe-floating { + --o-we-toolbar-bg: #{$o-gray-300}; + --o-we-toolbar-bg-active: #{$o-gray-400}; + --o-we-toolbar-border: #{$o-gray-200}; + --o-we-toolbar-color-text: #{$o-gray-800}; + --o-we-toolbar-color-accent: #{$o-brand-primary}; + --o-we-toolbar-color-clickable: #{$o-gray-800}; + --o-we-toolbar-color-clickable-active: #{$o-black}; +} + +.o_link_dialog_preview { + --o-link-dialog-preview-border: #{$border-width} solid #{$border-color}; +} diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py index 7e38622b29d..94bce3fb6c2 100644 --- a/addons/website/__manifest__.py +++ b/addons/website/__manifest__.py @@ -182,6 +182,15 @@ 'website/static/src/components/views/*', 'website/static/src/services/website_service.js', 'website/static/src/js/utils.js', + + # Don't include dark mode files in light mode + ('remove', 'website/static/src/client_actions/*/*.dark.scss'), + ], + "web.dark_mode_assets_backend": [ + 'website/static/src/components/dialog/*.dark.scss', + 'website/static/src/scss/website.backend.dark.scss', + 'website/static/src/client_actions/*/*.dark.scss', + 'website/static/src/components/website_loader/website_loader.dark.scss' ], 'web.assets_common': [ 'website/static/src/js/tours/tour_utils.js', @@ -274,6 +283,9 @@ 'website/static/src/client_actions/*/*.xml', 'website/static/src/components/website_loader/*.xml', 'website/static/src/js/backend/**/*', + + # Don't include dark mode files in light mode + ('remove', 'website/static/src/components/dialog/*.dark.scss'), ], 'website.test_bundle': [ '/web/static/lib/qweb/qweb2.js', diff --git a/addons/website/static/src/client_actions/configurator/configurator.dark.scss b/addons/website/static/src/client_actions/configurator/configurator.dark.scss new file mode 100644 index 00000000000..c46d66cf648 --- /dev/null +++ b/addons/website/static/src/client_actions/configurator/configurator.dark.scss @@ -0,0 +1,6 @@ +// = Website Configuration +// ============================================================================ +// No CSS hacks, variables overrides only +.o_configurator_odoo_logo { + --configurator-logo: url(/web/static/img/odoo_logo_dark.svg); +} diff --git a/addons/website/static/src/components/dialog/seo.dark.scss b/addons/website/static/src/components/dialog/seo.dark.scss new file mode 100644 index 00000000000..86a7fa019f6 --- /dev/null +++ b/addons/website/static/src/components/dialog/seo.dark.scss @@ -0,0 +1,6 @@ +// = Website SEO +// ============================================================================ +// No CSS hacks, variables overrides only +.oe_seo_configuration { + --seo__preview-title-color: #8ab4f8; // Google Search dark-mode color +} diff --git a/addons/website/static/src/components/website_loader/website_loader.dark.scss b/addons/website/static/src/components/website_loader/website_loader.dark.scss new file mode 100644 index 00000000000..7e5d8a24230 --- /dev/null +++ b/addons/website/static/src/components/website_loader/website_loader.dark.scss @@ -0,0 +1,6 @@ +// = Website Loader +// ============================================================================ +// No CSS hacks, variables overrides only +.o_website_loader_container { + --website-loader-color: #FFFFFF; +} diff --git a/addons/website/static/src/scss/website.backend.dark.scss b/addons/website/static/src/scss/website.backend.dark.scss new file mode 100644 index 00000000000..d3c8dc719f4 --- /dev/null +++ b/addons/website/static/src/scss/website.backend.dark.scss @@ -0,0 +1,7 @@ +// = Website Backend +// ============================================================================ +// No CSS hacks, variables overrides only + +.o_demo_background { + --Dashboard__demoBackground: url("/website/static/src/img/website_dashboard_visit_demo_dark_mode.png"); +} diff --git a/odoo/addons/base/static/src/scss/onboarding.variables.dark.scss b/odoo/addons/base/static/src/scss/onboarding.variables.dark.scss new file mode 100644 index 00000000000..779c63f5a7f --- /dev/null +++ b/odoo/addons/base/static/src/scss/onboarding.variables.dark.scss @@ -0,0 +1,18 @@ +// = Onboarding Colors +// ============================================================================ +// No CSS hacks, variables overrides only + +$o-onboarding-colors: ( + 'blue': ( + 'bg': (#215e72, #1c3d4e), + 'ui': (#db851e, #c0ad73), + ), + 'orange': ( + 'bg': (#5c4436, #784536), + 'ui': ($o-brand-primary, #68B3C9), + ), + 'violet': ( + 'bg': (#424a7d, #333e6a), + 'ui': (#db851e, #c0ad73), + ), +) !default;