From: Bartosz Dziewoński Date: Mon, 25 Aug 2014 14:52:11 +0000 (+0200) Subject: TablePager: Redo arrow icons from scratch as CSS backgrounds X-Git-Tag: 1.31.0-rc.0~14209 X-Git-Url: https://git.cyclocoop.org/%27.%24link.%27?a=commitdiff_plain;h=987a860df428e3c70fd81c404f1f7a300345dc48;p=lhc%2Fweb%2Fwiklou.git TablePager: Redo arrow icons from scratch as CSS backgrounds Redrawn the images with SVG versions. Intentionally did not preserve the value of the 'alt' attribute of the old images, it doesn't seem very useful to me. Instead, added 'title' attributes on the sort links that describe their action. This should be more useful than the old version for both visual and aural mediums. Bug: 69277 Change-Id: Ibaec75e81d3eb8338d911ac84d91570047f475f5 --- diff --git a/includes/pager/IndexPager.php b/includes/pager/IndexPager.php index 2142227e74..5972296f39 100644 --- a/includes/pager/IndexPager.php +++ b/includes/pager/IndexPager.php @@ -447,8 +447,8 @@ abstract class IndexPager extends ContextSource implements Pager { * * @param string $text Text displayed on the link * @param array $query Associative array of parameter to be in the query string - * @param string $type Value of the "rel" attribute - * + * @param string $type Link type used to create additional attributes, like "rel", "class" or + * "title". Valid values (non-exhaustive list): 'first', 'last', 'prev', 'next', 'asc', 'desc'. * @return string HTML fragment */ function makeLink( $text, array $query = null, $type = null ) { @@ -458,14 +458,18 @@ abstract class IndexPager extends ContextSource implements Pager { $attrs = array(); if ( in_array( $type, array( 'prev', 'next' ) ) ) { - # HTML5 rel attributes $attrs['rel'] = $type; } + if ( in_array( $type, array( 'asc', 'desc' ) ) ) { + $attrs['title'] = wfMessage( $type == 'asc' ? 'sort-ascending' : 'sort-descending' )->text(); + } + if ( $type ) { $attrs['class'] = "mw-{$type}link"; } + return Linker::linkKnown( $this->getTitle(), $text, diff --git a/includes/pager/TablePager.php b/includes/pager/TablePager.php index 3e061e9021..221878700d 100644 --- a/includes/pager/TablePager.php +++ b/includes/pager/TablePager.php @@ -111,43 +111,38 @@ abstract class TablePager extends IndexPager { * @return string */ function getStartBody() { - global $wgStylePath; $sortClass = $this->getSortHeaderClass(); $s = ''; $fields = $this->getFieldNames(); - # Make table header + // Make table header foreach ( $fields as $field => $name ) { if ( strval( $name ) == '' ) { $s .= Html::rawElement( 'th', array(), ' ' ) . "\n"; } elseif ( $this->isFieldSortable( $field ) ) { $query = array( 'sort' => $field, 'limit' => $this->mLimit ); - if ( $field == $this->mSort ) { - # This is the sorted column - # Prepare a link that goes in the other sort order + $linkType = null; + $class = null; + + if ( $this->mSort == $field ) { + // The table is sorted by this field already, make a link to sort in the other direction + // We don't actually know in which direction other fields will be sorted by default… if ( $this->mDefaultDirection ) { - # Descending - $image = 'Arr_d.png'; + $linkType = 'asc'; + $class = "$sortClass TablePager_sort-descending"; $query['asc'] = '1'; $query['desc'] = ''; - $alt = $this->msg( 'descending_abbrev' )->escaped(); } else { - # Ascending - $image = 'Arr_u.png'; + $linkType = 'desc'; + $class = "$sortClass TablePager_sort-ascending"; $query['asc'] = ''; $query['desc'] = '1'; - $alt = $this->msg( 'ascending_abbrev' )->escaped(); } - $image = "$wgStylePath/common/images/$image"; - $link = $this->makeLink( - Html::element( 'img', array( 'width' => 12, 'height' => 12, - 'alt' => $alt, 'src' => $image ) ) . htmlspecialchars( $name ), $query ); - $s .= Html::rawElement( 'th', array( 'class' => $sortClass ), $link ) . "\n"; - } else { - $s .= Html::rawElement( 'th', array(), - $this->makeLink( htmlspecialchars( $name ), $query ) ) . "\n"; } + + $link = $this->makeLink( htmlspecialchars( $name ), $query, $linkType ); + $s .= Html::rawElement( 'th', array( 'class' => $class ), $link ) . "\n"; } else { $s .= Html::element( 'th', array(), $name ) . "\n"; } diff --git a/resources/Resources.php b/resources/Resources.php index d970572610..3073152e82 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -921,7 +921,7 @@ return array( 'targets' => array( 'desktop', 'mobile' ), ), 'mediawiki.pager.tablePager' => array( - 'styles' => 'resources/src/mediawiki/mediawiki.pager.tablePager.css', + 'styles' => 'resources/src/mediawiki/mediawiki.pager.tablePager.less', 'position' => 'top', ), 'mediawiki.searchSuggest' => array( diff --git a/resources/src/mediawiki/images/arrow-sort-ascending.png b/resources/src/mediawiki/images/arrow-sort-ascending.png new file mode 100644 index 0000000000..f2d339de32 Binary files /dev/null and b/resources/src/mediawiki/images/arrow-sort-ascending.png differ diff --git a/resources/src/mediawiki/images/arrow-sort-ascending.svg b/resources/src/mediawiki/images/arrow-sort-ascending.svg new file mode 100644 index 0000000000..1e7a094356 --- /dev/null +++ b/resources/src/mediawiki/images/arrow-sort-ascending.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/src/mediawiki/images/arrow-sort-descending.png b/resources/src/mediawiki/images/arrow-sort-descending.png new file mode 100644 index 0000000000..8afbca962c Binary files /dev/null and b/resources/src/mediawiki/images/arrow-sort-descending.png differ diff --git a/resources/src/mediawiki/images/arrow-sort-descending.svg b/resources/src/mediawiki/images/arrow-sort-descending.svg new file mode 100644 index 0000000000..cf11adb4f3 --- /dev/null +++ b/resources/src/mediawiki/images/arrow-sort-descending.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/src/mediawiki/mediawiki.pager.tablePager.css b/resources/src/mediawiki/mediawiki.pager.tablePager.css deleted file mode 100644 index 4ae4792519..0000000000 --- a/resources/src/mediawiki/mediawiki.pager.tablePager.css +++ /dev/null @@ -1,70 +0,0 @@ -/*! - * Structures generated by the TablePager PHP class - * in MediaWiki (used e.g. on Special:ListFiles). - */ - -.TablePager { - min-width: 80%; -} - -.TablePager_nav { - margin: 0 auto; -} - -.TablePager_nav td { - padding: 3px; - text-align: center; - vertical-align: center; -} - -.TablePager_nav a { - text-decoration: none; -} - -.TablePager_nav td.TablePager_nav-first .TablePager_nav-disabled { - padding-top: 25px; - /* @embed */ - background: url(images/pager-arrow-disabled-fastforward-rtl.png) center top no-repeat; -} - -.TablePager_nav td.TablePager_nav-prev .TablePager_nav-disabled { - padding-top: 25px; - /* @embed */ - background: url(images/pager-arrow-disabled-forward-rtl.png) center top no-repeat; -} - -.TablePager_nav td.TablePager_nav-next .TablePager_nav-disabled { - padding-top: 25px; - /* @embed */ - background: url(images/pager-arrow-disabled-forward-ltr.png) center top no-repeat; -} - -.TablePager_nav td.TablePager_nav-last .TablePager_nav-disabled { - padding-top: 25px; - /* @embed */ - background: url(images/pager-arrow-disabled-fastforward-ltr.png) center top no-repeat; -} - -.TablePager_nav td.TablePager_nav-first .TablePager_nav-enabled { - padding-top: 25px; - /* @embed */ - background: url(images/pager-arrow-fastforward-rtl.png) center top no-repeat; -} - -.TablePager_nav td.TablePager_nav-prev .TablePager_nav-enabled { - padding-top: 25px; - /* @embed */ - background: url(images/pager-arrow-forward-rtl.png) center top no-repeat; -} - -.TablePager_nav td.TablePager_nav-next .TablePager_nav-enabled { - padding-top: 25px; - /* @embed */ - background: url(images/pager-arrow-forward-ltr.png) center top no-repeat; -} - -.TablePager_nav td.TablePager_nav-last .TablePager_nav-enabled { - padding-top: 25px; - /* @embed */ - background: url(images/pager-arrow-fastforward-ltr.png) center top no-repeat; -} diff --git a/resources/src/mediawiki/mediawiki.pager.tablePager.less b/resources/src/mediawiki/mediawiki.pager.tablePager.less new file mode 100644 index 0000000000..d37aec5b90 --- /dev/null +++ b/resources/src/mediawiki/mediawiki.pager.tablePager.less @@ -0,0 +1,84 @@ +/*! + * Structures generated by the TablePager PHP class + * in MediaWiki (used e.g. on Special:ListFiles). + */ + +@import "mediawiki.mixins"; + +.TablePager { + min-width: 80%; +} + +.TablePager .TablePager_sort-ascending a { + padding-left: 15px; + background: none left center no-repeat; + .background-image-svg('images/arrow-sort-ascending.svg', 'images/arrow-sort-ascending.png'); +} + +.TablePager .TablePager_sort-descending a { + padding-left: 15px; + background: none left center no-repeat; + .background-image-svg('images/arrow-sort-descending.svg', 'images/arrow-sort-descending.png'); +} + +.TablePager_nav { + margin: 0 auto; +} + +.TablePager_nav td { + padding: 3px; + text-align: center; + vertical-align: center; +} + +.TablePager_nav a { + text-decoration: none; +} + +.TablePager_nav td.TablePager_nav-first .TablePager_nav-disabled { + padding-top: 25px; + /* @embed */ + background: url(images/pager-arrow-disabled-fastforward-rtl.png) center top no-repeat; +} + +.TablePager_nav td.TablePager_nav-prev .TablePager_nav-disabled { + padding-top: 25px; + /* @embed */ + background: url(images/pager-arrow-disabled-forward-rtl.png) center top no-repeat; +} + +.TablePager_nav td.TablePager_nav-next .TablePager_nav-disabled { + padding-top: 25px; + /* @embed */ + background: url(images/pager-arrow-disabled-forward-ltr.png) center top no-repeat; +} + +.TablePager_nav td.TablePager_nav-last .TablePager_nav-disabled { + padding-top: 25px; + /* @embed */ + background: url(images/pager-arrow-disabled-fastforward-ltr.png) center top no-repeat; +} + +.TablePager_nav td.TablePager_nav-first .TablePager_nav-enabled { + padding-top: 25px; + /* @embed */ + background: url(images/pager-arrow-fastforward-rtl.png) center top no-repeat; +} + +.TablePager_nav td.TablePager_nav-prev .TablePager_nav-enabled { + padding-top: 25px; + /* @embed */ + background: url(images/pager-arrow-forward-rtl.png) center top no-repeat; +} + +.TablePager_nav td.TablePager_nav-next .TablePager_nav-enabled { + padding-top: 25px; + /* @embed */ + background: url(images/pager-arrow-forward-ltr.png) center top no-repeat; +} + +.TablePager_nav td.TablePager_nav-last .TablePager_nav-enabled { + padding-top: 25px; + /* @embed */ + background: url(images/pager-arrow-fastforward-ltr.png) center top no-repeat; +} diff --git a/skins/common/images/Arr_d.png b/skins/common/images/Arr_d.png deleted file mode 100644 index 58a9fc6673..0000000000 Binary files a/skins/common/images/Arr_d.png and /dev/null differ diff --git a/skins/common/images/Arr_u.png b/skins/common/images/Arr_u.png deleted file mode 100644 index 1aa543afaf..0000000000 Binary files a/skins/common/images/Arr_u.png and /dev/null differ