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,
+ ] );
}
/**
* @return string[]
*/
public function getModuleStyles() {
- return [ 'mediawiki.pager.tablePager' ];
+ return [ 'mediawiki.pager.tablePager', 'oojs-ui.styles.icons-movement' ];
}
/**
.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;
}