diff --git a/addons/im_livechat/static/src/js/im_livechat.js b/addons/im_livechat/static/src/js/im_livechat.js
index 10cc5610214..049e88cb23c 100644
--- a/addons/im_livechat/static/src/js/im_livechat.js
+++ b/addons/im_livechat/static/src/js/im_livechat.js
@@ -78,11 +78,10 @@ var LivechatButton = Widget.extend({
start: function () {
this.$el.text(this.options.button_text);
- var small_screen = config.device.size_class === config.device.SIZES.XS;
if (this.history) {
_.each(this.history.reverse(), this.add_message.bind(this));
this.open_chat();
- } else if (!small_screen && this.rule.action === 'auto_popup') {
+ } else if (!config.device.isMobile && this.rule.action === 'auto_popup') {
var auto_popup_cookie = utils.get_cookie('im_livechat_auto_popup');
if (!auto_popup_cookie || JSON.parse(auto_popup_cookie)) {
this.auto_popup_timeout = setTimeout(this.open_chat.bind(this), this.rule.auto_popup_timer*1000);
diff --git a/addons/mail/static/src/js/chat_window.js b/addons/mail/static/src/js/chat_window.js
index 0c3a2270045..c8cfecd193f 100644
--- a/addons/mail/static/src/js/chat_window.js
+++ b/addons/mail/static/src/js/chat_window.js
@@ -150,7 +150,7 @@ return Widget.extend({
this.trigger("close_chat_session");
},
on_click_fold: function () {
- if (config.device.size_class !== config.device.SIZES.XS) {
+ if (!config.device.isMobile) {
this.toggle_fold();
this.trigger("fold_channel", this.channel_id, this.folded);
}
diff --git a/addons/mail/static/src/js/window_manager.js b/addons/mail/static/src/js/window_manager.js
index 28bf4ad71e9..147a3762068 100644
--- a/addons/mail/static/src/js/window_manager.js
+++ b/addons/mail/static/src/js/window_manager.js
@@ -193,7 +193,7 @@ function toggle_fold_chat (channel) {
}
function compute_available_slots (nb_windows) {
- if (config.device.size_class === config.device.SIZES.XS) {
+ if (config.device.isMobile) {
display_state.nb_slots = 1; // one chat window full screen in mobile
return;
}
diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 94facd80ceb..c9375c2d4b9 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1037,7 +1037,7 @@ var FieldPhone = FieldEmail.extend({
* @private
*/
_canCall: function () {
- return config.device.size_class <= config.device.SIZES.XS;
+ return config.device.isMobile;
}
});
diff --git a/addons/web/static/src/js/services/config.js b/addons/web/static/src/js/services/config.js
index 8a42e755322..cb32ed583d4 100644
--- a/addons/web/static/src/js/services/config.js
+++ b/addons/web/static/src/js/services/config.js
@@ -1,4 +1,4 @@
-odoo.define('web.config', function (require) {
+odoo.define('web.config', function () {
"use strict";
/**
@@ -31,7 +31,7 @@ var config = {
*/
touch: 'ontouchstart' in window || 'onmsgesturechange' in window,
/**
- * size_class is an integer: 0, 1, 2 or 3, depending on the (current)
+ * size_class is an integer: 0, 1, 2, 3 or 4, depending on the (current)
* size of the device. This is a dynamic property, updated whenever the
* browser is resized
*
@@ -41,21 +41,22 @@ var config = {
/**
* A frequent use case is to have a different render in 'mobile' mode,
* meaning when the screen is small. This flag (boolean) is true when
- * the size is not 3. It is also updated dynamically.
+ * the size is XXS or XS. It is also updated dynamically.
*
* @type Boolean
*/
isMobile: null,
/**
- * Mapping between the numbers 0,1,2,3 and some descriptions
+ * Mapping between the numbers 0,1,2,3,4 and some descriptions
*/
- SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
+ SIZES: { XXS: 0, XS: 1, SM: 2, MD: 3, LG: 4 },
},
};
var medias = [
- window.matchMedia('(max-width: 767px)'),
+ window.matchMedia('(max-width: 474px)'),
+ window.matchMedia('(min-width: 475px) and (max-width: 767px)'),
window.matchMedia('(min-width: 768px) and (max-width: 991px)'),
window.matchMedia('(min-width: 992px) and (max-width: 1199px)'),
window.matchMedia('(min-width: 1200px)')
diff --git a/addons/web/static/src/js/views/basic/basic_view.js b/addons/web/static/src/js/views/basic/basic_view.js
index f428a83cd41..df9f9807bfd 100644
--- a/addons/web/static/src/js/views/basic/basic_view.js
+++ b/addons/web/static/src/js/views/basic/basic_view.js
@@ -246,7 +246,7 @@ var BasicView = AbstractView.extend({
}
}
if (mode.indexOf(',') !== -1) {
- mode = config.device.size_class !== config.device.SIZES.XS ? 'tree' : 'kanban';
+ mode = config.device.isMobile ? 'kanban' : 'tree';
}
if (mode === 'tree') {
mode = 'list';
diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index 779121de3e9..7d9c3cd2d78 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -279,7 +279,7 @@ var FormRenderer = BasicRenderer.extend({
var visible_buttons = buttons_partition[1];
// Get the unfolded buttons according to window size
- var nb_buttons = [2, 4, 6, 7][config.device.size_class];
+ var nb_buttons = [2, 2, 4, 6, 7][config.device.size_class];
var unfolded_buttons = visible_buttons.slice(0, nb_buttons).concat(invisible_buttons);
// Get the folded buttons
diff --git a/addons/web/static/src/js/views/graph/graph_renderer.js b/addons/web/static/src/js/views/graph/graph_renderer.js
index 4d51f8786d0..07155e327e3 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -20,7 +20,7 @@ var qweb = core.qweb;
var CHART_TYPES = ['pie', 'bar', 'line'];
// hide top legend when too many items for device size
-var MAX_LEGEND_LENGTH = 25 * (1 + config.device.size_class);
+var MAX_LEGEND_LENGTH = 25 * (Math.max(1, config.device.size_class));
return AbstractRenderer.extend({
className: "o_graph_svg_container",
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index 4fd9d6ee84e..44f00d1d7f9 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -3,6 +3,7 @@ odoo.define('web.basic_fields_tests', function (require) {
var basicFields = require('web.basic_fields');
var concurrency = require('web.concurrency');
+var config = require('web.config');
var core = require('web.core');
var FormView = require('web.FormView');
var KanbanView = require('web.KanbanView');
@@ -2987,9 +2988,8 @@ QUnit.module('basic_fields', {
res_id: 1,
config: {
device: {
- size_class: 0, // Screen XS
- SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
- }
+ size_class: config.device.SIZES.XS,
+ },
},
});
@@ -3032,9 +3032,8 @@ QUnit.module('basic_fields', {
arch: '',
config: {
device: {
- size_class: 0, // Screen XS
- SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
- }
+ size_class: config.device.SIZES.XS,
+ },
},
});
@@ -3097,9 +3096,8 @@ QUnit.module('basic_fields', {
res_id: 1,
config: {
device: {
- size_class: 1, // Screen SM
- SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
- }
+ size_class: config.device.SIZES.SM,
+ },
},
});
@@ -3145,9 +3143,8 @@ QUnit.module('basic_fields', {
arch: '',
config: {
device: {
- size_class: 1, // Screen SM
- SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
- }
+ size_class: config.device.SIZES.SM,
+ },
},
});
@@ -3199,9 +3196,8 @@ QUnit.module('basic_fields', {
},
config: {
device: {
- size_class: 0,
- SIZES: { XS: 0, SM: 1, MD: 2, LG: 3 },
- }
+ size_class: config.device.SIZES.XS,
+ },
},
});
diff --git a/addons/web/static/tests/helpers/test_utils.js b/addons/web/static/tests/helpers/test_utils.js
index 260436ff152..468b25e5733 100644
--- a/addons/web/static/tests/helpers/test_utils.js
+++ b/addons/web/static/tests/helpers/test_utils.js
@@ -346,6 +346,7 @@ function addMockEnvironment(widget, params) {
initialConfig.device = _.clone(config.device);
if ('device' in params.config) {
_.extend(config.device, params.config.device);
+ config.device.isMobile = config.device.size_class <= config.device.SIZES.XS;
}
if ('debug' in params.config) {
config.debug = params.config.debug;
diff --git a/addons/web_tour/static/src/js/tour_service.js b/addons/web_tour/static/src/js/tour_service.js
index 09b4e6896b9..37e6f1a5c0f 100644
--- a/addons/web_tour/static/src/js/tour_service.js
+++ b/addons/web_tour/static/src/js/tour_service.js
@@ -12,7 +12,7 @@ var TourManager = require('web_tour.TourManager');
var QWeb = core.qweb;
-if (config.device.size_class <= config.device.SIZES.XS) {
+if (config.device.isMobile) {
return $.Deferred().reject();
}
diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 52e4e2c5319..5f8c337802f 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -113,7 +113,7 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({
*/
_adapt: function () {
this._restore();
- if (config.device.size_class < config.device.SIZES.SM) {
+ if (config.device.isMobile) {
return;
}
diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index d54978e290c..874b9f698b5 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -480,7 +480,7 @@ odoo.define('website_sale.website_sale', function (require) {
});
// Deactivate image zoom for mobile devices, since it might prevent users to scroll
- if (config.device.size_class > config.device.SIZES.XS) {
+ if (!config.device.isMobile) {
$('.ecom-zoomable img[data-zoom]').zoomOdoo({ attach: '#o-carousel-product'});
}
});