From 16eb36ff45bec31cfb98865b739c34e0a513a02f Mon Sep 17 00:00:00 2001 From: Aaron Bohy Date: Thu, 16 Jul 2015 15:24:02 +0200 Subject: [PATCH] [IMP] web: use a classname to show/hide widgets The problem of $el.show()/hide() is that calling show() on a jQuery element on which there is no display rule in the stylesheet automatically sets 'display: block'. However, when a jQuery element is not yet in the DOM, the rules defined on it are not yet applied, meaning that calling show() will set its display to block (in inline style), even if there is different a css rule (e.g. 'dislay: flex'). As the inline style takes the priority over the stylesheet, the correct display won't be applied, even when the widget will be appended in the DOM, resulting in a possibly broken layout. --- addons/web/static/src/css/base.css | 13 +++++-------- addons/web/static/src/css/base.sass | 3 +++ addons/web/static/src/js/action_manager.js | 2 +- addons/web/static/src/js/framework/widget.js | 4 ++-- addons/web/static/src/js/views/form_common.js | 4 ++-- addons/web/static/src/js/views/form_view.js | 3 ++- addons/web/static/src/js/views/graph_view.js | 2 -- addons/web/static/src/js/views/pivot_view.js | 1 - addons/web/static/src/js/views/search_view.js | 2 +- addons/web/static/src/js/views/tree_view.js | 6 ------ addons/web/static/src/js/widgets/pager.js | 4 ++-- 11 files changed, 18 insertions(+), 26 deletions(-) diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css index 7852f764c19..d7b19640716 100644 --- a/addons/web/static/src/css/base.css +++ b/addons/web/static/src/css/base.css @@ -1,4 +1,4 @@ -@charset "utf-8"; +@charset "UTF-8"; @font-face { font-family: "mnmliconsRegular"; src: url("/web/static/src/font/mnmliconsv21-webfont.eot") format("eot"); @@ -73,6 +73,10 @@ vertical-align: middle; } +.o_hidden { + display: none !important; +} + .openerp { padding: 0; margin: 0; @@ -1282,13 +1286,6 @@ .openerp .oe-search-options .filters-menu .divider { display: list-item; } -.openerp .oe-search-options .closed-menu a:before { - font-family: FontAwesome; - position: absolute; - left: 12px; - top: 3px; - content: ""; -} .openerp .oe-search-options .oe-select-group { margin: 3px 25px; } diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass index d8248feb9ad..fe4cbac46f0 100644 --- a/addons/web/static/src/css/base.sass +++ b/addons/web/static/src/css/base.sass @@ -182,6 +182,9 @@ $sheet-padding: 16px vertical-align: middle // }}} +.o_hidden + display: none!important + .openerp // Global style {{{ padding: 0 diff --git a/addons/web/static/src/js/action_manager.js b/addons/web/static/src/js/action_manager.js index e3d2b589f27..0d0fa6f4201 100644 --- a/addons/web/static/src/js/action_manager.js +++ b/addons/web/static/src/js/action_manager.js @@ -252,7 +252,7 @@ var ActionManager = Widget.extend({ // Hide the old_widget as it will be removed from the DOM when it // is destroyed if (old_widget) { - old_widget.$el.hide(); + old_widget.do_hide(); } if (options.clear_breadcrumbs) { self.clear_action_stack(to_destroy); diff --git a/addons/web/static/src/js/framework/widget.js b/addons/web/static/src/js/framework/widget.js index 199568b727f..70f48caa261 100644 --- a/addons/web/static/src/js/framework/widget.js +++ b/addons/web/static/src/js/framework/widget.js @@ -347,10 +347,10 @@ var Widget = core.Class.extend(mixins.PropertiesMixin, { return this.$el.find(selector); }, do_show: function () { - this.$el.show(); + this.$el.removeClass('o_hidden'); }, do_hide: function () { - this.$el.hide(); + this.$el.addClass('o_hidden'); }, /** * Proxies a method of the object, in order to keep the right ``this`` on diff --git a/addons/web/static/src/js/views/form_common.js b/addons/web/static/src/js/views/form_common.js index 4d8a302882d..e1798034844 100644 --- a/addons/web/static/src/js/views/form_common.js +++ b/addons/web/static/src/js/views/form_common.js @@ -918,11 +918,11 @@ var FormViewDialog = ViewDialog.extend({ self.view_form.set_embedded_view(self.options.alternative_form_view); } - self.$el.hide(); + self.do_hide(); self.view_form.appendTo(self.$el); self.view_form.on("form_view_loaded", self, function() { self.view_form.do_show().then(function() { - self.$el.show(); + self.do_show(); }); }); diff --git a/addons/web/static/src/js/views/form_view.js b/addons/web/static/src/js/views/form_view.js index 3286f34eff4..58e5cd0a752 100644 --- a/addons/web/static/src/js/views/form_view.js +++ b/addons/web/static/src/js/views/form_view.js @@ -316,7 +316,8 @@ var FormView = View.extend(common.FieldManagerMixin, { do_show: function (options) { var self = this; options = options || {}; - this.$el.show().css({ + this._super(); + this.$el.css({ opacity: '0', filter: 'alpha(opacity = 0)' }); diff --git a/addons/web/static/src/js/views/graph_view.js b/addons/web/static/src/js/views/graph_view.js index 7f6f38ab05b..0bf222079fb 100644 --- a/addons/web/static/src/js/views/graph_view.js +++ b/addons/web/static/src/js/views/graph_view.js @@ -74,7 +74,6 @@ var GraphView = View.extend({ }, do_show: function () { this.do_push_state({}); - this.$el.show(); return this._super(); }, prepare_fields: function (fields) { @@ -101,7 +100,6 @@ var GraphView = View.extend({ fields: this.fields, }); // append widget - this.$el.hide(); this.widget.appendTo(this.$el); } else { var groupbys = group_by.length ? group_by : this.initial_groupbys.slice(0); diff --git a/addons/web/static/src/js/views/pivot_view.js b/addons/web/static/src/js/views/pivot_view.js index 40b3f59dcb8..b35a9a68927 100644 --- a/addons/web/static/src/js/views/pivot_view.js +++ b/addons/web/static/src/js/views/pivot_view.js @@ -209,7 +209,6 @@ var PivotView = View.extend({ this.do_push_state({}); this.data_loaded.done(function () { self.display_table(); - self.$el.show(); }); return this._super(); }, diff --git a/addons/web/static/src/js/views/search_view.js b/addons/web/static/src/js/views/search_view.js index 1a44c6af953..880398ca60b 100644 --- a/addons/web/static/src/js/views/search_view.js +++ b/addons/web/static/src/js/views/search_view.js @@ -393,7 +393,7 @@ var SearchView = Widget.extend(/** @lends instance.web.SearchView# */{ }, start: function() { if (this.headless) { - this.$el.hide(); + this.do_hide(); } this.toggle_visibility(false); this.$facets_container = this.$('div.oe_searchview_facets'); diff --git a/addons/web/static/src/js/views/tree_view.js b/addons/web/static/src/js/views/tree_view.js index b6e0e74a8de..2372f029b98 100644 --- a/addons/web/static/src/js/views/tree_view.js +++ b/addons/web/static/src/js/views/tree_view.js @@ -260,13 +260,7 @@ var TreeView = View.extend(/** @lends instance.web.TreeView# */{ }, this); }, - do_show: function () { - this.$el.show(); - this._super(); - }, - do_hide: function () { - this.$el.hide(); this.hidden = true; this._super(); } diff --git a/addons/web/static/src/js/widgets/pager.js b/addons/web/static/src/js/widgets/pager.js index ee576e923a4..21f3957ca97 100644 --- a/addons/web/static/src/js/widgets/pager.js +++ b/addons/web/static/src/js/widgets/pager.js @@ -182,9 +182,9 @@ var Pager = Widget.extend({ var single_page = 1 === current_min && current_max === size; if (size === 0 || (single_page && this.options.single_page_hidden)) { - this.$el.hide(); + this.do_hide(); } else { - this.$el.show(); + this.do_show(); if (single_page) { this.disable();