Replace unicode with font awesome icons in Tabulator pagination (#481)

rjaros · Jun 15, 2023 · 4b94930 · 4b94930
1 parent 49c826f
commit 4b94930
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/kvision-modules/kvision-tabulator/src/main/kotlin/io/kvision/tabulator/Tabulator.kt b/kvision-modules/kvision-tabulator/src/main/kotlin/io/kvision/tabulator/Tabulator.kt
@@ -156,15 +156,15 @@ open class Tabulator<T : Any>(
                     error = "!!!"
                 }
                 pagination = obj {
-                    page_size = "↕"
+                    page_size = "<i class=\"fas fa-up-down\"></i>"
                     page_title = "#"
-                    first = "⯇⯇"
+                    first = "<i class=\"fas fa-angles-left\"></i>"
                     first_title = "<<"
-                    last = "⯈⯈"
+                    last = "<i class=\"fas fa-angles-right\"></i>"
                     last_title = ">>"
-                    prev = "⯇"
+                    prev = "<i class=\"fas fa-angle-left\"></i>"
                     prev_title = "<"
-                    next = "⯈"
+                    next = "<i class=\"fas fa-angle-right\"></i>"
                     next_title = ">"
                     all = "*"
                     counter = obj {

diff --git a/...ion-modules/kvision-tabulator/src/main/kotlin/io/kvision/tabulator/TabulatorPagination.kt b/...ion-modules/kvision-tabulator/src/main/kotlin/io/kvision/tabulator/TabulatorPagination.kt
@@ -28,6 +28,7 @@ import io.kvision.core.Container
 import io.kvision.core.onClick
 import io.kvision.html.TAG
 import io.kvision.html.div
+import io.kvision.html.icon
 import io.kvision.html.tag
 import io.kvision.panel.SimplePanel
 import io.kvision.state.ObservableValue
@@ -61,7 +62,8 @@ open class TabulatorPagination<T : Any>(
         div(className = "tabulator-footer") {
             borderTop = Border(style = BorderStyle.NONE)
             bind(paginationState) { state ->
-                tag(TAG.BUTTON, "⯇⯇", className = "tabulator-page") {
+                tag(TAG.BUTTON, className = "tabulator-page") {
+                    icon("fas fa-angles-left")
                     role = "button"
                     setAttribute("type", "button")
                     setAttribute("aria-label", "<<")
@@ -73,7 +75,8 @@ open class TabulatorPagination<T : Any>(
                         tabulator?.setPage(1)
                     }
                 }
-                tag(TAG.BUTTON, "⯇", className = "tabulator-page") {
+                tag(TAG.BUTTON, className = "tabulator-page") {
+                    icon("fas fa-angle-left")
                     role = "button"
                     setAttribute("type", "button")
                     setAttribute("aria-label", "<")
@@ -106,7 +109,8 @@ open class TabulatorPagination<T : Any>(
                         }
                     }
                 }
-                tag(TAG.BUTTON, "⯈", className = "tabulator-page") {
+                tag(TAG.BUTTON, className = "tabulator-page") {
+                    icon("fas fa-angle-right")
                     role = "button"
                     setAttribute("type", "button")
                     setAttribute("aria-label", ">")
@@ -118,7 +122,8 @@ open class TabulatorPagination<T : Any>(
                         tabulator?.nextPage()
                     }
                 }
-                tag(TAG.BUTTON, "⯈⯈", className = "tabulator-page") {
+                tag(TAG.BUTTON, className = "tabulator-page") {
+                    icon("fas fa-angles-right")
                     role = "button"
                     setAttribute("type", "button")
                     setAttribute("aria-label", ">>")