[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

6 files changed, 42 insertions, 383 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 41d1f35bd0c..b93274afa4a 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -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%;
 }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 5aeaccf07aa..92b5211e256 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -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
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 0dc0aedb737..50c75457a9a 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -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);
diff --git a/addons/web/static/src/js/view_list.js b/addons/web/static/src/js/view_list.js
index d7e867ad665..74b3927992d 100644
--- a/addons/web/static/src/js/view_list.js
+++ b/addons/web/static/src/js/view_list.js
@@ -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);
                     }
                 }
 
diff --git a/addons/web/static/src/js/views.js b/addons/web/static/src/js/views.js
index ac8d146823b..88e62433adb 100644
--- a/addons/web/static/src/js/views.js
+++ b/addons/web/static/src/js/views.js
@@ -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');
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 656b1c9c080..e27524cc2c8 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -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"/>