Merge lp:~elachuni/ubuntu-webcatalog/improve-pagination-widget into lp:ubuntu-webcatalog

[Anthony Lenton]

Improvements for the pagination widget.

Overview
========
This branch improves the pagination widget by implementing the recommendations on
http://developer.yahoo.com/ypatterns/navigation/pagination/search.html

Details
=======
You can see samples of the rendered resulting widget on
http://people.canonical.com/~anthony/Selection_003.png
http://people.canonical.com/~anthony/Selection_004.png
http://people.canonical.com/~anthony/Selection_005.png

[lp:~elachuni/ubuntu-webcatalog/improve-pagination-widget]

43. By Anthony Lenton on 2011-07-19

Added visble_page_range testcase to tests that are actually run.

[Ricardo Kirkner (ricardokirkner)]

LGTM.

Don't like how the second screenshot displays '1 to 1 of 1' twice in a very short 'space', but that's work for a different mp probably.

review: Approve

=== modified file 'src/webcatalog/static/css/webcatalog.css'
--- src/webcatalog/static/css/webcatalog.css	2011-07-04 14:47:05 +0000
+++ src/webcatalog/static/css/webcatalog.css	2011-07-19 18:35:13 +0000
@@ -246,3 +246,14 @@
 }
 
 /* End breadcrumbs style */
+
+.paginator p {
+    text-align: center;
+}
+.paginator .arrow a {
+    font-size: 16px;
+}
+
+.paginator p, .paginator a {
+    font-size: 14px;
+}
 
=== added file 'src/webcatalog/static/images/arrow_next.png'
 Binary files src/webcatalog/static/images/arrow_next.png	1970-01-01 00:00:00 +0000 and src/webcatalog/static/images/arrow_next.png	2011-07-19 18:35:13 +0000 differ
=== added file 'src/webcatalog/static/images/arrow_previous.png'
 Binary files src/webcatalog/static/images/arrow_previous.png	1970-01-01 00:00:00 +0000 and src/webcatalog/static/images/arrow_previous.png	2011-07-19 18:35:13 +0000 differ
=== modified file 'src/webcatalog/templates/webcatalog/batch_navigation.html'
--- src/webcatalog/templates/webcatalog/batch_navigation.html	2011-06-27 13:00:56 +0000
+++ src/webcatalog/templates/webcatalog/batch_navigation.html	2011-07-19 18:35:13 +0000
@@ -1,11 +1,34 @@
 {% load i18n %}
-  {% if page.has_previous %}
-    <a href="?{% if query %}q={{ query }}&{% endif %}page={{ page.previous_page_number }}">{% trans "prev" %}</a>
-  {% endif %}
+{% load webcatalog %}
+<div class="paginator">
   {% blocktrans with start_index=page.start_index end_index=page.end_index count=page.paginator.count %}
-  {{ start_index }} to {{ end_index }} of {{ count }}
+  <p>Displaying items {{ start_index }} to {{ end_index }} of {{ count }}</p>
   {% endblocktrans %}
+  {% if page.has_other_pages %}
+  <p>
+  {% if page.has_previous %}
+    <span class="arrow">
+    <a href="?{% if query %}q={{ query }}&{% endif %}page={{ page.previous_page_number }}">
+        {% trans "Prev" %}</a>
+    <a href="?{% if query %}q={{ query }}&{% endif %}page={{ page.previous_page_number }}">
+        <img src="{{ STATIC_URL }}images/arrow_previous.png"/></a>
+    </span>
+  {% endif %}
+  {% for i in page|visible_page_range %}
+    {% ifequal i page.number %}
+        {{i}}
+    {% else %}
+    <a href="?{% if query %}q={{ query }}&{% endif %}page={{ i }}">{{ i }}</a>
+    {% endifequal %}
+  {% endfor %}
   {% if page.has_next %}
-    <a href="?{% if query %}q={{ query }}&{% endif %}page={{ page.next_page_number }}">{% trans "next" %}</a>
-  {% endif %}
-
+    <span class="arrow">
+    <a href="?{% if query %}q={{ query }}&{% endif %}page={{ page.next_page_number }}">
+        <img src="{{ STATIC_URL }}images/arrow_next.png"/></a>
+    <a href="?{% if query %}q={{ query }}&{% endif %}page={{ page.next_page_number }}">
+        {% trans "Next" %}</a>
+    </span>
+  {% endif %}
+  </p>
+  {% endif %}
+</div>
 
=== modified file 'src/webcatalog/templatetags/webcatalog.py'
--- src/webcatalog/templatetags/webcatalog.py	2011-07-04 14:47:05 +0000
+++ src/webcatalog/templatetags/webcatalog.py	2011-07-19 18:35:13 +0000
@@ -171,3 +171,9 @@
     if inside_li:
         html += "</ul>"
     return mark_safe(html)
+
[e-mail]
+def visible_page_range(page):
+    first = max(page.number - 5, 1)
+    last = min(first + 10, page.paginator.num_pages + 1)
+    return range(first, last)
 \ No newline at end of file
 
=== modified file 'src/webcatalog/tests/test_templatetags.py'
--- src/webcatalog/tests/test_templatetags.py	2011-07-04 20:17:45 +0000
+++ src/webcatalog/tests/test_templatetags.py	2011-07-19 18:35:13 +0000
@@ -26,17 +26,20 @@
 
 from django.core.urlresolvers import reverse
 from django.template import Context
+from mock import Mock
 
 from webcatalog.templatetags.webcatalog import (
     htmlize_package_description,
     install_options,
+    visible_page_range,
     )
 from webcatalog.tests.factory import TestCaseWithFactory
 
 __metaclass__ = type
 __all__ = [
     'InstallOptionsTestCase',
-    'TestHtmlize',
+    'HtmlizePackageDescriptionTestCase',
+    'VisiblePageRangeTestCase',
     ]
 
 
@@ -234,7 +237,7 @@
    * Extensible with plugins
 """
 
-class TestHtmlize(unittest.TestCase):
+class HtmlizePackageDescriptionTestCase(unittest.TestCase):
     def test_htmlize(self):
         for descr in [d1, d2, d3]:
             html_descr = htmlize_package_description(descr)
@@ -263,4 +266,24 @@
             html_descr = htmlize_package_description(descr)
             li_count = html_descr.count("<li>")
             self.assertEqual(3, li_count)
-        
 \ No newline at end of file
+
+class VisiblePageRangeTestCase(unittest.TestCase):
+    def test_visible_page_range(self):
+        cases = [
+            ( 2, 1, [1, 2]),
+            (20, 1, range(1, 11)),
+            ( 3, 2, [1, 2, 3]),
+            (20, 2, range(1, 11)),
+            ( 4, 4, [1, 2, 3, 4]),
+            (20, 8, range(3, 13)),
+            ( 8, 8, range(3, 9)),
+            (20, 18, range(13, 21)),
+            (400, 400, range(395, 401)),
+        ]
+        for num_pages, current_page, expected in cases:
+            page = Mock()
+            page.number = current_page
+            page.paginator.num_pages = num_pages
+            result = visible_page_range(page)
+            self.assertTrue(len(result) <= 10)
+            self.assertEqual(expected, result)
 
=== modified file 'src/webcatalog/tests/test_views.py'
--- src/webcatalog/tests/test_views.py	2011-07-07 20:54:45 +0000
+++ src/webcatalog/tests/test_views.py	2011-07-19 18:35:13 +0000
@@ -313,9 +313,10 @@
         self.assertEqual(3, page.paginator.count)
         self.assertEqual(2, page.next_page_number())
 
-        # And we have two references to the 'next' link, one at the top
-        # and one at the bottom.
-        self.assertContains(response, '<a href="?q=fo&page=2"', 2)
+        # And we have six references to the next page, three at the top
+        # and three at the bottom, as you have the linked "2" number, plus the
+        # arrow and text "Next" link.
+        self.assertContains(response, '<a href="?q=fo&page=2"', 6)
 
     def test_invalid_page_doesnt_error(self):
         distro = self.factory.make_distroseries(code_name='lucid')
@@ -396,9 +397,10 @@
         self.assertEqual(3, page.paginator.count)
         self.assertEqual(2, page.next_page_number())
 
-        # And we have two references to the 'next' link, one at the top
-        # and one at the bottom.
-        self.assertContains(response, '<a href="?page=2"', 2)
+        # And we have six references to the next page, three at the top
+        # and three at the bottom, as you have the linked "2" number, plus the
+        # arrow and text "Next" link.
+        self.assertContains(response, '<a href="?page=2"', 6)
 
     def test_invalid_page_doesnt_error(self):
         dept = self.factory.make_department('bar')