diff --git a/web_theme_classic/README.rst b/web_theme_classic/README.rst new file mode 100644 index 000000000..e69de29bb diff --git a/web_theme_classic/__init__.py b/web_theme_classic/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/web_theme_classic/__manifest__.py b/web_theme_classic/__manifest__.py new file mode 100644 index 000000000..afbab3753 --- /dev/null +++ b/web_theme_classic/__manifest__.py @@ -0,0 +1,24 @@ +# Copyright (C) 2022 - Today: GRAP (http://www.grap.coop) +# @author: Sylvain LE GAL (https://twitter.com/legalsylvain) +# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). + +{ + "name": "Web Theme Classic", + "summary": "Contrasted style on fields to improve the UI.", + "version": "16.0.1.0.1", + "author": "GRAP, Odoo Community Association (OCA)", + "maintainers": ["legalsylvain"], + "website": "https://github.com/OCA/web", + "license": "AGPL-3", + "category": "Extra Tools", + "depends": [ + "web", + ], + "assets": { + "web.assets_backend": [ + "/web_theme_classic/static/src/scss/web_theme_classic.scss", + ], + }, + "installable": True, + "application": True, +} diff --git a/web_theme_classic/readme/CONTRIBUTORS.rst b/web_theme_classic/readme/CONTRIBUTORS.rst new file mode 100644 index 000000000..e1525ce04 --- /dev/null +++ b/web_theme_classic/readme/CONTRIBUTORS.rst @@ -0,0 +1 @@ +* Sylvain LE GAL (https://www.twitter.com/legalsylvain) diff --git a/web_theme_classic/readme/DESCRIPTION.rst b/web_theme_classic/readme/DESCRIPTION.rst new file mode 100644 index 000000000..8feb55858 --- /dev/null +++ b/web_theme_classic/readme/DESCRIPTION.rst @@ -0,0 +1,21 @@ +This module extend the Odoo Community Edition ``web`` module to improve visibility +of form view. + +**Rational:** +In Odoo V16, the design is very pure. That's great, but it generates some problem for +users : + +* buttons and fields are not identifiable. (we can not know exactly where there are + until you hover over them with the cursor) + +* there is no indication for the required fields until trying to save (or exit the screen) + +In a way, this module restores the form display of version 15, but preserving the "save on the fly" new feature. + +**Without this module** + +.. figure:: ../static/description/product_template_form_without_module.png + +**With this module** + +.. figure:: ../static/description/product_template_form_with_module.png diff --git a/web_theme_classic/readme/ROADMAP.rst b/web_theme_classic/readme/ROADMAP.rst new file mode 100644 index 000000000..3a8e1bdc8 --- /dev/null +++ b/web_theme_classic/readme/ROADMAP.rst @@ -0,0 +1,2 @@ +* For the time being, the module improves form and search view. Some other improvement could + be done on other part of the UI. diff --git a/web_theme_classic/static/description/product_template_form_with_module.png b/web_theme_classic/static/description/product_template_form_with_module.png new file mode 100644 index 000000000..c8849883a Binary files /dev/null and b/web_theme_classic/static/description/product_template_form_with_module.png differ diff --git a/web_theme_classic/static/description/product_template_form_without_module.png b/web_theme_classic/static/description/product_template_form_without_module.png new file mode 100644 index 000000000..9fa5acbd9 Binary files /dev/null and b/web_theme_classic/static/description/product_template_form_without_module.png differ diff --git a/web_theme_classic/static/src/scss/web_theme_classic.scss b/web_theme_classic/static/src/scss/web_theme_classic.scss new file mode 100644 index 000000000..68dded5a7 --- /dev/null +++ b/web_theme_classic/static/src/scss/web_theme_classic.scss @@ -0,0 +1,92 @@ +/*********************************************************** + Variables +************************************************************/ + +$input-border-color: #cccccc; +$input-border-color-focus: #71639e; +$input-background-color-required: #d2d2ff; +$input-color-placeholder-required: #6c757d; + +$button-border-color: #dee2e6; + +/*********************************************************** + Form View : Handle Fields Borders +************************************************************/ + +.o_input, +.o_field_html > .note-editable { + /* Add border for all editable fields */ + border: 1px solid $input-border-color !important; + border-radius: 3px; + + /* add darker border on focus */ + &:focus { + border-color: $input-border-color-focus !important; + } +} + +.o_field_many2many_selection { + .o_input { + /* Prevent to have double border for many2many tags input fields */ + border: 0px solid !important; + } +} + +/*********************************************************** + Form View : Handle Button Borders +************************************************************/ + +.btn-secondary, +.btn-light { + border-color: $button-border-color; +} + +.btn-light { + &:hover { + border-color: $button-border-color; + } +} + +/*********************************************************** + Form View : Handle Background for required fields +************************************************************/ + +.o_required_modifier { + .o_input { + /* Add background for all editable and required fields */ + background-color: $input-background-color-required !important; + + /* darker placeholder as the background is darker */ + &::placeholder { + color: $input-color-placeholder-required; + } + } +} + +.o_required_modifier.o_field_selection { + /* Specific case for field selection */ + background-color: $input-background-color-required !important; +} + +/*********************************************************** + Search View : Search Bar Input +************************************************************/ +div.o_searchview[role="search"] { + /* Add border for the searchable zone */ + border: 1px solid $input-border-color !important; + border-radius: 3px; + + /* add darker border when input inside has focus */ + &:focus-within { + border-color: $input-border-color-focus !important; + } +} + +/* Adjust padding to avoid items to be sticked to borders */ +div.o_searchview_facet[role="img"] { + padding-left: 2px; +} + +i.o_searchview_icon[role="img"] { + padding-right: 2px; +}