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
*
* @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 ) {
$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,
* @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";
}
'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(
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M1 10h10l-5-8.658z" fill="#00a"/></svg>
\ No newline at end of file
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M1 2h10l-5 8.658z" fill="#00a"/></svg>
\ No newline at end of file
+++ /dev/null
-/*!
- * 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;
-}
--- /dev/null
+/*!
+ * 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;
+}