mirror of https://github.com/OCA/web.git
[IMP] web_responsive: Menu wait for action
parent
097bbcc1e4
commit
edaae02c9e
|
@ -22,6 +22,30 @@
|
|||
.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;
|
||||
|
|
|
@ -275,7 +275,7 @@ odoo.define('web_responsive', function (require) {
|
|||
this.$el.find('.o-app-waiting').removeClass(
|
||||
'o-app-waiting');
|
||||
$(ev.currentTarget).addClass('o-app-waiting');
|
||||
document.body.style.cursor = 'progress';
|
||||
$(document.body).addClass('o-cursor-waiting');
|
||||
this._super.apply(this, arguments);
|
||||
},
|
||||
});
|
||||
|
@ -283,10 +283,13 @@ odoo.define('web_responsive', function (require) {
|
|||
Menu.include({
|
||||
events: _.extend({
|
||||
// Clicking a hamburger menu item should close the hamburger
|
||||
"click .o_menu_sections [role=menuitem]": "_hideMobileSubmenus",
|
||||
// and sets waiting menu-item
|
||||
"click .o_menu_sections [role=menuitem]": "_clickMenuItem",
|
||||
// Opening any dropdown in the navbar should hide the hamburger
|
||||
"show.bs.dropdown .o_menu_systray, .o_menu_apps":
|
||||
"_hideMobileSubmenus",
|
||||
// Prevent close section menu
|
||||
"hide.bs.dropdown .o_menu_sections": "_hideMenuSection",
|
||||
}, Menu.prototype.events),
|
||||
|
||||
start: function () {
|
||||
|
@ -306,6 +309,36 @@ odoo.define('web_responsive', function (require) {
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 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;
|
||||
},
|
||||
|
||||
/**
|
||||
* No menu brand in mobiles
|
||||
*
|
||||
|
@ -378,22 +411,52 @@ odoo.define('web_responsive', function (require) {
|
|||
// Hide AppMenu & remove waiting anim when loaded action
|
||||
ActionManager.include({
|
||||
doAction: function (action, options) {
|
||||
return this._super.apply(this, arguments).then(function () {
|
||||
var $app_menu = $('.o_menu_apps .dropdown');
|
||||
if ($app_menu.length && options &&
|
||||
'action_menu_id' in options) {
|
||||
return this._super.apply(this, arguments).always(function () {
|
||||
if (options && 'action_menu_id' in options) {
|
||||
// Need hide AppMenu?
|
||||
var $app_menu = $('.o_menu_apps .dropdown');
|
||||
if (!$app_menu.length) {
|
||||
return;
|
||||
}
|
||||
var $app = $app_menu.find('.o_app.active');
|
||||
var menu_id = $app.data('menuId');
|
||||
if (menu_id === options.action_menu_id) {
|
||||
var app_menu_id = $app.data('menuId');
|
||||
if (app_menu_id === options.action_menu_id) {
|
||||
// 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');
|
||||
}
|
||||
|
||||
document.body.style.cursor = 'default';
|
||||
$(document.body).removeClass('o-cursor-waiting');
|
||||
$app_menu.find('.o-app-waiting').removeClass(
|
||||
'o-app-waiting');
|
||||
}
|
||||
} else if (action) {
|
||||
// Need hide Menu?
|
||||
var $menu = $('.o_menu_sections');
|
||||
if (!$menu.length) {
|
||||
return;
|
||||
}
|
||||
var $item = $menu.find('.o-menu-item-waiting');
|
||||
if (!$item.length) {
|
||||
return;
|
||||
}
|
||||
var action_id = $item.data('actionId');
|
||||
if (action_id === action.id) {
|
||||
$item.removeClass('o-menu-item-waiting');
|
||||
|
||||
$menu.find('li.show').each(
|
||||
function (i, el) {
|
||||
if ($.contains(el, $item[0])) {
|
||||
$(el).find('.dropdown-toggle')
|
||||
.dropdown('toggle');
|
||||
}
|
||||
});
|
||||
|
||||
$(document.body).removeClass('o-cursor-waiting');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue