mirror of https://github.com/OCA/web.git
[IMP] web_responsive: Menu wait for action
parent
d3a5defb2b
commit
fbc696ff22
|
@ -22,6 +22,30 @@
|
||||||
.o-app-waiting img {
|
.o-app-waiting img {
|
||||||
animation: 1.3s infinite cubic-bezier(.65,.05,.36,1) o-app-icon-flash-animation;
|
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 {
|
@mixin full-screen-dropdown {
|
||||||
border: none;
|
border: none;
|
||||||
|
|
|
@ -275,7 +275,7 @@ odoo.define('web_responsive', function (require) {
|
||||||
this.$el.find('.o-app-waiting').removeClass(
|
this.$el.find('.o-app-waiting').removeClass(
|
||||||
'o-app-waiting');
|
'o-app-waiting');
|
||||||
$(ev.currentTarget).addClass('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);
|
this._super.apply(this, arguments);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
@ -283,10 +283,13 @@ odoo.define('web_responsive', function (require) {
|
||||||
Menu.include({
|
Menu.include({
|
||||||
events: _.extend({
|
events: _.extend({
|
||||||
// Clicking a hamburger menu item should close the hamburger
|
// 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
|
// Opening any dropdown in the navbar should hide the hamburger
|
||||||
"show.bs.dropdown .o_menu_systray, .o_menu_apps":
|
"show.bs.dropdown .o_menu_systray, .o_menu_apps":
|
||||||
"_hideMobileSubmenus",
|
"_hideMobileSubmenus",
|
||||||
|
// Prevent close section menu
|
||||||
|
"hide.bs.dropdown .o_menu_sections": "_hideMenuSection",
|
||||||
}, Menu.prototype.events),
|
}, Menu.prototype.events),
|
||||||
|
|
||||||
start: function () {
|
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
|
* No menu brand in mobiles
|
||||||
*
|
*
|
||||||
|
@ -378,22 +411,52 @@ odoo.define('web_responsive', function (require) {
|
||||||
// Hide AppMenu & remove waiting anim when loaded action
|
// Hide AppMenu & remove waiting anim when loaded action
|
||||||
ActionManager.include({
|
ActionManager.include({
|
||||||
doAction: function (action, options) {
|
doAction: function (action, options) {
|
||||||
return this._super.apply(this, arguments).then(function () {
|
return this._super.apply(this, arguments).always(function () {
|
||||||
var $app_menu = $('.o_menu_apps .dropdown');
|
if (options && 'action_menu_id' in options) {
|
||||||
if ($app_menu.length && options &&
|
// Need hide AppMenu?
|
||||||
'action_menu_id' in options) {
|
var $app_menu = $('.o_menu_apps .dropdown');
|
||||||
|
if (!$app_menu.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
var $app = $app_menu.find('.o_app.active');
|
var $app = $app_menu.find('.o_app.active');
|
||||||
var menu_id = $app.data('menuId');
|
var app_menu_id = $app.data('menuId');
|
||||||
if (menu_id === options.action_menu_id) {
|
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')) {
|
if ($app_menu.hasClass('show')) {
|
||||||
$app_menu.dropdown('toggle');
|
$app_menu.dropdown('toggle');
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.style.cursor = 'default';
|
$(document.body).removeClass('o-cursor-waiting');
|
||||||
$app_menu.find('.o-app-waiting').removeClass(
|
$app_menu.find('.o-app-waiting').removeClass(
|
||||||
'o-app-waiting');
|
'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