Techsystech
/
web
mirror of https://github.com/OCA/web.git
3
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[IMP] web_responsive: Refactor code

pull/2058/head
Alexandre Díaz 2019-06-14 22:52:33 +02:00 committed by Sergey Shebanin
parent 461ba3156c
commit 90c5d9d1ef
2 changed files with 41 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
web_responsive/static/src/css/web_responsive.scss
View File

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

159
web_responsive/static/src/js/web_responsive.js
View File

@ -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');
}
};
/**
* 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');
},
// 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');
}
}
}
}
// 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));
},
});