From 8367e4abebcf23a6be830db57193417d3efe20b5 Mon Sep 17 00:00:00 2001
From: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Date: Wed, 20 Jan 2016 09:42:13 -0800
Subject: [PATCH] Implement new UI for pagination
---
CHANGELOG | 1 +
.../stylesheets/framework/pagination.scss | 29 ++-----------------
.../framework/tw_bootstrap_variables.scss | 22 +++++++-------
.../kaminari/gitlab/_next_page.html.haml | 8 +++--
.../kaminari/gitlab/_paginator.html.haml | 4 +--
.../kaminari/gitlab/_prev_page.html.haml | 8 +++--
app/views/projects/issues/_issues.html.haml | 5 ----
.../merge_requests/_merge_requests.html.haml | 5 ----
config/locales/en.yml | 4 +++
9 files changed, 33 insertions(+), 53 deletions(-)
diff --git a/CHANGELOG b/CHANGELOG
index 704950231d4..79d4b5f94c8 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -3,6 +3,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
- Upgrade gitlab_git to 7.2.23 to fix commit message mentions in first branch push
+ - 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"
--
GitLab