From 9dede9ae5a96757ec592b21f6188ae5534d02c37 Mon Sep 17 00:00:00 2001 From: Volkan TASCI Date: Fri, 4 Sep 2026 16:16:13 +0300 Subject: [PATCH] [ADD] web_theme_focus: minimal focus backend theme Adds a "Focus" option to web_responsive's app-menu theme picker (res.users.apps_menu_theme): larger app icons with more spacing, no search bar on the home screen, and a full-bleed gradient behind a transparent top navbar. - Light background reuses web_responsive's Milk theme overlay (OCA/web, LGPL-3) with the Milk gradient. - Dark background is a pure CSS gradient (no image), loaded via the web.assets_web_dark bundle. - The active theme is mirrored onto from a WebClient.setup patch so CSS can style the navbar and app-menu container outside .o_grid_apps_menu. - Tests cover the selection value, the dark-bundle asset registration, and session-info theme propagation. --- web_theme_focus/README.rst | 105 ++++++++++++++++++ web_theme_focus/__init__.py | 1 + web_theme_focus/__manifest__.py | 26 +++++ web_theme_focus/i18n/tr.po | 21 ++++ web_theme_focus/i18n/web_theme_focus.pot | 19 ++++ web_theme_focus/models/__init__.py | 1 + web_theme_focus/models/res_users.py | 13 +++ web_theme_focus/pyproject.toml | 3 + web_theme_focus/readme/CONTRIBUTORS.md | 1 + web_theme_focus/readme/DESCRIPTION.md | 8 ++ web_theme_focus/readme/ROADMAP.md | 4 + web_theme_focus/static/description/icon.png | Bin 0 -> 10254 bytes web_theme_focus/static/description/index.html | 12 ++ .../src/img/app_switcher_background_light.svg | 6 + .../static/src/js/app_theme.esm.js | 20 ++++ .../static/src/scss/apps_menu.dark.scss | 10 ++ .../static/src/scss/apps_menu.scss | 37 ++++++ .../static/src/scss/navbar.dark.scss | 24 ++++ web_theme_focus/static/src/scss/navbar.scss | 56 ++++++++++ web_theme_focus/tests/__init__.py | 1 + web_theme_focus/tests/test_apps_menu_theme.py | 68 ++++++++++++ 21 files changed, 436 insertions(+) create mode 100644 web_theme_focus/README.rst create mode 100644 web_theme_focus/__init__.py create mode 100644 web_theme_focus/__manifest__.py create mode 100644 web_theme_focus/i18n/tr.po create mode 100644 web_theme_focus/i18n/web_theme_focus.pot create mode 100644 web_theme_focus/models/__init__.py create mode 100644 web_theme_focus/models/res_users.py create mode 100644 web_theme_focus/pyproject.toml create mode 100644 web_theme_focus/readme/CONTRIBUTORS.md create mode 100644 web_theme_focus/readme/DESCRIPTION.md create mode 100644 web_theme_focus/readme/ROADMAP.md create mode 100644 web_theme_focus/static/description/icon.png create mode 100644 web_theme_focus/static/description/index.html create mode 100644 web_theme_focus/static/src/img/app_switcher_background_light.svg create mode 100644 web_theme_focus/static/src/js/app_theme.esm.js create mode 100644 web_theme_focus/static/src/scss/apps_menu.dark.scss create mode 100644 web_theme_focus/static/src/scss/apps_menu.scss create mode 100644 web_theme_focus/static/src/scss/navbar.dark.scss create mode 100644 web_theme_focus/static/src/scss/navbar.scss create mode 100644 web_theme_focus/tests/__init__.py create mode 100644 web_theme_focus/tests/test_apps_menu_theme.py diff --git a/web_theme_focus/README.rst b/web_theme_focus/README.rst new file mode 100644 index 000000000000..be818b1b7ef7 --- /dev/null +++ b/web_theme_focus/README.rst @@ -0,0 +1,105 @@ +.. image:: https://odoo-community.org/readme-banner-image + :target: https://odoo-community.org/get-involved?utm_source=readme + :alt: Odoo Community Association + +============= +Web Theme Focus +============= + +.. + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! source digest: sha256:35fa12694771a295a3f9c38e345df0d789738eeee0a8656de912b5a16c1ce656 + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png + :target: https://odoo-community.org/page/development-status + :alt: Beta +.. |badge2| image:: https://img.shields.io/badge/license-AGPL--3-blue.png + :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html + :alt: License: AGPL-3 +.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github + :target: https://github.com/OCA/web/tree/19.0/web_theme_focus + :alt: OCA/web +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/web-19-0/web-19-0-web_theme_focus + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png + :target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=19.0 + :alt: Try me on Runboat + +|badge1| |badge2| |badge3| |badge4| |badge5| + +Adds a Focus selectable backend theme for the app menu. + +It extends web_responsive's app-menu theme picker with a "Focus" +option that applies the Focus app-switcher gradient background +(light and dark) and makes the top navbar transparent on the home-menu +screen, so the gradient is full-bleed. The module does not aim to fully +replicate Odoo Enterprise; it modernizes the webclient appearance. + +The light background reuses ``web_responsive``'s Milk theme overlay +(OCA/web, LGPL-3); the dark variant uses a darker palette. + +**Table of contents** + +.. contents:: + :local: + +Known issues / Roadmap +====================== + +Known issues and future enhancements: + +- Brand/surface color overrides (light + dark) for the Focus theme. +- Additional modern design tweaks. + +Bug Tracker +=========== + +Bugs are tracked on `GitHub Issues `_. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us to smash it by providing a detailed and welcomed +`feedback `_. + +Do not contact contributors directly about support or help with technical issues. + +Credits +======= + +Authors +------- + +* volkantasci + +Contributors +------------ + +- volkantasci https://github.com/volkantasci + +Maintainers +----------- + +This module is maintained by the OCA. + +.. image:: https://odoo-community.org/logo.png + :alt: Odoo Community Association + :target: https://odoo-community.org + +OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use. + +.. |maintainer-volkantasci| image:: https://github.com/volkantasci.png?size=40px + :target: https://github.com/volkantasci + :alt: volkantasci + +Current `maintainer `__: + +|maintainer-volkantasci| + +This module is part of the `OCA/web `_ project on GitHub. + +You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/web_theme_focus/__init__.py b/web_theme_focus/__init__.py new file mode 100644 index 000000000000..0650744f6bc6 --- /dev/null +++ b/web_theme_focus/__init__.py @@ -0,0 +1 @@ +from . import models diff --git a/web_theme_focus/__manifest__.py b/web_theme_focus/__manifest__.py new file mode 100644 index 000000000000..5d8d343af88a --- /dev/null +++ b/web_theme_focus/__manifest__.py @@ -0,0 +1,26 @@ +# Copyright 2026 volkantasci +# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). + +{ + "name": "Web Theme Focus", + "summary": "Focus theme - larger icons, hidden search, transparent navbar", + "license": "AGPL-3", + "version": "19.0.1.0.0", + "website": "https://github.com/OCA/web", + "author": "volkantasci, Odoo Community Association (OCA)", + "maintainers": ["volkantasci"], + "category": "Extra Tools", + "depends": ["web", "web_dark_mode", "web_responsive"], + "excludes": ["web_enterprise"], + "installable": True, + "assets": { + "web.assets_backend": [ + "web_theme_focus/static/src/js/app_theme.esm.js", + "web_theme_focus/static/src/scss/apps_menu.scss", + "web_theme_focus/static/src/scss/navbar.scss", + ], + "web.assets_web_dark": [ + "web_theme_focus/static/src/**/*.dark.scss", + ], + }, +} diff --git a/web_theme_focus/i18n/tr.po b/web_theme_focus/i18n/tr.po new file mode 100644 index 000000000000..5d9b4e755ffa --- /dev/null +++ b/web_theme_focus/i18n/tr.po @@ -0,0 +1,21 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_theme_focus +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 19.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2026-09-01 12:00+0000\n" +"Last-Translator: volkantasci\n" +"Language-Team: \n" +"Language: tr\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n != 1;\n" + +#. module: web_theme_focus +#: model:ir.model.fields.selection,name:web_theme_focus.selection__res_users__apps_menu_theme__focus +msgid "Focus" +msgstr "Odak" diff --git a/web_theme_focus/i18n/web_theme_focus.pot b/web_theme_focus/i18n/web_theme_focus.pot new file mode 100644 index 000000000000..8bdc1355dc09 --- /dev/null +++ b/web_theme_focus/i18n/web_theme_focus.pot @@ -0,0 +1,19 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_theme_focus +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 19.0\n" +"Report-Msgid-Bugs-To: \n" +"Last-Translator: \n" +"Language-Team: \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: \n" + +#. module: web_theme_focus +#: model:ir.model.fields.selection,name:web_theme_focus.selection__res_users__apps_menu_theme__focus +msgid "Focus" +msgstr "" diff --git a/web_theme_focus/models/__init__.py b/web_theme_focus/models/__init__.py new file mode 100644 index 000000000000..8835165330f8 --- /dev/null +++ b/web_theme_focus/models/__init__.py @@ -0,0 +1 @@ +from . import res_users diff --git a/web_theme_focus/models/res_users.py b/web_theme_focus/models/res_users.py new file mode 100644 index 000000000000..9701966ce286 --- /dev/null +++ b/web_theme_focus/models/res_users.py @@ -0,0 +1,13 @@ +# Copyright 2026 volkantasci +# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). + +from odoo import fields, models + + +class ResUsers(models.Model): + _inherit = "res.users" + + apps_menu_theme = fields.Selection( + selection_add=[("focus", "Focus")], + ondelete={"focus": "cascade"}, + ) diff --git a/web_theme_focus/pyproject.toml b/web_theme_focus/pyproject.toml new file mode 100644 index 000000000000..4231d0cccb3d --- /dev/null +++ b/web_theme_focus/pyproject.toml @@ -0,0 +1,3 @@ +[build-system] +requires = ["whool"] +build-backend = "whool.buildapi" diff --git a/web_theme_focus/readme/CONTRIBUTORS.md b/web_theme_focus/readme/CONTRIBUTORS.md new file mode 100644 index 000000000000..28146e14fdcd --- /dev/null +++ b/web_theme_focus/readme/CONTRIBUTORS.md @@ -0,0 +1 @@ +- volkantasci diff --git a/web_theme_focus/readme/DESCRIPTION.md b/web_theme_focus/readme/DESCRIPTION.md new file mode 100644 index 000000000000..e76dace11df2 --- /dev/null +++ b/web_theme_focus/readme/DESCRIPTION.md @@ -0,0 +1,8 @@ +Focus backend theme for the app menu. + +Extends web_responsive's app-menu theme picker with a "Focus" option that +provides a minimal, distraction-free home screen for deployments with few +apps: it hides the search bar, enlarges app icons with more spacing, and +makes the top navbar transparent on the home-menu screen so the gradient +background is full-bleed (light and dark variants). It keeps regular views +unchanged and does not replicate Odoo Enterprise. diff --git a/web_theme_focus/readme/ROADMAP.md b/web_theme_focus/readme/ROADMAP.md new file mode 100644 index 000000000000..5d51d1432291 --- /dev/null +++ b/web_theme_focus/readme/ROADMAP.md @@ -0,0 +1,4 @@ +Known issues and future enhancements: + +- Brand/surface color overrides (light + dark) for the Focus theme. +- Additional modern design tweaks. diff --git a/web_theme_focus/static/description/icon.png b/web_theme_focus/static/description/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..1dcc49c24f364e9adf0afbc6fc0bac6dbecdeb11 GIT binary patch literal 10254 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 +
+

Web Theme Focus

+

Minimal focus backend theme

+

+ Extends web_responsive's app-menu theme picker with a Focus option: + hides the search bar, enlarges app icons with more spacing, and + makes the top navbar transparent for a full-bleed gradient + background (light and dark variants). +

+
+ diff --git a/web_theme_focus/static/src/img/app_switcher_background_light.svg b/web_theme_focus/static/src/img/app_switcher_background_light.svg new file mode 100644 index 000000000000..711d549ef7eb --- /dev/null +++ b/web_theme_focus/static/src/img/app_switcher_background_light.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web_theme_focus/static/src/js/app_theme.esm.js b/web_theme_focus/static/src/js/app_theme.esm.js new file mode 100644 index 000000000000..d624fbcbb6bc --- /dev/null +++ b/web_theme_focus/static/src/js/app_theme.esm.js @@ -0,0 +1,20 @@ +/* Copyright 2026 volkantasci + * License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */ + +import {WebClient} from "@web/webclient/webclient"; +import {patch} from "@web/core/utils/patch"; +import {session} from "@web/session"; + +// Mirror web_responsive's active app-menu theme onto so CSS can reach +// elements outside .o_grid_apps_menu (e.g. the navbar). Odoo 19's patch util +// does not provide this._super — call super.setup(...arguments). +// +// Falls back to "milk" (web_responsive's default theme) if the session info +// carries no apps_menu theme; web_responsive is a hard dependency, so this +// only guards against an unexpectedly empty payload. +patch(WebClient.prototype, { + setup() { + super.setup(...arguments); + document.body.dataset.appTheme = session.apps_menu?.theme || "milk"; + }, +}); diff --git a/web_theme_focus/static/src/scss/apps_menu.dark.scss b/web_theme_focus/static/src/scss/apps_menu.dark.scss new file mode 100644 index 000000000000..d4bde072b985 --- /dev/null +++ b/web_theme_focus/static/src/scss/apps_menu.dark.scss @@ -0,0 +1,10 @@ +// Copyright 2026 volkantasci +// License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). + +/* web_theme_focus — app-menu color variables (dark). */ +body[data-app-theme="focus"] { + --app-menu-background: linear-gradient(135deg, #1d1e23, #101114); + --app-menu-text-color: #c8c8c8; + --app-menu-hover-background: rgba(255, 255, 255, 0.08); + --app-menu-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); +} diff --git a/web_theme_focus/static/src/scss/apps_menu.scss b/web_theme_focus/static/src/scss/apps_menu.scss new file mode 100644 index 000000000000..9f4b0150ba45 --- /dev/null +++ b/web_theme_focus/static/src/scss/apps_menu.scss @@ -0,0 +1,37 @@ +// Copyright 2026 volkantasci +// License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). + +/* web_theme_focus — app-menu color variables (light). + Defined on (set by app_theme.esm.js) so the full-bleed gradient + painted on .o_web_client (see navbar.scss) can read --app-menu-background. */ +body[data-app-theme="focus"] { + --app-menu-background: + url("../img/app_switcher_background_light.svg"), + linear-gradient(to bottom, #e9e6f9, #edebf8); + --app-menu-text-color: #3c3c3c; + --app-menu-text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4); + --app-menu-hover-background: rgba(255, 255, 255, 0.35); +} + +/* Focus app drawer: no search bar, larger app + icons and more spacing between them. Applies to both color schemes. */ +.o_grid_apps_menu[data-theme="focus"] { + .search-container { + display: none !important; + } + + .o-app-menu-list { + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + gap: 0.5rem; + } + + .o-app-menu-item { + padding: 1rem 0.75rem; + gap: 0.5rem; + } + + .o-app-menu-item__icon { + width: 70px; + max-width: 70px; + } +} diff --git a/web_theme_focus/static/src/scss/navbar.dark.scss b/web_theme_focus/static/src/scss/navbar.dark.scss new file mode 100644 index 000000000000..8c872aaea444 --- /dev/null +++ b/web_theme_focus/static/src/scss/navbar.dark.scss @@ -0,0 +1,24 @@ +// Copyright 2026 volkantasci +// License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). + +/* web_theme_focus — dark variant of the full-bleed Focus gradient and the + navbar content color. Loaded via the web.assets_web_dark bundle (dark color + scheme only): overrides the light background-image, and restores the light + (white) navbar content so it stays readable over the dark gradient. */ +body[data-app-theme="focus"].o_apps_menu_opened { + background-image: linear-gradient(135deg, #1d1e23, #101114); + + .o_main_navbar { + color: rgba(255, 255, 255, 0.9); + --NavBar-entry-color: rgba(255, 255, 255, 0.9); + --NavBar-entry-color--hover: #ffffff; + --NavBar-entry-color--active: #ffffff; + --NavBar-brand-color: rgba(255, 255, 255, 0.9); + --NavBar-entry-backgroundColor--hover: rgba(255, 255, 255, 0.08); + --NavBar-entry-backgroundColor--active: rgba(255, 255, 255, 0.08); + } + + .o_grid_apps_menu__button { + color: rgba(255, 255, 255, 0.9) !important; + } +} diff --git a/web_theme_focus/static/src/scss/navbar.scss b/web_theme_focus/static/src/scss/navbar.scss new file mode 100644 index 000000000000..6159c4f5b087 --- /dev/null +++ b/web_theme_focus/static/src/scss/navbar.scss @@ -0,0 +1,56 @@ +// Copyright 2026 volkantasci +// License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). + +/* web_theme_focus — full-bleed Focus gradient behind a transparent navbar. + In Odoo 19 the webclient root IS (body_classname = "o_web_client"), + so the gradient must be painted on body itself, not on a descendant + .o_web_client. web_responsive's .app-menu-container starts below the navbar + (it is a navbar descendant), so its gradient never reaches behind the + navbar. Paint the gradient on body, keep the navbar and the app-menu + container transparent, so one continuous gradient shows through. The + linear-gradient layer is a fallback: even if the SVG cannot be fetched, + the drawer is never blank. + + Light mode: the navbar is transparent over the light gradient, so its + content (normally white, designed for the dark navbar) is re-colored dark + for contrast. Dark mode restores the white content in navbar.dark.scss. */ +body[data-app-theme="focus"].o_apps_menu_opened { + background-image: + url("../img/app_switcher_background_light.svg"), + linear-gradient(to bottom, #e9e6f9, #edebf8); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + .o_main_navbar { + background: transparent !important; + border-bottom: none !important; + box-shadow: none !important; + color: #3c3c3c; + --NavBar-entry-color: #3c3c3c; + --NavBar-entry-color--hover: #1a1a1a; + --NavBar-entry-color--active: #1a1a1a; + --NavBar-brand-color: #3c3c3c; + --NavBar-entry-backgroundColor--hover: rgba(0, 0, 0, 0.06); + --NavBar-entry-backgroundColor--active: rgba(0, 0, 0, 0.06); + } + + .o_grid_apps_menu__button { + color: #3c3c3c !important; + } + + /* The transparent drawer container would let the previously-opened view + show through behind the gradient — hide the action area while the + drawer is open (the full-bleed body gradient takes its place). + visibility alone is not enough: descendants that force + visibility: visible (e.g. kanban card kebab buttons on hover, field + translate buttons) stay visible. opacity: 0 hides the whole subtree. */ + .o_action_manager { + opacity: 0; + visibility: hidden; + } + + .app-menu-container { + background: transparent !important; + } +} diff --git a/web_theme_focus/tests/__init__.py b/web_theme_focus/tests/__init__.py new file mode 100644 index 000000000000..675ae6b3737d --- /dev/null +++ b/web_theme_focus/tests/__init__.py @@ -0,0 +1 @@ +from . import test_apps_menu_theme diff --git a/web_theme_focus/tests/test_apps_menu_theme.py b/web_theme_focus/tests/test_apps_menu_theme.py new file mode 100644 index 000000000000..a950dafa580d --- /dev/null +++ b/web_theme_focus/tests/test_apps_menu_theme.py @@ -0,0 +1,68 @@ +# Copyright 2026 volkantasci +# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). + +import json + +from odoo import Command +from odoo.tests import HttpCase, TransactionCase, tagged + + +class TestAppsMenuTheme(TransactionCase): + def test_selection_includes_focus(self): + selection = self.env["res.users"].fields_get(["apps_menu_theme"])[ + "apps_menu_theme" + ]["selection"] + keys = [key for key, _label in selection] + self.assertIn("focus", keys) + + def test_user_can_be_set_to_focus(self): + user = self.env["res.users"].create( + { + "name": "Focus Theme Test", + "login": "focus_theme_test", + "apps_menu_theme": "focus", + } + ) + self.assertEqual(user.apps_menu_theme, "focus") + + def test_dark_bundle_registers_focus_assets(self): + """The focus dark SCSS files must be part of web.assets_web_dark.""" + asset_paths = self.env["ir.asset"]._get_asset_paths( + "web.assets_web_dark", self.env["ir.asset"]._get_asset_params() + ) + paths = [path for path, *_rest in asset_paths] + self.assertIn("/web_theme_focus/static/src/scss/apps_menu.dark.scss", paths) + self.assertIn("/web_theme_focus/static/src/scss/navbar.dark.scss", paths) + + +@tagged("-at_install", "post_install") +class TestWebclientAssetBundle(HttpCase): + def test_webclient_bootstrap_renders(self): + self.authenticate("admin", "admin") + response = self.url_open("/odoo") + self.assertEqual(response.status_code, 200, response.text[:500]) + + +@tagged("-at_install", "post_install") +class TestSessionInfoTheme(HttpCase): + def test_session_info_reports_focus_theme(self): + self.env["res.users"].create( + { + "name": "Focus Theme Session", + "login": "focus_theme_session", + "password": "focus_theme_session", + "group_ids": [Command.link(self.env.ref("base.group_user").id)], + "apps_menu_theme": "focus", + } + ) + self.authenticate("focus_theme_session", "focus_theme_session") + response = self.url_open("/web") + self.assertEqual(response.status_code, 200, response.text[:500]) + session_info = None + key = "odoo.__session_info__ = " + for line in response.text.splitlines(): + if key in line: + session_info = json.loads(line.split(key, 1)[1].rstrip(";")) + break + self.assertIsNotNone(session_info, "session info not found in /web page") + self.assertEqual(session_info["apps_menu"]["theme"], "focus")