From cf178a2f068acd4b4c4fc2cda00b6ef8f6dc79c0 Mon Sep 17 00:00:00 2001 From: Aaron Bohy Date: Thu, 4 Jan 2018 16:17:14 +0100 Subject: [IMP] web,*: config: add XXS size to config.device In Less, the size_class XXS is defined and used in media queries. This rev. adds it in JS for sake of consistency. Code in addons comparing the size_class needed to be adapted due to the new XXS size_class. Moreover, we now use the helper 'config.device.isMobile' everywhere we should, instead of manually comparing the size_class. Finally, we changed the way the config.device has to be specified in the test environment. From now on, only the size_class should be set, and the isMobile flag is computed automatically. --- addons/web/static/src/js/services/config.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'addons/web/static/src/js/services') 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)') -- cgit v1.2.3