Tweak stimulus pagination (used on orders) to be up to date

jibees · Sep 5, 2023 · 5265e90 · 5265e90
1 parent 9b9f2b3
commit 5265e90
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/app/views/admin/shared/_stimulus_pagination.html.haml b/app/views/admin/shared/_stimulus_pagination.html.haml
@@ -2,21 +2,29 @@
 
 .pagination{ "data-controller": "search" }
   - if pagy.prev
-    %button{ data: { action: 'click->search#changePage', page: pagy.prev } }!= pagy_t('pagy.nav.prev')
+    %button.page.prev{ data: { action: 'click->search#changePage', page: pagy.prev } }
+      - if feature?(:admin_style_v3, spree_current_user)
+        %i.icon-chevron-left{ data: { action: 'click->search#changePage', page: pagy.prev } }
+      - else
+        != pagy_t('pagy.nav.prev')
   - else
-    %button.disabled{disabled: "disabled"}!= pagy_t('pagy.nav.prev')
+    %button.page.disabled{disabled: "disabled"}!= pagy_t('pagy.nav.prev')
 
   - pagy.series.each do |item|                      # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
     - if item.is_a?(Integer)                        # page link
-      %button{ data: { action: 'click->search#changePage', page: item } }= item
+      %button.page{ data: { action: 'click->search#changePage', page: item } }= item
 
     - elsif item.is_a?(String)                      # current page
-      %button.active= item
+      %button.page.current.active= item
 
     - elsif item == :gap                            # page gap
-      %span.pagination-ellipsis!= pagy_t('pagy.nav.gap')
+      %span.page.gap.pagination-ellipsis!= pagy_t('pagy.nav.gap')
 
   - if pagy.next
-    %button{ data: { action: 'click->search#changePage', page: pagy.next } }!= pagy_t('pagy.nav.next')
+    %button.page.next{ data: { action: 'click->search#changePage', page: pagy.next } }
+      - if feature?(:admin_style_v3, spree_current_user)
+        %i.icon-chevron-right{ data: { action: 'click->search#changePage', page: pagy.next } }
+      - else
+        != pagy_t('pagy.nav.next')
   - else
-    %button.disabled.pagination-next{disabled: "disabled"}!= pagy_t('pagy.nav.next')
+    %button.page.disabled.pagination-next{disabled: "disabled"}!= pagy_t('pagy.nav.next')
diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -9,15 +9,20 @@
   justify-content: center;
   gap: 8px;
 
+  button.page,
   .page {
-    width: 40px;
-    line-height: 40px;
+    width: $btn-relaxed-height;
+    line-height: $btn-relaxed-height;
+    height: $btn-relaxed-height;
+    padding: 0;
+    margin: 0;
     text-align: center;
     display: inline-block;
     text-align: center;
     background-color: $color-1;
     @include defaultBoxShadow;
     border-radius: 4px;
+    border: none;
     color: $color-8;
     font-weight: 600;
 
@@ -31,6 +36,10 @@
       color: $white;
     }
 
+    &.disabled {
+      display: none;
+    }
+
     &.prev {
       margin-right: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers
       & > i {
@@ -45,16 +54,22 @@
       }
     }
 
+    &:hover:not(.gap):not(.disabled),
     &[href]:hover {
       background-color: $color-5;
       color: $white;
+      border: none;
     }
 
     &.gap {
       background-color: transparent;
       box-shadow: none;
       width: auto;
     }
+
+    &:active {
+      border: none;
+    }
   }
 
   button {