From ad0fed6cb2407d78da755d6a6efb005cc85c258d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20D=C3=ADaz?= Date: Fri, 14 Jun 2019 22:52:33 +0200 Subject: [PATCH] [IMP] web_responsive: Refactor code --- .../static/src/css/web_responsive.scss | 51 +----- .../static/src/js/web_responsive.js | 159 ++++-------------- 2 files changed, 41 insertions(+), 169 deletions(-) diff --git a/web_responsive/static/src/css/web_responsive.scss b/web_responsive/static/src/css/web_responsive.scss index 40c9f158..62851e19 100644 --- a/web_responsive/static/src/css/web_responsive.scss +++ b/web_responsive/static/src/css/web_responsive.scss @@ -1,52 +1,6 @@ /* Copyright 2018 Tecnativa - Jairo Llopis * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ -// AppMenu icon waiting indicator anim -@keyframes o-app-icon-flash-animation { - 0% { - filter: brightness(1.0); - } - 25% { - filter: brightness(2.0); - } - 50% { - filter: brightness(1.0); - } - 75% { - filter: brightness(2.0); - } - 100% { - filter: brightness(1.0); - } -} -.o-app-waiting img { - animation: 1.3s infinite cubic-bezier(.65,.05,.36,1) o-app-icon-flash-animation; -} -// Menu icon waiting indicator anim -@keyframes o-menu-item-flash-animation { - 0% { - background-color: $dropdown-link-hover-bg; - } - 25% { - background-color: transparent; - } - 50% { - background-color: $dropdown-link-hover-bg; - } - 75% { - background-color: transparent; - } - 100% { - background-color: $dropdown-link-hover-bg; - } -} -.o-menu-item-waiting { - animation: 1.3s infinite cubic-bezier(.65,.05,.36,1) o-menu-item-flash-animation; -} -.o-cursor-waiting { - cursor: progress; -} - @mixin full-screen-dropdown { border: none; box-shadow: none; @@ -552,3 +506,8 @@ html .o_web_client .o_main .o_main_content { } } } + +// Waiting Cursor +.oe_wait { + cursor: progress; +} diff --git a/web_responsive/static/src/js/web_responsive.js b/web_responsive/static/src/js/web_responsive.js index acc54026..7750fd50 100644 --- a/web_responsive/static/src/js/web_responsive.js +++ b/web_responsive/static/src/js/web_responsive.js @@ -74,10 +74,10 @@ odoo.define('web_responsive', function (require) { events: _.extend({ "keydown .search-input input": "_searchResultsNavigate", "input .search-input input": "_searchMenusSchedule", - "click .search-input input": "_searchMenusClicked", "click .o-menu-search-result": "_searchResultChosen", "shown.bs.dropdown": "_searchFocus", "hidden.bs.dropdown": "_searchReset", + "hide.bs.dropdown": "_hideAppsMenu", }, AppsMenu.prototype.events), /** @@ -213,13 +213,6 @@ odoo.define('web_responsive', function (require) { }); // Update navbar menus core.bus.trigger("change_menu_section", app.menuID); - - // Prevents anim more app-icon if user click other before action - // is fully loaded - this.$el.find('.o-menu-item-waiting').removeClass( - 'o-menu-item-waiting'); - $(event.currentTarget).addClass('o-menu-item-waiting'); - $(document.body).addClass('o-cursor-waiting'); }, /** @@ -275,30 +268,18 @@ odoo.define('web_responsive', function (require) { }); }, - // Prevent hide AppDrawer - _searchMenusClicked: function (ev) { - ev.stopPropagation(); - }, - - // Load view indicator - _onAppsMenuItemClicked: function (ev) { - ev.preventDefault(); - ev.stopPropagation(); - // Prevents anim more app-icon if user click other before action - // is fully loaded - this.$el.find('.o-app-waiting').removeClass( - 'o-app-waiting'); - $(ev.currentTarget).addClass('o-app-waiting'); - $(document.body).addClass('o-cursor-waiting'); - this._super.apply(this, arguments); + /* + * Control if AppDrawer can be closed + */ + _hideAppsMenu: function () { + return $('.oe_wait').length === 0 && !this.$('input').is(':focus'); }, }); Menu.include({ events: _.extend({ // Clicking a hamburger menu item should close the hamburger - // and sets waiting menu-item - "click .o_menu_sections [role=menuitem]": "_clickMenuItem", + "click .o_menu_sections [role=menuitem]": "_hideMobileSubmenus", // Opening any dropdown in the navbar should hide the hamburger "show.bs.dropdown .o_menu_systray, .o_menu_apps": "_hideMobileSubmenus", @@ -317,40 +298,20 @@ odoo.define('web_responsive', function (require) { _hideMobileSubmenus: function () { if ( this.$menu_toggle.is(":visible") && - this.$section_placeholder.is(":visible") + this.$section_placeholder.is(":visible") && + $('.oe_wait').length === 0 ) { this.$section_placeholder.collapse("hide"); } }, - /** - * Menu Item Click Event - * - * @param {jQuery.Event} event - */ - _clickMenuItem: function (event) { - this._hideMobileSubmenus(); - // Prevents anim more menu-item if user click other - // before action is fully loaded - this.$el.find('.o-menu-item-waiting').removeClass( - 'o-menu-item-waiting'); - $(document.body).addClass('o-cursor-waiting'); - $(event.currentTarget).addClass('o-menu-item-waiting'); - }, - /** * Hide Menu Section * - * @param {jQuery.Event} event * @returns {Boolean} */ - _hideMenuSection: function (event) { - var $target = $(event.target); - var $selected = $target.find('.o-menu-item-waiting'); - if ($selected.length) { - return false; - } - return true; + _hideMenuSection: function () { + return $('.oe_wait').length === 0; }, /** @@ -422,82 +383,34 @@ odoo.define('web_responsive', function (require) { }, }); - // Hide AppDrawer or Menu and remove waiting anim when loaded action + // Hide AppDrawer or Menu when the action has been completed ActionManager.include({ - wc_long_running_timer: false, - doAction: function (action, options) { - var self = this; - return this._super.apply(this, arguments).always(function () { - var removeWaitingCursor = function () { - clearTimeout(self.wc_long_running_timer); - self.wc_long_running_timer = false; - $(document.body).removeClass('o-cursor-waiting'); - }; - - var $app_menu = $('.o_menu_apps .dropdown.show'); - var closeAppDrawer = function ($elm, classname) { - $elm.removeClass(classname); - removeWaitingCursor(); - // Now uses this way because Odoo 12.0 uses - // bootstrap 4.1 - // TODO: Change to use "hide" method in modern - // bootstrap versions (>4.1) - if ($app_menu.hasClass('show')) { - $app_menu.dropdown('toggle'); - } - }; - - // Fallback, ~3secs appears the BlockUI - if (!self.wc_long_running_timer) { - self.wc_long_running_timer = setTimeout(function () { - removeWaitingCursor(); - }, 3000); - } - // Need hide AppMenu? (AppDrawer) - if ($app_menu.length) { - if (options && 'action_menu_id' in options) { - // App Icon - var $item_app = $app_menu.find('.o_app.active'); - if ($item_app.length) { - var app_menu_id = $item_app.data('menuId'); - if (app_menu_id === options.action_menu_id) { - closeAppDrawer($item_app, 'o-app-waiting'); - } - } - } else { - // Menu Search - var $item = $app_menu.find('.o-menu-item-waiting'); - if ($item.length) { - var action_id = $item.data('actionId'); - if (action_id === action.id) { - closeAppDrawer($item, 'o-menu-item-waiting'); - } - } - } - } + /** + * Because the menu aren't closed when click, this method + * searchs for the menu with the action executed to close it. + * + * @param {action} action + * The executed action + */ + _hideMenusByAction: function (action) { + var uniq_sel = '[data-action-id='+action.id+']'; + // Need close AppDrawer? + $(_.str.sprintf('.o_menu_apps .dropdown.show:has(%s)', uniq_sel)) + .dropdown('toggle'); + // Need close Sections Menu? + // TODO: Change to 'hide' in modern Bootstrap >4.1 + $(_.str.sprintf( + '.o_menu_sections li.show:has(%s) .dropdown-toggle', uniq_sel)) + .dropdown('toggle'); + // Need close Mobile? + $(_.str.sprintf('.o_menu_sections.show:has(%s)', uniq_sel)) + .collapse('hide'); + }, - // Need hide Menu? - var $menu = $('.o_menu_sections'); - if ($menu.length) { - var $item_menu = $menu.find('.o-menu-item-waiting'); - if (!$item_menu.length) { - return; - } - var item_action_id = $item_menu.data('actionId'); - if (item_action_id === action.id) { - $item_menu.removeClass('o-menu-item-waiting'); - removeWaitingCursor(); - $menu.find('li.show').each( - function (i, el) { - if ($.contains(el, $item_menu[0])) { - $(el).find('.dropdown-toggle') - .dropdown('toggle'); - } - }); - } - } - }); + _handleAction: function (action) { + return this._super.apply(this, arguments).always( + $.proxy(this, '_hideMenusByAction', action)); }, });