Implement new UI for paginationnew-pagination

9 files changed, 33 insertions, 53 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 2e0eee52a59..ee46adf4a2d 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -2,6 +2,7 @@ Please view this file on the master branch, on stable branches it's out of date.
 
 v 8.5.0 (unreleased)
   - Add "visibility" flag to GET /projects api endpoint
+  - New UI for pagination
 
 v 8.4.0 (unreleased)
   - Allow LDAP users to change their email if it was not set by the LDAP server
diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss
index 2cd30491bf5..8a5bde83335 100644
--- a/app/assets/stylesheets/framework/pagination.scss
+++ b/app/assets/stylesheets/framework/pagination.scss
@@ -1,35 +1,12 @@
 .gl-pagination {
+  text-align: center;
+  width: 100%;
   border-top: 1px solid $border-color;
-  background-color: $background-color;
-  margin: -$gl-padding;
+  margin: 0;
   margin-top: 0;
 
   .pagination {
     padding: 0;
-    margin: 0;
-    display: block;
-
-    li.first,
-    li.last,
-    li.next,
-    li.prev {
-      > a {
-        color: $link-color;
-
-        &:hover {
-          color: #fff;
-        }
-      }
-    }
-
-    li > a,
-    li > span {
-      border: none;
-      margin: 0;
-      @include border-radius(0 !important);
-      padding: 13px 19px;
-      border-right: 1px solid $border-color;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index cd0621cdbf3..798cd224ad0 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -66,20 +66,20 @@ $legend-color:                   $text-color;
 //##
 
 $pagination-color:                     $gl-gray;
-$pagination-bg:                        $background-color;
-$pagination-border:                    transparent;
+$pagination-bg:                        #fff;
+$pagination-border:                    $border-color;
 
-$pagination-hover-color:               #fff;
-$pagination-hover-bg:                  $brand-info;
-$pagination-hover-border:              transparent;
+$pagination-hover-color:               $gl-gray;
+$pagination-hover-bg:                  $hover;
+$pagination-hover-border:              $border-color;
 
-$pagination-active-color:              #fff;
-$pagination-active-bg:                 $brand-info;
-$pagination-active-border:             transparent;
+$pagination-active-color:              $blue-dark;
+$pagination-active-bg:                 #fff;
+$pagination-active-border:             $border-color;
 
-$pagination-disabled-color:            #fff;
-$pagination-disabled-bg:               lighten($brand-info, 15%);
-$pagination-disabled-border:           transparent;
+$pagination-disabled-color:            #cdcdcd;
+$pagination-disabled-bg:               $background-color;
+$pagination-disabled-border:           $border-color;
 
 
 //== Form states and alerts
diff --git a/app/views/kaminari/gitlab/_next_page.html.haml b/app/views/kaminari/gitlab/_next_page.html.haml
index 00c5f0b6f4e..c805914fc3f 100644
--- a/app/views/kaminari/gitlab/_next_page.html.haml
+++ b/app/views/kaminari/gitlab/_next_page.html.haml
@@ -5,5 +5,9 @@
 -#    num_pages:     total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li.next
-  = link_to_unless current_page.last?, raw(t 'views.pagination.next'), url, rel: 'next', remote: remote
+- if current_page.last?
+  %li{ class: "next disabled" }
+    %span= raw(t 'views.pagination.next')
+- else
+  %li{ class: "next" }
+    = link_to raw(t 'views.pagination.next'), url, rel: 'next', remote: remote
diff --git a/app/views/kaminari/gitlab/_paginator.html.haml b/app/views/kaminari/gitlab/_paginator.html.haml
index 2f645186921..a12c53bcfe7 100644
--- a/app/views/kaminari/gitlab/_paginator.html.haml
+++ b/app/views/kaminari/gitlab/_paginator.html.haml
@@ -10,13 +10,13 @@
     %ul.pagination.clearfix
       - unless current_page.first?
         = first_page_tag unless num_pages < 5 # As kaminari will always show the first 5 pages
-        = prev_page_tag
+      = prev_page_tag
       - each_page do |page|
         - if page.left_outer? || page.right_outer? || page.inside_window?
           = page_tag page
         - elsif !page.was_truncated?
           = gap_tag
+      = next_page_tag
       - unless current_page.last?
-        = next_page_tag
         = last_page_tag unless num_pages < 5
 
diff --git a/app/views/kaminari/gitlab/_prev_page.html.haml b/app/views/kaminari/gitlab/_prev_page.html.haml
index f673abdb3ae..afb20455e0a 100644
--- a/app/views/kaminari/gitlab/_prev_page.html.haml
+++ b/app/views/kaminari/gitlab/_prev_page.html.haml
@@ -5,5 +5,9 @@
 -#    num_pages:     total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li{class: "prev" }
-  = link_to_unless current_page.first?, raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote
+- if current_page.first?
+  %li{ class: "prev disabled" }
+    %span= raw(t 'views.pagination.previous')
+- else
+  %li{ class: "prev" }
+    = link_to raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote
diff --git a/app/views/projects/issues/_issues.html.haml b/app/views/projects/issues/_issues.html.haml
index e0e89b764d5..f34f3c05737 100644
--- a/app/views/projects/issues/_issues.html.haml
+++ b/app/views/projects/issues/_issues.html.haml
@@ -5,9 +5,4 @@
       .nothing-here-block No issues to show
 
 - if @issues.present?
-  .issuable-filter-count
-    %span.pull-right
-      = number_with_delimiter(@issues.total_count)
-      issues for this filter
-
   = paginate @issues, theme: "gitlab"
diff --git a/app/views/projects/merge_requests/_merge_requests.html.haml b/app/views/projects/merge_requests/_merge_requests.html.haml
index 29d09d0a652..5473fa19166 100644
--- a/app/views/projects/merge_requests/_merge_requests.html.haml
+++ b/app/views/projects/merge_requests/_merge_requests.html.haml
@@ -5,10 +5,5 @@
       .nothing-here-block No merge requests to show
 
 - if @merge_requests.present?
-  .issuable-filter-count
-    %span.pull-right
-      = number_with_delimiter(@merge_requests.total_count)
-      merge requests for this filter
-
   = paginate @merge_requests, theme: "gitlab"
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index f6cfb5efd2a..cedb5e207bd 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -8,3 +8,7 @@ en:
       wrong_size: "is the wrong size (should be %{file_size})"
       size_too_small: "is too small (should be at least %{file_size})"
       size_too_big: "is too big (should be at most %{file_size})"
+  views:
+    pagination:
+      previous: "Prev"
+      next: "Next"