From cf178a2f068acd4b4c4fc2cda00b6ef8f6dc79c0 Mon Sep 17 00:00:00 2001 From: Aaron Bohy Date: Thu, 4 Jan 2018 16:17:14 +0100 Subject: [PATCH] [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. --- .../im_livechat/static/src/js/im_livechat.js | 3 +-- addons/mail/static/src/js/chat_window.js | 2 +- addons/mail/static/src/js/window_manager.js | 2 +- .../web/static/src/js/fields/basic_fields.js | 2 +- addons/web/static/src/js/services/config.js | 13 +++++----- .../static/src/js/views/basic/basic_view.js | 2 +- .../static/src/js/views/form/form_renderer.js | 2 +- .../src/js/views/graph/graph_renderer.js | 2 +- .../static/tests/fields/basic_fields_tests.js | 26 ++++++++----------- addons/web/static/tests/helpers/test_utils.js | 1 + addons/web_tour/static/src/js/tour_service.js | 2 +- addons/website/static/src/js/content/menu.js | 2 +- .../static/src/js/website_sale.js | 2 +- 13 files changed, 29 insertions(+), 32 deletions(-) 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'}); } });