pagination changes

client/res/templates/record/list-pagination.tpl

@@ -1,22 +1,42 @@
-<ul class="pagination">
+<ul class="pagination clearfix">
     <li {{#unless previous}}class="disabled"{{/unless}}>
-        <a class="pagination-btn" role="button" tabindex="0" data-page="first"><i class="fas fa-fast-backward"></i></a>
+        <a
+            class="pagination-btn btn-btn-default"
+            role="button"
+            tabindex="0"
+            data-page="previous"
+        ><span class="fas fa-chevron-left"></span></a>
     </li>
-    <li {{#unless previous}}class="disabled"{{/unless}}>
-        <a class="pagination-btn" role="button" tabindex="0" data-page="previous"><i class="fas fa-backward"></i></a>
+    <li class="{{#unless previous}}disabled{{/unless}} hidden">
+        <a
+            class="pagination-btn btn-btn-default"
+            role="button" tabindex="0"
+            data-page="first"
+        >1</a>
     </li>
     <li>
         <a
-            class="pagination-btn-middle"
+            class="pagination-btn-middle btn-btn-default"
             role="button"
             tabindex="0"
             data-page="current"
-        >{{from}} - {{to}}{{#unless noTotal}} &middot; {{total}}{{/unless}}</a>
+            {{#unless noTotal}}title="{{translate 'Total'}}: {{total}}"{{/unless}}
+        >{{from}} - {{to}}</a>
+    </li>
+    <li class="{{#unless last}}disabled{{/unless}} hidden">
+        <a
+            class="pagination-btn btn-btn-default"
+            role="button"
+            tabindex="0"
+            data-page="last"
+        ><span class="fas fa-step-forward"></span></a>
     </li>
     <li {{#unless next}}class="disabled"{{/unless}}>
-        <a class="pagination-btn" role="button" tabindex="0" data-page="next"><i class="fas fa-forward"></i></a>
-    </li>
-    <li {{#unless next}}class="disabled"{{/unless}}>
-        <a class="pagination-btn" role="button" tabindex="0" data-page="last"><i class="fas fa-fast-forward"></i></a>
+        <a
+            class="pagination-btn btn-btn-default"
+            role="button"
+            tabindex="0"
+            data-page="next"
+        ><span class="fas fa-chevron-right"></span></a>
     </li>
 </ul>

client/res/templates/record/list.tpl

@@ -227,9 +227,9 @@
 </div>
 
 {{#if bottomBar}}
-<div class="list-bottom-bar">
-{{#if paginationBottom}} {{{pagination}}} {{/if}}
-</div>
+    <div class="list-bottom-bar">
+        {{#if paginationBottom}} {{{pagination}}} {{/if}}
+    </div>
 {{/if}}
 
 {{else}}

client/src/views/record/list-pagination.js

@@ -37,12 +37,18 @@ define('views/record/list-pagination', ['view'], function (Dep) {
             const next = this.collection.total - this.collection.offset > this.collection.maxSize ||
                 this.collection.total === -1;
 
+            const last = next && this.collection.total >= 0;
+
+            const from = this.collection.offset + 1;
+            const to = this.collection.offset + this.collection.length;
+
             return {
-                total: this.collection.total,
-                from: this.collection.offset + 1 ,
-                to: this.collection.offset + this.collection.length,
+                total: this.getHelper().numberUtil.formatInt(this.collection.total),
+                from: this.getHelper().numberUtil.formatInt(from),
+                to: this.getHelper().numberUtil.formatInt(to),
                 previous: previous,
                 next: next,
+                last: last,
                 noTotal: this.collection.total === -1 || this.collection.total === -2,
             };
         },

frontend/less/espo/custom.less

@@ -495,22 +495,51 @@ input.global-search-input {
     }
 }
 
-.list-container .pagination {
+ul.pagination {
+    display: inline-block;
     margin: 0;
 
-    a.pagination-btn {
-        width: 40px;
-        text-align: center;
-    }
+    > li {
+        display: inline-block;
+        float: left;
 
-    a.pagination-btn-middle {
-        min-width: 130px;
-        text-align: center;
+        a {
+            color: var(--gray-soft);
+
+            &:hover,
+            &:focus {
+                color: var(--gray-light)
+            }
+
+            &:focus:not(:hover) {
+                background-color: var(--btn-default-bg);
+            }
+        }
+
+        &:first-child > a {
+            border-top-left-radius: var(--border-radius);
+            border-bottom-left-radius: var(--border-radius);
+        }
+
+        &:last-child > a {
+            border-top-right-radius: var(--border-radius);
+            border-bottom-right-radius: var(--border-radius);
+        }
+
+        a.pagination-btn {
+            min-width: 40px;
+            text-align: center;
+        }
+
+        a.pagination-btn-middle {
+            min-width: 130px;
+            text-align: center;
+        }
     }
 }
 
 .list-bottom-bar {
-    margin-top: 10px;
+    margin-top: var(--vertical-gap);
 }
 
 .radio-container {