[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

1 files changed, 68 insertions, 154 deletions

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