OOUI-ificiation of TablePager nav

Depends on next OOUI release for new icons.

Bug: T163715
Change-Id: Ia750131aae52c35181209277c5b951a447db1b5a

diff --git a/includes/pager/TablePager.php b/includes/pager/TablePager.php
index 770c1c6..70055da 100644 (file)
--- 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 216cd5a..5b3519e 100644 (file)
--- 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;
 }