feat(pagination): Add pagination component with its style

src/index.html

@@ -58,6 +58,7 @@
   <script src="tags/dialogs/menu.tag" type="riot/tag"></script>
   <script src="tags/image-size.tag" type="riot/tag"></script>
   <script src="tags/image-date.tag" type="riot/tag"></script>
+  <script src="tags/pagination.tag" type="riot/tag"></script>
   <script src="tags/app.tag" type="riot/tag"></script>
   <script src="scripts/http.js"></script>
   <script src="scripts/script.js"></script>

src/scripts/utils.js

@@ -71,4 +71,28 @@ registryUI.getPage = function(elts, page, limit) {
   if (!limit) { limit = 100; }
   if (!elts) { return []; }
   return elts.slice(page * limit, limit);
+}
+
+registryUI.getNumPages = function(elts, limit) {
+  if (!limit) { limit = 100; }
+  if (!elts) { return 0; }
+  return Math.trunc((elts.length / limit) % 10);
+}
+
+registryUI.getPageLabels = function(page, nPages) {
+  var pageLabels = [];
+  var maxItems = 10;
+  if (nPages === 0) { return pageLabels; }
+  if (page !== 0 && nPages >= maxItems) {
+    pageLabels.push({'icon': 'first_page', page: 0});
+    pageLabels.push({'icon': 'chevron_left', page: page - 1});
+  }
+  for (var i = Math.max(1, page - maxItems); i <= Math.min(nPages, page + maxItems); i++) {
+    pageLabels.push({page: i});
+  }
+  if (page !== nPages && nPages >= maxItems) {
+    pageLabels.push({'icon': 'chevron_right', page: nPages});
+    pageLabels.push({'icon': 'last_page', page: 0});
+  }
+  return pageLabels;
 }

src/style.css

@@ -48,16 +48,22 @@ main {
   font-weight: inherit;
 }
 
-material-card {
-  min-height: 200px;
+material-card, pagination .conatianer {
   max-width: 75%;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
 }
 
-material-card.header {
-  min-height: auto;
+pagination .conatianer {
+  display: flex;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+}
+
+pagination .conatianer .pagination-centered {
+  margin: auto;
 }
 
 @media screen and (max-width: 950px){
@@ -216,12 +222,14 @@ material-card table th {
 }
 
 material-card material-button:hover,
-material-card table tbody tr:hover {
+material-card table tbody tr:hover,
+pagination material-button:hover  {
   background-color: #eee;
 }
 
 material-card material-button,
-material-card table tbody tr {
+material-card table tbody tr,
+pagination material-button  {
   transition-duration: .28s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   transition-property: background-color;
@@ -330,7 +338,8 @@ dropdown-item, #menu-control-dropdown p {
   background-color: #e0e0e0;
 }
 
-material-popup material-button {
+material-popup material-button,
+pagination material-button {
   background-color: #fff;
   color: #000;
 }
@@ -449,7 +458,8 @@ tag-history-button button {
   border: none;
 }
 
-material-card material-button {
+material-card material-button,
+pagination material-button {
   max-height: 30px;
   max-width: 30px;
 }
@@ -458,7 +468,8 @@ material-button:hover material-waves {
   background: none;
 }
 
-material-card material-button {
+material-card material-button,
+pagination material-button {
   background-color: inherit;
 }
 
@@ -510,4 +521,8 @@ material-checkbox .checkbox {
 
 material-checkbox .checkbox.checked {
   background-color: #777;
+}
+
+pagination material-button {
+  padding: 0.2em 0.75em;
 }

src/tags/pagination.tag

@@ -0,0 +1,31 @@
+<!--
+Copyright (C) 2016-2019 Jones Magloire @Joxit
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<pagination>
+  <!-- Begin of tag -->
+  <div class="conatianer">
+    <div class="pagination-centered">
+      <material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}">
+        <i show="{ p.icon }" class="material-icons">{ p.icon }</i>
+        <div hide="{ p.icon }">{ p.page }</div>
+      </material-button>
+    </div>
+  <div>
+  <script>
+
+  </script>
+  <!-- End of tag -->
+</pagination>

src/tags/taglist.tag

@@ -30,6 +30,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <div hide="{ registryUI.taglist.loadend }" class="spinner-wrapper">
     <material-spinner></material-spinner>
   </div>
+  <pagination pages="{ registryUI.getPageLabels(this.page, registryUI.getNumPages(registryUI.taglist.tags))}"></pagination>
   <material-card ref="taglist-tag" class="taglist" multi-delete={ this.multiDelete } tags={ registryUI.getPage(registryUI.taglist.tags, this.page) } show="{ registryUI.taglist.loadend }" >
     <table show="{ registryUI.taglist.loadend }" style="border: none;">
       <thead>
@@ -76,6 +77,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </tbody>
     </table>
   </material-card>
+  <pagination pages="{ registryUI.getPageLabels(this.page, registryUI.getNumPages(registryUI.taglist.tags))}"></pagination>
   <script>
     var self = registryUI.taglist.instance = this;
     self.page = 0;