pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web,*: config: add XXS size to config.device

Browse Source 
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.
This commit is contained in:
Aaron Bohy
2018-01-26 19:26:03 +01:00
parent cb339842d4
commit cf178a2f06
13 changed files with 29 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/im_livechat/static/src/js/im_livechat.js
+1 -2
View File
@@ -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);
addons/mail/static/src/js/chat_window.js
+1 -1
View File
@@ -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);
}
addons/mail/static/src/js/window_manager.js
+1 -1
View File
@@ -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;
}
addons/web/static/src/js/fields/basic_fields.js
+1 -1
View File
@@ -1037,7 +1037,7 @@ var FieldPhone = FieldEmail.extend({
* @private
*/
_canCall: function () {
return config.device.size_class <= config.device.SIZES.XS;
return config.device.isMobile;
}
});
addons/web/static/src/js/services/config.js
+7 -6
View File
@@ -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)')
addons/web/static/src/js/views/basic/basic_view.js
+1 -1
View File
@@ -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';
addons/web/static/src/js/views/form/form_renderer.js
+1 -1
View File
@@ -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
addons/web/static/src/js/views/graph/graph_renderer.js
+1 -1
View File
@@ -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",
addons/web/static/tests/fields/basic_fields_tests.js
+11 -15
View File
@@ -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: '<tree editable="bottom"><field name="foo" widget="phone"/></tree>',
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: '<tree editable="bottom"><field name="foo" widget="phone"/></tree>',
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,
},
},
});
addons/web/static/tests/helpers/test_utils.js
+1
View File
@@ -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;
addons/web_tour/static/src/js/tour_service.js
+1 -1
View File
@@ -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();
}
addons/website/static/src/js/content/menu.js
+1 -1
View File
@@ -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;
}
addons/website_sale/static/src/js/website_sale.js
+1 -1
View File
@@ -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'});
}
});