[IMP] readd pager functionality to web client

The pager was removed in the refactoring of view manager. This commit
readd the pager, and improves its rendering to avoid flickering
This commit is contained in:
Géry Debongnie
2014-10-21 09:33:49 +02:00
parent ffb8bf31af
commit 14d5860b35
6 changed files with 42 additions and 383 deletions
+9 -186
View File
@@ -1088,6 +1088,12 @@
border-bottom: 1px solid black;
display: none;
}
.openerp .oe-view-manager-header .oe-right-toolbar {
float: right;
}
.openerp .oe-view-manager-header .oe-right-toolbar > div {
display: inline-block;
}
.openerp .oe-view-manager-header .row {
height: 45px;
}
@@ -1104,9 +1110,6 @@
float: right;
padding-top: 5px;
}
.openerp .oe-view-manager-header .oe-view-manager-switch {
float: right;
}
.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-kanban:before {
content: "";
}
@@ -1131,6 +1134,9 @@
.openerp .oe-view-manager-header .oe-view-manager-buttons > div {
display: none;
}
.openerp .oe-view-manager-header .oe_pager_value {
display: inline-block;
}
.openerp .oe_application > div > div > .oe-view-manager-body {
position: absolute;
top: 90px;
@@ -1139,189 +1145,6 @@
right: 0;
overflow: auto;
}
.openerp .oe_view_manager {
display: table;
height: inherit;
width: 100%;
}
.openerp .oe_view_manager .oe_view_manager_view_kanban:not(:empty) {
height: 100%;
}
.openerp .oe_view_manager[data-view-type=kanban] .oe_view_manager_body {
display: table-row;
}
.openerp .oe_view_manager table.oe_view_manager_header {
border-collapse: separate;
width: 100%;
table-layout: fixed;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_header_row {
clear: both;
text-shadow: 0 1px 1px white;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_header_row:last-child td {
padding-top: 0;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_header_row:first-child td {
padding-top: 8px;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_view_manager_sidebar {
margin: 0px auto;
text-align: center;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_view_manager_sidebar .oe_dropdown_arrow:after {
opacity: 0.9;
}
.openerp .oe_view_manager table.oe_view_manager_header td {
line-height: 26px;
}
.openerp .oe_view_manager table.oe_view_manager_header h2 {
font-size: 18px;
margin: 0;
float: left;
line-height: 30px;
}
.openerp .oe_view_manager table.oe_view_manager_header h2 a {
color: #7C7BAD;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_dropdown_menu {
line-height: normal;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_button_group {
display: inline-block;
border: 1px solid #ababab;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_button_group li {
float: left;
border-right: 1px solid #ababab;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_button_group li:last-child {
border: none;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_button_group a {
color: #4c4c4c;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_button_group a:hover {
text-decoration: none;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_button_group .active {
background: #999;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_button_group .active a {
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.openerp .oe_view_manager table.oe_view_manager_header .oe_view_manager_buttons {
white-space: nowrap;
}
.openerp .oe_view_manager .oe_view_manager_switch {
padding: 0;
margin: 0 0 0 8px;
}
.openerp .oe_view_manager .oe_view_manager_switch li {
margin: 0;
width: 24px;
height: 24px;
line-height: 16px;
padding: 0;
text-align: center;
list-style-type: none;
}
.openerp .oe_view_manager .oe_view_manager_switch li a {
position: relative;
}
.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_list:after, .openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_tree:after {
padding: 2px;
content: "i";
}
.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_form:after {
content: "m";
}
.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_graph:after {
font-family: "mnmliconsRegular" !important;
font-size: 21px;
font-weight: 300 !important;
content: "}";
top: -2px;
position: relative;
}
.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_gantt:after {
font-family: "mnmliconsRegular" !important;
font-size: 21px;
font-weight: 300 !important;
content: "y";
top: -2px;
position: relative;
}
.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_calendar:after {
content: "P";
}
.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_kanban:after {
content: "k";
}
.openerp .oe_view_manager .oe_view_manager_switch .oe_vm_switch_diagram:after {
content: "f";
}
.openerp .oe_list_pager {
line-height: 26px;
}
.openerp .oe_pager_value {
float: left;
margin-right: 8px;
}
.openerp ul.oe_pager_group {
padding: 0;
margin: 0;
}
.openerp .oe_pager_group {
float: left;
height: 24px;
line-height: 24px;
display: inline-block;
border: 1px solid #ababab;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.openerp .oe_pager_group li {
height: 24px;
line-height: 24px;
padding: 0;
margin: 0;
list-style-type: none;
float: left;
border-right: 1px solid #ababab;
}
.openerp .oe_pager_group li:last-child {
border: none;
}
.openerp .oe_pager_group a {
color: #4c4c4c;
padding: 0 8px;
}
.openerp .oe_pager_group a:hover {
text-decoration: none;
}
.openerp .oe_pager_group .active {
background: #999;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
}
.openerp .oe_pager_group .active a {
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.openerp .oe_list_pager.oe_list_pager_single_page .oe_pager_group {
display: none;
}
.openerp .oe_view_manager_inline, .openerp .oe_view_manager_inlineview {
height: 100%;
}
+7 -146
View File
@@ -939,6 +939,10 @@ $sheet-padding: 16px
overflow: hidden
border-bottom: 1px solid black
display: none
.oe-right-toolbar
float: right
> div
display: inline-block
.row
height: 45px
.oe-view-title
@@ -952,7 +956,6 @@ $sheet-padding: 16px
float: right
padding-top: 5px
.oe-view-manager-switch
float: right
.oe-vm-switch-kanban:before
content: "\f009"
.oe-vm-switch-list:before
@@ -969,7 +972,8 @@ $sheet-padding: 16px
float: left
> div
display: none
.oe_pager_value
display: inline-block
.oe_application
> div
> div
@@ -980,151 +984,8 @@ $sheet-padding: 16px
left: 0
right: 0
overflow: auto
.oe_view_manager
display: table
height: inherit
width: 100%
.oe_view_manager_view_kanban:not(:empty)
height: 100%
&[data-view-type=kanban]
.oe_view_manager_body
display: table-row
table.oe_view_manager_header
border-collapse: separate
width: 100%
table-layout: fixed
.oe_header_row
//min-height: 26px
//line-height: 26px
clear: both
text-shadow: 0 1px 1px white
.oe_header_row:last-child
td
padding-top: 0
.oe_header_row:first-child
td
padding-top: 8px
.oe_view_manager_sidebar
margin: 0px auto
text-align: center
.oe_dropdown_arrow:after
opacity: 0.9
td
line-height: 26px
h2
font-size: 18px
margin: 0
float: left
line-height: 30px
a
color: $link-color
.oe_dropdown_menu
line-height: normal
.oe_button_group
display: inline-block
border: 1px solid #ababab
@include radius(5px)
li
float: left
border-right: 1px solid #ababab
&:last-child
border: none
a
color: #4c4c4c
&:hover
text-decoration: none
.active
background: #999
@include box-shadow(0 1px 4px rgba(0,0,0,0.3) inset)
a
color: #fff
text-shadow: 0 1px 2px rgba(0,0,0,0.4)
.oe_view_manager_buttons
white-space: nowrap
// }}}
// ViewManager.switches {{{
.oe_view_manager_switch
padding: 0
margin: 0 0 0 8px
li
margin: 0
width: 24px
height: 24px
line-height: 16px
padding: 0
text-align: center
list-style-type: none
a
position: relative
.oe_vm_switch_list:after, .oe_vm_switch_tree:after
padding: 2px
content: "i"
.oe_vm_switch_form:after
content: "m"
.oe_vm_switch_graph:after
font-family: "mnmliconsRegular" !important
font-size: 21px
font-weight: 300 !important
content: "}"
top: -2px
position: relative
.oe_vm_switch_gantt:after
font-family: "mnmliconsRegular" !important
font-size: 21px
font-weight: 300 !important
content: "y"
top: -2px
position: relative
.oe_vm_switch_calendar:after
content: "P"
.oe_vm_switch_kanban:after
content: "k"
.oe_vm_switch_diagram:after
content: "f"
// }}}
// List pager {{{
.oe_list_pager
line-height: 26px
.oe_pager_value
float: left
margin-right: 8px
ul.oe_pager_group
padding: 0
margin: 0
.oe_pager_group
float: left
height: 24px
line-height: 24px
display: inline-block
border: 1px solid #ababab
cursor: pointer
@include radius(5px)
li
height: 24px
line-height: 24px
padding: 0
margin: 0
list-style-type: none
float: left
border-right: 1px solid #ababab
&:last-child
border: none
a
color: #4c4c4c
padding: 0 8px
&:hover
text-decoration: none
.active
background: #999
@include box-shadow(0 1px 4px rgba(0,0,0,0.3) inset)
a
color: #fff
text-shadow: 0 1px 2px rgba(0,0,0,0.4)
.oe_list_pager.oe_list_pager_single_page .oe_pager_group
display: none
// }}}
// ViewManager application {{{
// ViewManager application {{{
// .oe_view_manager_current
// height: 100%
// > .oe_view_manager_header
-1
View File
@@ -425,7 +425,6 @@ instance.web.FormView = instance.web.View.extend(instance.web.form.FieldManagerM
$el.removeAttr("disabled");
});
});
this.do_update_pager();
},
do_update_pager: function(hide_index) {
this.$pager.toggle(this.dataset.ids.length > 1);
+4 -6
View File
@@ -289,7 +289,7 @@ instance.web.ListView = instance.web.View.extend( /** @lends instance.web.ListVi
// Pager
if (!this.$pager) {
this.$pager = $(QWeb.render("ListView.pager", {'widget':self}));
this.$pager = $(QWeb.render("ListView.pager", {'widget':self})).hide();
if (this.options.$buttons) {
this.$pager.appendTo(this.options.$pager);
} else {
@@ -408,7 +408,7 @@ instance.web.ListView = instance.web.View.extend( /** @lends instance.web.ListVi
this.$pager.hide();
else
this.$pager.css("display", "");
this.$pager.toggleClass('oe_list_pager_single_page', (total <= limit));
this.$pager.find('.oe-pager-button').toggleClass('disabled', total <= limit);
var spager = '-';
if (total) {
var range_start = this.page * limit + 1;
@@ -1517,12 +1517,10 @@ instance.web.ListView.Groups = instance.web.Class.extend( /** @lends instance.we
}))
.end()
.find('button[data-pager-action=previous]')
.css('visibility',
page === 0 ? 'hidden' : '')
.toggleClass('disabled', page === 0)
.end()
.find('button[data-pager-action=next]')
.css('visibility',
page === pages - 1 ? 'hidden' : '');
.toggleClass('disabled', page === pages - 1);
}
}
+1 -1
View File
@@ -568,7 +568,7 @@ instance.web.ViewManager = instance.web.Widget.extend({
this._super();
var $sidebar = this.flags.sidebar ? this.$('.oe_view_manager_sidebar') : undefined,
$pager = this.$('.oe_view_manager_pager');
$pager = this.$('.oe-view-manager-pager');
this.$breadcrumbs = this.$('.oe-view-title');
this.$switch_buttons = this.$('.oe-view-manager-switch a');
+21 -43
View File
@@ -494,17 +494,18 @@
</t>
</div>
<div class="oe-view-manager-sidebar"></div>
<div class="oe-view-manager-pager"></div>
<t t-if="widget.view_order.length > 1">
<div class="oe-view-manager-switch btn-group btn-group-sm">
<t t-foreach="widget.view_order" t-as="view_type">
<a type="button" t-attf-class="btn btn-default fa oe-vm-switch-#{view_type}" t-att-data-view-type="view_type" t-att-title="view_type" t-if="view_type!=='form'">
</a>
</t>
</div>
</t>
<div class="oe-right-toolbar">
<div class="oe-view-manager-pager"></div>
<t t-if="widget.view_order.length > 1">
<div class="oe-view-manager-switch btn-group btn-group-sm">
<t t-foreach="widget.view_order" t-as="view_type">
<a type="button" t-attf-class="btn btn-default fa oe-vm-switch-#{view_type}" t-att-data-view-type="view_type" t-att-title="view_type" t-if="view_type!=='form'">
</a>
</t>
</div>
</t>
</div>
</div>
</div>
</div>
@@ -571,29 +572,15 @@
</table>
</div>
</t>
<t t-name="ViewPager">
<div t-name="ViewPager">
<div class="oe_pager_value">
<t t-raw="0"/>
</div>
<ul class="oe_pager_group">
<!--
<button class="oe_button oe_button_pager" type="button" data-pager-action="first">
<img t-att-src='_s + "/web/static/src/img/pager_first.png"'/>
</button>
-->
<li>
<a class="oe_i" type="button" data-pager-action="previous">(</a>
</li>
<li>
<a class="oe_i" type="button" data-pager-action="next">)</a>
</li>
<!--
<button class="oe_button oe_button_pager" type="button" data-pager-action="last">
<img t-att-src='_s + "/web/static/src/img/pager_last.png"'/>
</button>
-->
</ul>
</t>
<div class="btn-group btn-group-sm">
<a class="fa fa-chevron-left btn btn-default oe-pager-button" type="button" data-pager-action="previous"></a>
<a class="fa fa-chevron-right btn btn-default oe-pager-button" type="button" data-pager-action="next"></a>
</div>
</div>
<t t-name="Sidebar">
<div class="oe_sidebar">
@@ -739,13 +726,8 @@
</t>
</div>
</t>
<t t-name="ListView.pager">
<div class="oe_list_pager" t-att-colspan="widget.columns_count">
<t t-if="!widget.no_leaf and widget.options.pager !== false" t-call="ViewPager">
<span class="oe_list_pager_state">
</span>
</t>
</div>
<t t-name="ListView.pager" t-if="!widget.no_leaf and widget.options.pager !== false" t-call="ViewPager">
<span class="oe_list_pager_state"></span>
</t>
<t t-name="ListView.rows" t-foreach="records.length" t-as="index">
<t t-call="ListView.row">
@@ -830,12 +812,8 @@
</span>
</t>
</div>
<t t-name="FormView.pager">
<div class="oe_form_pager">
<t t-if="widget.options.pager !== false" t-call="ViewPager">
<span class="oe_form_pager_state"></span>
</t>
</div>
<t t-name="FormView.pager" t-if="widget.options.pager !== false" t-call="ViewPager">
<span class="oe_form_pager_state"></span>
</t>
<form t-name="FormView.set_default">
<t t-set="args" t-value="widget.dialog_options.args"/>