From eab1d2c41a9b8b5b09712897453fe3b25bb17007 Mon Sep 17 00:00:00 2001 From: Pablo Androetto Date: Tue, 4 Aug 2020 05:45:11 -0300 Subject: [PATCH] New style in apps menu scss file to change ui variables easily Deleted unnecesary padding remove unnecesary styles unnecesary styles align menu items to left again search results styles and fixes prettier configuration fix newline at end of file (variables.scss) text color calculation for navbar fix in img url requested fixes Transitions and focus fixes fix in js settimeout margin added in search-container Fix in transition Co-authored-by: Jairo Llopis Remove duplicated css --- .../static/src/css/web_responsive.scss | 69 ++++++++++++++++--- .../static/src/img/home-menu-bg-overlay.svg | 5 ++ .../static/src/js/web_responsive.js | 3 +- web_responsive/static/src/xml/apps.xml | 4 +- 4 files changed, 70 insertions(+), 11 deletions(-) create mode 100644 web_responsive/static/src/img/home-menu-bg-overlay.svg diff --git a/web_responsive/static/src/css/web_responsive.scss b/web_responsive/static/src/css/web_responsive.scss index 0c5b162d2..617f6b56f 100644 --- a/web_responsive/static/src/css/web_responsive.scss +++ b/web_responsive/static/src/css/web_responsive.scss @@ -9,8 +9,8 @@ $chatter_zone_width: 35%; display: flex; flex-direction: column; height: calc(100vh - #{$o-navbar-height}); - max-height: calc(100vh - #{$o-navbar-height}); position: fixed; + margin: 0; width: 100vw; z-index: 100; // Inline style will override our `top`, so we need !important here @@ -131,16 +131,47 @@ $chatter_zone_width: 35%; } } } +.o_main_navbar { + color: color-yiq($o-brand-odoo); + > ul > li > a, + > ul > li > label { + color: color-yiq($o-brand-odoo); + } + .dropdown-menu.show { + max-height: calc(100vh - #{$o-navbar-height}); + } +} // Iconized full screen apps menu .o_menu_apps { .search-input:focus { border-color: $o-brand-primary; } + a.full { + width: $o-navbar-height; + text-align: center; + } + .dropdown-menu.show { + opacity: 1; + visibility: visible; + } + + .dropdown-menu { @include full-screen-dropdown(); + opacity: 0; + visibility: hidden; + transition: visibility 100ms ease, opacity 100ms ease; + background: url("../img/home-menu-bg-overlay.svg"), + linear-gradient( + to bottom, + $o-brand-odoo, + desaturate(lighten($o-brand-odoo, 20%), 15) + ); + background-size: cover; + border-radius: 0; // Display apps in a grid align-content: flex-start; display: flex; @@ -160,6 +191,12 @@ $chatter_zone_width: 35%; display: flex; flex-direction: column; justify-content: flex-start; + background: none; + img { + box-shadow: none; + transition: 300ms ease; + transition-property: box-shadow, transform; + } // Size depends on screen width: 33.33333333%; @@ -171,6 +208,11 @@ $chatter_zone_width: 35%; } } + .o_app:hover img { + transform: translateY(-3px); + box-shadow: 0 9px 12px -4px rgba(0, 0, 0, 0.3); + } + // Hide app icons when searching .has-results ~ .o_app { display: none; @@ -178,9 +220,15 @@ $chatter_zone_width: 35%; .o-app-icon { height: auto; - max-width: 7rem; + max-width: 6rem; } + .o-app-name { + color: white; + margin-top: 4px; + font-size: 1.25rem; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); + } // Search input for menus .form-row { width: 100%; @@ -197,17 +245,22 @@ $chatter_zone_width: 35%; white-space: normal; } + .search-container { + margin-bottom: 1.5rem; + } // Allow to scroll only on results, keeping static search box above .search-container.has-results { height: 100%; - - .search-input { - height: 3em; - } - + margin-bottom: 0; .search-results { - height: calc(100% - 3em); + max-height: calc(100vh - 47px - 4em); + overflow-y: hidden; + overflow-x: scroll; overflow: auto; + background: url("../img/home-menu-bg-overlay.svg"), + linear-gradient(to bottom, gray("200"), gray("white")); + background-position: center; + background-size: cover; } } } diff --git a/web_responsive/static/src/img/home-menu-bg-overlay.svg b/web_responsive/static/src/img/home-menu-bg-overlay.svg new file mode 100644 index 000000000..b9fe251bc --- /dev/null +++ b/web_responsive/static/src/img/home-menu-bg-overlay.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web_responsive/static/src/js/web_responsive.js b/web_responsive/static/src/js/web_responsive.js index e32032a0f..244c867a6 100644 --- a/web_responsive/static/src/js/web_responsive.js +++ b/web_responsive/static/src/js/web_responsive.js @@ -172,7 +172,8 @@ odoo.define("web_responsive", function(require) { */ _searchFocus: function() { if (!config.device.isMobile) { - this.$search_input.focus(); + // This timeout is necessary since the menu has a 100ms fading animation + setTimeout(() => this.$search_input.focus(), 100); } }, diff --git a/web_responsive/static/src/xml/apps.xml b/web_responsive/static/src/xml/apps.xml index 1f194ae0f..f64535d93 100644 --- a/web_responsive/static/src/xml/apps.xml +++ b/web_responsive/static/src/xml/apps.xml @@ -19,7 +19,7 @@ -
+
@@ -34,8 +34,8 @@ class="form-control" />
+
-