odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[IMP] better layout with pure css for web client 

this patch removes javascript calls to adjust the layout.  It manages
to do the correct layout with only css, which will correct quite a few
issues.
This commit is contained in:
Géry Debongnie 2014-06-10 16:22:02 +02:00
parent 8202561511
commit 63c702f009
5 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
addons/web/static/src/css/base.css
View File

@ -1147,13 +1147,21 @@
position: relative;
height: 100%;
}
.openerp .oe_application > div > .oe_view_manager > .oe_view_manager_body {
.openerp .oe_application > div > .oe_view_manager > .oe_view_manager_wrapper {
display: table-row;
height: 100%;
}
.openerp .oe_application > div > .oe_view_manager > .oe_view_manager_wrapper > div {
position: relative;
height: 100%;
}
.openerp .oe_application > div > .oe_view_manager > .oe_view_manager_wrapper > div > .oe_view_manager_body {
position: absolute;
overflow: auto;
top: 66px;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
.openerp .oe_application .oe_breadcrumb_item:not(:last-child) {
max-width: 7em;
@ -1352,6 +1360,7 @@
height: 100%;
}
.openerp .oe_view_manager_current > .oe_view_manager_header {
display: table-row;
border-bottom: 1px solid #cacaca;
background-color: #ededed;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#dedede));

22
addons/web/static/src/css/base.sass
View File

@ -961,13 +961,20 @@ $sheet-padding: 16px
position: relative
height: 100%
> .oe_view_manager
> .oe_view_manager_body
position: absolute
overflow: auto
top: 66px
bottom: 0
left: 0
right: 0
> .oe_view_manager_wrapper
display: table-row
height: 100%
> div
position: relative
height: 100%
> .oe_view_manager_body
position: absolute
top: 0
bottom: 0
left: 0
right: 0
overflow: auto
.oe_breadcrumb_item:not(:last-child)
max-width: 7em
@ -1127,6 +1134,7 @@ $sheet-padding: 16px
.oe_view_manager_current
height: 100%
> .oe_view_manager_header
display: table-row
border-bottom: 1px solid #cacaca
@include vertical-gradient(#fcfcfc, #dedede)
@include box-shadow((0 1px 0 rgba(255,255,255,0.4), 0 0 9px rgba(0,0,0,0.1)))

16
addons/web/static/src/js/search.js
View File

@ -406,8 +406,7 @@ instance.web.SearchView = instance.web.Widget.extend(/** @lends instance.web.Sea
this.query = new my.SearchQuery()
.on('add change reset remove', this.proxy('do_search'))
.on('change', this.proxy('renderChangedFacets'))
.on('add reset remove', this.proxy('renderFacets'))
.on('add change reset remove', this.proxy('adjust_view_top'));
.on('add reset remove', this.proxy('renderFacets'));
if (this.options.hidden) {
this.$el.hide();
@ -441,7 +440,6 @@ instance.web.SearchView = instance.web.Widget.extend(/** @lends instance.web.Sea
view_manager.on('switch_mode', this, function (e) {
self.drawer.toggle(e === 'graph');
});
$(window).resize(this.proxy("adjust_view_top"));
}
return $.when(p, this.ready);
},
@ -642,18 +640,6 @@ instance.web.SearchView = instance.web.Widget.extend(/** @lends instance.web.Sea
});
},
// hack to adjust the top of the view body to the actual header height
// the best way would be to do that with pure css, but this cannot be done
// without giving up IE9 support (flexbox/grid) or without reworking the
// full client structure (switching from tables to a sane responsive layout with
// divs).
adjust_view_top: function () {
if (this.$view_manager_header.length) {
var height = this.$view_manager_header[0].offsetHeight + 1;
this.$view_manager_header.next().css('top', height + 'px');
}
},
search_view_loaded: function(data) {
var self = this;
this.fields_view = data;

6
addons/web/static/src/js/views.js
View File

@ -115,7 +115,6 @@ instance.web.ActionManager = instance.web.Widget.extend({
item.show(subindex);
this.inner_widget = item.widget;
this.inner_action = item.action;
item.widget.searchview.adjust_view_top();
return true;
},
clear_breadcrumbs: function() {
@ -647,7 +646,7 @@ instance.web.ViewManager = instance.web.Widget.extend({
_.each(_.keys(self.views), function(view_name) {
var controller = self.views[view_name].controller;
if (controller) {
var container = self.$el.find("> .oe_view_manager_body > .oe_view_manager_view_" + view_name);
var container = self.$el.find("> div > div > .oe_view_manager_body > .oe_view_manager_view_" + view_name);
if (view_name === view_type) {
container.show();
controller.do_show(view_options || {});
@ -690,7 +689,7 @@ instance.web.ViewManager = instance.web.Widget.extend({
controller.on('switch_mode', self, this.switch_mode);
controller.on('previous_view', self, this.prev_view);
var container = this.$el.find("> .oe_view_manager_body > .oe_view_manager_view_" + view_type);
var container = this.$el.find("> div > div > .oe_view_manager_body > .oe_view_manager_view_" + view_type);
var view_promise = controller.appendTo(container);
this.views[view_type].controller = controller;
this.views[view_type].deferred.resolve(view_type);
@ -1085,7 +1084,6 @@ instance.web.ViewManagerAction = instance.web.ViewManager.extend({
view_manager: self
}));
self.set_title();
self.searchview.adjust_view_top();
});
},
do_create_view: function(view_type) {

14
addons/web/static/src/xml/base.xml
View File

@ -522,11 +522,15 @@
</tr>
</table>
<div class="oe_view_manager_body">
<div class="oe_searchview_drawer_container"/>
<t t-foreach="widget.views_src" t-as="view">
<div t-attf-class="oe_view_manager_view_#{view.view_type}"/>
</t>
<div class="oe_view_manager_wrapper">
<div>
<div class="oe_view_manager_body">
<div class="oe_searchview_drawer_container"/>
<t t-foreach="widget.views_src" t-as="view">
<div t-attf-class="oe_view_manager_view_#{view.view_type}"/>
</t>
</div>
</div>
</div>
</div>
</t>