Merge pull request #5013 from ShayArtzi/rtl-pagination-fix

fix(rtl): Fixed pagination button direction in RTL

Author: swalters

src/features/pagination/less/pagination.less

@@ -3,13 +3,13 @@
 @import (reference) "../../../less/bootstrap/bootstrap";
 
 .ui-grid-pager-panel {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    box-sizing: content-box;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  box-sizing: content-box;
 }
 
 .ui-grid-pager-container {
@@ -53,6 +53,14 @@
     margin-left: -3px;
   }
 
+  .first-bar-rtl {
+    width: 10px;
+    border-left: 2px solid #4d4d4d;
+    margin-top: -6px;
+    height: 12px;
+    margin-right: -7px;
+  }
+
   .first-triangle {
     width: 0;
     height: 0;
@@ -86,6 +94,16 @@
     height: 12px;
     margin-left: 1px;
   }
+
+  .last-bar-rtl {
+    width: 10px;
+    border-left: 2px solid #4d4d4d;
+    margin-top: -6px;
+    height: 12px;
+    margin-right: -11px;
+  }
+
+
 }
 
 .ui-grid-pager-row-count-picker {

src/features/pagination/templates/pagination.html

@@ -18,9 +18,9 @@
         ng-click="pageFirstPageClick()"
         ng-disabled="cantPageBackward()">
         <div
-          class="first-triangle">
+          ng-class="grid.isRTL() ? 'last-triangle' : 'first-triangle'">
           <div
-            class="first-bar">
+            ng-class="grid.isRTL() ? 'last-bar-rtl' : 'first-bar'">
           </div>
         </div>
       </button>
@@ -32,7 +32,7 @@
         ui-grid-one-bind-aria-label="aria.pageBack"
         ng-click="pagePreviousPageClick()"
         ng-disabled="cantPageBackward()">
-        <div class="first-triangle prev-triangle"></div>
+        <div ng-class="grid.isRTL() ? 'last-triangle prev-triangle' : 'first-triangle prev-triangle'"></div>
       </button>
       <input
         type="number"
@@ -60,7 +60,7 @@
         ui-grid-one-bind-aria-label="aria.pageForward"
         ng-click="pageNextPageClick()"
         ng-disabled="cantPageForward()">
-        <div class="last-triangle next-triangle"></div>
+        <div ng-class="grid.isRTL() ? 'first-triangle next-triangle' : 'last-triangle next-triangle'"></div>
       </button>
       <button
         type="button"
@@ -70,8 +70,8 @@
         ui-grid-one-bind-aria-label="aria.pageToLast"
         ng-click="pageLastPageClick()"
         ng-disabled="cantPageToLast()">
-        <div class="last-triangle">
-          <div class="last-bar">
+        <div ng-class="grid.isRTL() ? 'first-triangle' : 'last-triangle'">
+          <div ng-class="grid.isRTL() ? 'first-bar-rtl' : 'last-bar'">
           </div>
         </div>
       </button>