[REF] web: stop duplicating web

Avoid duplicating web addon in enterprise by extracting a common basis.
Enterprise features stay in enterprise, but use that common basis.

Mainly:
 - JS refactoring and linting
 - Conversion of .sass into .less split into multiple files
 - Templates cleaning and DOM simplification
 - Re-generation of web.pot, and update of .po files

1 files changed, 156 insertions, 0 deletions

diff --git a/addons/web/static/src/less/webclient_layout.less b/addons/web/static/src/less/webclient_layout.less
new file mode 100644
index 00000000000..2dab3042aba
--- /dev/null
+++ b/addons/web/static/src/less/webclient_layout.less
@@ -0,0 +1,156 @@
+@odoo-submenu-width: 220px;
+
+.o_web_client {
+    .o-flex-display();
+    .o-flex-flow(column, nowrap);
+    overflow: hidden;
+
+    .navbar {
+        .o-flex(0, 0, auto);
+
+        li > a {
+            padding: 4px 8px;
+            margin-top: 2px;
+            font-size: 13px;
+        }
+
+        .oe_topbar_avatar {
+            max-height: 18px;
+            width: 18px;
+        }
+    }
+
+    > .o_main {
+        .o-flex(1, 1, auto);
+        .o-flex-display();
+        
+        .o_sub_menu {
+            .o-flex(0, 0, @odoo-submenu-width);
+            .o-flex-display();
+            .o-flex-flow(column, nowrap);
+            border-right: 1px solid #afafb6;
+
+            .o_sub_menu_logo {
+                .o-flex(0, 0, auto);
+                text-align: center;
+                position: relative;
+
+                > img {
+                    margin: 14px 0;
+                }
+
+                .oe_logo_edit {
+                    position: absolute;
+                    top: 1px;
+                    width: 100%;
+                    padding: 4px;
+                    margin: 14px 0;
+                    display: none;
+                    color: #eee;
+                    background: rgba(37,37,37,0.9);
+                }
+                &:hover .oe_logo_edit_admin {
+                    display: block;
+                }
+            }
+
+            .o_sub_menu_content {
+                .o-flex(1, 1, auto);
+                height:100%;
+                overflow-y: auto;
+
+                .oe_secondary_menu_section {
+                    font-weight: bold;
+                    margin-left: 8px;
+                    color: @odoo-brand-optional;
+                }
+                .oe_secondary_submenu {
+                    margin: 3px 0px 10px;
+                    line-height: 1.1em;
+                    >li:not(.active) > a {
+                        color: @odoo-main-text-color;
+                    }
+                    > li > a {
+                        padding: 4px 4px 4px 18px;
+                        > .badge {
+                            margin-top: -1px;
+                        }
+                    }
+                    .oe_secondary_submenu {
+                        > li > a {
+                            padding-left: 30px;
+                        }
+                        .oe_secondary_submenu > li > a {
+                            padding-left: 42px;
+                        }
+                    }
+                    .oe_menu_text {
+                        .o-text-overflow();
+                        max-width: 85%;
+                        margin-top: 1px;
+                    }
+                    .oe_menu_toggler:before {
+                        display: inline-block;
+                        width: 0;
+                        height: 0;
+                        content: "&darr";
+                        opacity: 0.5;
+                        text-indent: -99999px;
+                        vertical-align: top;
+                        margin-left: -12px;
+                        margin-top: 4px;
+                        margin-right: 4px;
+                        border-top: 4px solid transparent;
+                        border-bottom: 4px solid transparent;
+                        border-left: 4px solid #4c4c4c;
+                    }
+                    .oe_menu_opened:before {
+                        margin-top: 6px;
+                        margin-left: -16px;
+                        margin-right: 4px;
+                        border-left: 4px solid transparent;
+                        border-right: 4px solid transparent;
+                        border-top: 4px solid #4c4c4c;
+                    }
+                }
+            }
+
+            .o_sub_menu_footer {
+                .o-flex(0, 0, auto);
+                text-align: center;
+
+                > a {
+                    font-weight: bold;
+                    > span {
+                        color: @odoo-color-pink;
+                    }
+                }
+            }
+        }
+
+        .o_main_content {
+            .o-flex(1, 1, auto);
+            .o-flex-display();
+            .o-flex-flow(column, nowrap);
+
+            .o_control_panel {
+                .o-flex(0, 0, auto);
+            }
+            .o_content {
+                .o-flex(1, 1, auto);
+                height: 100%;
+                overflow: auto;
+                position: relative;
+
+                .o_view_manager_content {
+                    .o-position-absolute(0, 0, 0, 0);  // Get the 100% height of its flex parent
+                    height: 100%;
+
+                    .o_view_manager_content {
+                        position: static;  // Reset position for nested view managers
+                    }
+                }
+            }
+        }
+    }
+}