[ADD] new module web_theme_classic to identify better buttons and fields in Odoo form views

setup/web_theme_classic/odoo/addons/web_theme_classic

@@ -0,0 +1 @@
+../../../../web_theme_classic

setup/web_theme_classic/setup.py

@@ -0,0 +1,6 @@
+import setuptools
+
+setuptools.setup(
+    setup_requires=['setuptools-odoo'],
+    odoo_addon=True,
+)

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,
+}

web_theme_classic/readme/CONTRIBUTORS.rst

@@ -0,0 +1 @@
+* Sylvain LE GAL (https://www.twitter.com/legalsylvain)

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

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.

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;
+}