From 91e49be2a789f0813e0af01a98d2ede657d3369c Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Mon, 24 Apr 2017 19:01:30 +0100
Subject: [PATCH] OOUI-ificiation of TablePager nav

Depends on next OOUI release for new icons.

Bug: T163715
Change-Id: Ia750131aae52c35181209277c5b951a447db1b5a
---
 includes/pager/TablePager.php                 | 59 +++++++++---------
 .../mediawiki/mediawiki.pager.tablePager.less | 62 +------------------
 2 files changed, 33 insertions(+), 88 deletions(-)

diff --git a/includes/pager/TablePager.php b/includes/pager/TablePager.php
index 770c1c6ad6..70055da39f 100644
--- a/includes/pager/TablePager.php
+++ b/includes/pager/TablePager.php
@@ -293,35 +293,36 @@ abstract class TablePager extends IndexPager {
 			return '';
 		}
 
-		$labels = [
-			'first' => 'table_pager_first',
-			'prev' => 'table_pager_prev',
-			'next' => 'table_pager_next',
-			'last' => 'table_pager_last',
-		];
-
-		$linkTexts = [];
-		$disabledTexts = [];
-		foreach ( $labels as $type => $label ) {
-			$msgLabel = $this->msg( $label )->escaped();
-			$linkTexts[$type] = "<div class='TablePager_nav-enabled'>$msgLabel</div>";
-			$disabledTexts[$type] = "<div class='TablePager_nav-disabled'>$msgLabel</div>";
+		$this->getOutput()->enableOOUI();
+
+		$types = [ 'first', 'prev', 'next', 'last' ];
+
+		$queries = $this->getPagingQueries();
+		$links = [];
+
+		$buttons = [];
+
+		$title = $this->getTitle();
+
+		foreach ( $types as $type ) {
+			$buttons[] = new \OOUI\ButtonWidget( [
+				// Messages used here:
+				// * table_pager_first
+				// * table_pager_prev
+				// * table_pager_next
+				// * table_pager_last
+				'label' => $this->msg( 'table_pager_' . $type )->text(),
+				'href' => $queries[ $type ] ?
+					$title->getLinkURL( $queries[ $type ] + $this->getDefaultQuery() ) :
+					null,
+				'icon' => $type === 'prev' ? 'previous' : $type,
+				'disabled' => $queries[ $type ] === false
+			] );
 		}
-		$links = $this->getPagingLinks( $linkTexts, $disabledTexts );
-
-		$s = Html::openElement( 'table', [ 'class' => $this->getNavClass() ] );
-		$s .= Html::openElement( 'tr' ) . "\n";
-		$width = 100 / count( $links ) . '%';
-		foreach ( $labels as $type => $label ) {
-			// We want every cell to have the same width. We could use table-layout: fixed; in CSS,
-			// but it only works if we specify the width of a cell or the table and we don't want to.
-			// There is no better way. <https://www.w3.org/TR/CSS2/tables.html#fixed-table-layout>
-			$s .= Html::rawElement( 'td',
-				[ 'style' => "width: $width;", 'class' => "TablePager_nav-$type" ],
-				$links[$type] ) . "\n";
-		}
-		$s .= Html::closeElement( 'tr' ) . Html::closeElement( 'table' ) . "\n";
-		return $s;
+		return new \OOUI\ButtonGroupWidget( [
+			'classes' => [ $this->getNavClass() ],
+			'items' => $buttons,
+		] );
 	}
 
 	/**
@@ -330,7 +331,7 @@ abstract class TablePager extends IndexPager {
 	 * @return string[]
 	 */
 	public function getModuleStyles() {
-		return [ 'mediawiki.pager.tablePager' ];
+		return [ 'mediawiki.pager.tablePager', 'oojs-ui.styles.icons-movement' ];
 	}
 
 	/**
diff --git a/resources/src/mediawiki/mediawiki.pager.tablePager.less b/resources/src/mediawiki/mediawiki.pager.tablePager.less
index 216cd5a107..5b3519e5c8 100644
--- a/resources/src/mediawiki/mediawiki.pager.tablePager.less
+++ b/resources/src/mediawiki/mediawiki.pager.tablePager.less
@@ -21,64 +21,8 @@
 	.background-image-svg('images/arrow-sort-descending.svg', 'images/arrow-sort-descending.png');
 }
 
-.TablePager_nav {
-	margin: 0 auto;
-}
-
-.TablePager_nav td {
-	padding: 3px;
+.TablePager_nav.oo-ui-buttonGroupWidget {
+	display: block;
 	text-align: center;
-	vertical-align: center;
-}
-
-.TablePager_nav a {
-	text-decoration: none;
-}
-
-.TablePager_nav td.TablePager_nav-first .TablePager_nav-disabled {
-	padding-top: 25px;
-	background: none center top no-repeat;
-	.background-image-svg('images/pager-arrow-disabled-fastforward-rtl.svg', 'images/pager-arrow-disabled-fastforward-rtl.png');
-}
-
-.TablePager_nav td.TablePager_nav-prev .TablePager_nav-disabled {
-	padding-top: 25px;
-	background: none center top no-repeat;
-	.background-image-svg('images/pager-arrow-disabled-forward-rtl.svg', 'images/pager-arrow-disabled-forward-rtl.png');
-}
-
-.TablePager_nav td.TablePager_nav-next .TablePager_nav-disabled {
-	padding-top: 25px;
-	background: none center top no-repeat;
-	.background-image-svg('images/pager-arrow-disabled-forward-ltr.svg', 'images/pager-arrow-disabled-forward-ltr.png');
-}
-
-.TablePager_nav td.TablePager_nav-last .TablePager_nav-disabled {
-	padding-top: 25px;
-	background: none center top no-repeat;
-	.background-image-svg('images/pager-arrow-disabled-fastforward-ltr.svg', 'images/pager-arrow-disabled-fastforward-ltr.png');
-}
-
-.TablePager_nav td.TablePager_nav-first .TablePager_nav-enabled {
-	padding-top: 25px;
-	background: none center top no-repeat;
-	.background-image-svg('images/pager-arrow-fastforward-rtl.svg', 'images/pager-arrow-fastforward-rtl.png');
-}
-
-.TablePager_nav td.TablePager_nav-prev .TablePager_nav-enabled {
-	padding-top: 25px;
-	background: none center top no-repeat;
-	.background-image-svg('images/pager-arrow-forward-rtl.svg', 'images/pager-arrow-forward-rtl.png');
-}
-
-.TablePager_nav td.TablePager_nav-next .TablePager_nav-enabled {
-	padding-top: 25px;
-	background: none center top no-repeat;
-	.background-image-svg('images/pager-arrow-forward-ltr.svg', 'images/pager-arrow-forward-ltr.png');
-}
-
-.TablePager_nav td.TablePager_nav-last .TablePager_nav-enabled {
-	padding-top: 25px;
-	background: none center top no-repeat;
-	.background-image-svg('images/pager-arrow-fastforward-ltr.svg', 'images/pager-arrow-fastforward-ltr.png');
+	margin: 1em;
 }
-- 
2.20.1