[IMP] web: new navbar in community

The navbar in community now looks more like the navbar in enterprise.

Here is a sum-up of the changes in community:

- The navbar in community is now in blue, instead of black.
- No more app list that almost fills the whole navbar: there is
  now an "Apps Menu" in the left-most side of the navbar.
- No more sidebar for the menus inside an app: those menus are
  now located in the middle part of the navbar.

The navbar in community does not support mobile (< 768px width),
but it should still somewhat usable on most mobile devices.
As for the website navbar, it has been unchanged and should still
support mobile layout.

Task-ID 1878649

5 files changed, 172 insertions, 246 deletions

diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss
index 2d865dd70d9..160a1b87558 100644
--- a/addons/web/static/src/scss/navbar.scss
+++ b/addons/web/static/src/scss/navbar.scss
@@ -28,6 +28,10 @@
         }
     }
 
+    .o_app {
+        cursor: pointer;
+    }
+
     > .o_menu_brand {
         display: block;
         float: left;
@@ -37,13 +41,7 @@
         font-size: 22px;
         font-weight: 500;
         line-height: $o-navbar-height;
-
-        @include media-breakpoint-down(sm) {
-            float: none;
-            margin: 0;
-            border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
-            color: transparent;
-        }
+        cursor: pointer;
     }
 
     > .o_menu_toggle {
@@ -146,79 +144,4 @@
             transform: translateY(-2px);
         }
     }
-
-    @include media-breakpoint-down(sm) {
-        transition: height 200ms linear 0s;
-
-        position: relative;
-        height: $o-navbar-height;
-        overflow: hidden;
-
-        > ul {
-            > li {
-                float: none;
-                .dropdown-backdrop {
-                    display: none;
-                }
-
-                .dropdown-menu.show {
-                    max-height: none;
-                }
-            }
-
-            &.o_menu_sections {
-                width: 100%;
-
-                .dropdown-menu.show {
-                    position: static;
-                    float: none;
-                    background-color: transparent;
-                    box-shadow: none;
-                    border: none;
-                    overflow: visible;
-
-                    > .dropdown-item {
-                        background-color: transparent;
-                        color: inherit;
-                    }
-                }
-            }
-
-            &.o_menu_systray {
-                @include o-position-absolute(0px, $o-navbar-height, auto, $o-navbar-height);
-                height: $o-navbar-height;
-                text-align: right;
-
-                > li {
-                    display: inline-block;
-
-                    .dropdown-menu.show {
-                        @include o-position-absolute($o-navbar-height, 0, 0, 0);
-                        position: fixed;
-                        width: auto;
-                    }
-                }
-
-                .o_user_menu .oe_topbar_name {
-                    display: none;
-                }
-            }
-        }
-    }
-}
-
-@include media-breakpoint-down(sm) {
-    body.o_mobile_menu_opened > .o_main_navbar {
-        height: 100%;
-        overflow: auto;
-    }
-}
-
-@include media-breakpoint-down(sm) {
-    .o_switch_company_menu > .dropdown-menu {
-        padding-top: 0px;
-        .bg-info {
-            padding: 10px;
-        }
-    }
 }
diff --git a/addons/web/static/src/scss/navbar_mobile.scss b/addons/web/static/src/scss/navbar_mobile.scss
new file mode 100644
index 00000000000..6ef917b8517
--- /dev/null
+++ b/addons/web/static/src/scss/navbar_mobile.scss
@@ -0,0 +1,95 @@
+
+.o_main_navbar {
+    .o_app {
+        @include media-breakpoint-down(sm) {
+            float: none;
+            margin: 0;
+            border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
+            color: transparent !important;
+        }
+    }
+
+    > .o_menu_brand {
+        @include media-breakpoint-down(sm) {
+            float: none;
+            margin: 0;
+            border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
+            color: transparent !important;
+        }
+    }
+
+    @include media-breakpoint-down(sm) {
+        transition: height 200ms linear 0s;
+
+        position: relative;
+        height: $o-navbar-height;
+        overflow: hidden;
+
+        > ul {
+            > li {
+                float: none;
+                .dropdown-backdrop {
+                    display: none;
+                }
+
+                .dropdown-menu.show {
+                    max-height: none;
+                }
+            }
+
+            &.o_menu_sections {
+                width: 100%;
+
+                .dropdown-menu.show {
+                    position: static;
+                    float: none;
+                    background-color: transparent;
+                    box-shadow: none;
+                    border: none;
+                    overflow: visible;
+
+                    > .dropdown-item {
+                        background-color: transparent;
+                        color: inherit;
+                    }
+                }
+            }
+
+            &.o_menu_systray {
+                @include o-position-absolute(0px, $o-navbar-height, auto, $o-navbar-height);
+                height: $o-navbar-height;
+                text-align: right;
+
+                > li {
+                    display: inline-block;
+
+                    .dropdown-menu.show {
+                        @include o-position-absolute($o-navbar-height, 0, 0, 0);
+                        position: fixed;
+                        width: auto;
+                    }
+                }
+
+                .o_user_menu .oe_topbar_name {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    body.o_mobile_menu_opened > .o_main_navbar {
+        height: 100%;
+        overflow: auto;
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .o_switch_company_menu > .dropdown-menu {
+        padding-top: 0px;
+        .bg-info {
+            padding: 10px;
+        }
+    }
+}
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 7601c2225a7..e3b520e47f1 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -74,7 +74,7 @@ $o-avatar-size: 90px;
 $o-statusbar-height: 33px;
 
 $o-label-font-size-factor: 0.8;
-$o-navbar-height: 34px;
+$o-navbar-height: 46px;
 
 $o-nb-calendar-colors: 24;
 
diff --git a/addons/web/static/src/scss/webclient_extra.scss b/addons/web/static/src/scss/webclient_extra.scss
index a79a9d34a2a..8e8e3630e70 100644
--- a/addons/web/static/src/scss/webclient_extra.scss
+++ b/addons/web/static/src/scss/webclient_extra.scss
@@ -24,17 +24,11 @@ select {
 //------------------------------------------------------------------------------
 // Loading
 //------------------------------------------------------------------------------
+
 .o_loading {
-    position: fixed;
-    top: 0;
-    right: 50%;
-    padding: 4px 12px;
-    background-color: $o-enterprise-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ?
+    background-color: $o-brand-odoo;
     color: white;
-    text-align: center;
-    border-top: none;
-    border-bottom-right-radius: 8px;
-    border-bottom-left-radius: 8px;
+    padding: 4px;
 }
 
 //------------------------------------------------------------------------------
diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss
index 5fe5ab08c8b..c03e519021b 100644
--- a/addons/web/static/src/scss/webclient_layout.scss
+++ b/addons/web/static/src/scss/webclient_layout.scss
@@ -1,176 +1,90 @@
+// ------------------------------------------------------------------
+// Base layout rules, use the 'webclient.scss' file for styling
+// ------------------------------------------------------------------
+html {
+    height: 100%;
 
-.o_web_client {
-    display: flex;
-    flex-flow: column nowrap;
-    overflow: hidden;
-
-    &.o_fullscreen {
-        #oe_main_menu_navbar {
-            display: none;
-        }
-        .o_main .o_sub_menu {
-            display: none;
-        }
-    }
-
-
-    .navbar {
-        flex: 0 0 auto;
-
-        li > a {
-            padding: 4px 8px;
-            margin-top: 2px;
-            font-size: 13px;
-        }
-
-        .oe_topbar_avatar {
-            max-height: 18px;
-            width: 18px;
-            margin-top: -4px;
-        }
-
-        .oe_systray, .oe_user_menu_placeholder {
-            > li {
-                position: relative;
-                padding: 4px 0px;
-
-                > a {
-                    @include o-hover-text-color($navbar-dark-color, $navbar-dark-active-color);
-                }
-            }
-        }
-    }
-
-    > .o_main {
-        flex: 1 1 auto;
-        display: flex;
-        min-height: 0; // Allow flex to shrink this element as much as it wants
+    .o_web_client {
         height: 100%;
+        display: flex;
+        flex-flow: column nowrap;
 
-        .o_sub_menu {
-            flex: 0 0 220px;
+        > .o_main {
+            flex: 1 1 auto;
             display: flex;
-            flex-flow: column nowrap;
-            border-right: 1px solid darken($o-control-panel-background-color, 20%);
-            background-color: $o-control-panel-background-color;
+            min-height: 0; // Allow flex to shrink this element as much as it wants
+            height: 100%;
 
-            .o_sub_menu_logo {
-                flex: 0 0 auto;
-                text-align: center;
-                position: relative;
+            .o_main_content {
+                flex: 1 1 auto;
+                display: flex;
+                flex-flow: column nowrap;
 
-                > img {
-                    margin: 14px 0;
+                .o_control_panel {
+                    flex: 0 0 auto;
                 }
+                .o_content {
+                    flex: 1 1 auto;
+                    height: 100%;
+                    overflow: auto;
+                    position: relative;
 
-                .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_view_controller {
+                        @include o-position-absolute(0, 0, 0, 0);  // Get the 100% height of its flex parent
+                        height: 100%;
+                    }
                 }
             }
+        }
 
-            .o_sub_menu_content {
-                flex: 1 1 auto;
-                height:100%;
-                overflow-y: auto;
-
-                .oe_secondary_menu_section {
-                    font-weight: bold;
-                    margin-left: 8px;
-                    color: $o-brand-primary;
-                }
-                .oe_secondary_submenu {
-                    margin: 3px 0px 10px;
-                    line-height: 1.1em;
-                    >li:not(.active) > a {
-                        color: $o-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 {
-                        @include 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_fullscreen {
+            .o_main_navbar {
+                display: none;
             }
+        }
 
-            .o_sub_menu_footer {
-                flex: 0 0 auto;
-                text-align: center;
+        .o_main_navbar {
+            flex: 0 0 auto;
+        }
 
-                > a {
-                    font-weight: bold;
-                    > span {
-                        color: $o-enterprise-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ?
-                    }
-                }
-            }
+        .o_control_panel {
+            flex: 0 0 auto;
         }
 
-        .o_main_content {
+        .o_content {
+            direction: ltr; //Define direction attribute here so when rtlcss preprocessor run, it converts it to rtl
             flex: 1 1 auto;
-            display: flex;
-            flex-flow: column nowrap;
-
-            .o_control_panel {
-                flex: 0 0 auto;
-            }
-            .o_content {
-                flex: 1 1 auto;
+            position: relative;  // Allow to redistribute the 100% height to its child
+
+            > .o_view_controller {
+                position: absolute;  // Get the 100% height of its flex parent
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
                 height: 100%;
-                overflow: auto;
-                position: relative;
-
-                > .o_view_controller {
-                    @include o-position-absolute(0, 0, 0, 0);  // Get the 100% height of its flex parent
-                    height: 100%;
-                }
+                direction: ltr;
             }
         }
     }
+
+    .o_loading {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        z-index: $zindex-modal + 1;
+    }
+}
+
+@media print {
+    html .o_web_client {
+        .o_main_navbar {
+            display: none;
+        }
+        .o_content {
+            position: static;
+            overflow: visible;
+            height: auto;
+        }
+    }
 }