From 987a860df428e3c70fd81c404f1f7a300345dc48 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Mon, 25 Aug 2014 16:52:11 +0200 Subject: [PATCH] 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 --- includes/pager/IndexPager.php | 10 ++++-- includes/pager/TablePager.php | 33 ++++++++---------- resources/Resources.php | 2 +- .../mediawiki/images/arrow-sort-ascending.png | Bin 0 -> 244 bytes .../mediawiki/images/arrow-sort-ascending.svg | 1 + .../images/arrow-sort-descending.png | Bin 0 -> 245 bytes .../images/arrow-sort-descending.svg | 1 + ...er.css => mediawiki.pager.tablePager.less} | 14 ++++++++ skins/common/images/Arr_d.png | Bin 205 -> 0 bytes skins/common/images/Arr_u.png | Bin 207 -> 0 bytes 10 files changed, 38 insertions(+), 23 deletions(-) create mode 100644 resources/src/mediawiki/images/arrow-sort-ascending.png create mode 100644 resources/src/mediawiki/images/arrow-sort-ascending.svg create mode 100644 resources/src/mediawiki/images/arrow-sort-descending.png create mode 100644 resources/src/mediawiki/images/arrow-sort-descending.svg rename resources/src/mediawiki/{mediawiki.pager.tablePager.css => mediawiki.pager.tablePager.less} (80%) delete mode 100644 skins/common/images/Arr_d.png delete mode 100644 skins/common/images/Arr_u.png 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 0000000000000000000000000000000000000000..f2d339de32b6074715fe13ec42973c2fdd822427 GIT binary patch literal 244 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&kmSQK*5Dp-y;YjHK@;M7UB8!3Q zuY)k7lg8`{prB-lYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt+X~E{-7@ z=aYZ@|8LK%DY0AOa8#v$n&aVBp$a}z*cLcdEBxa>`mMs$z`(?SQFN~Rr2;vXHuuA; zOjM2<%xMc{4rr3^h)=x8AoTe7qQp{pv7-TdcJaG12L#A=)IYq&FfG{q+6LbKB#C=% f#&RBgnKcp&A6AC5{r=Sp@&<#atDnm{r-UW|UZ+p0 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..8afbca962c5c6d65b41abf7167db9ec968e181d6 GIT binary patch literal 245 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$1|-8uW1a&kmSQK*5Dp-y;YjHK@;M7UB8!3Q zuY)k7lg8`{prB-lYeY$Kep*R+Vo@qXd3m{BW?pu2a$-TMUVc&f>~}U&Kt)BKE{-7@ z=aYZ@|8LK%IipdBmxpKdHpY+jOcm0b*h&@twYnR6_{kpi1PcEy$d0(%{*ZkEi@m`9 zLyH(yj`d%??9geVBXy~uO^DfFVdQ&MBb@0Lnd2MgRZ+ literal 0 HcmV?d00001 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.less similarity index 80% rename from resources/src/mediawiki/mediawiki.pager.tablePager.css rename to resources/src/mediawiki/mediawiki.pager.tablePager.less index 4ae4792519..d37aec5b90 100644 --- a/resources/src/mediawiki/mediawiki.pager.tablePager.css +++ b/resources/src/mediawiki/mediawiki.pager.tablePager.less @@ -3,10 +3,24 @@ * 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; } diff --git a/skins/common/images/Arr_d.png b/skins/common/images/Arr_d.png deleted file mode 100644 index 58a9fc6673baf053c5321bdee60cacc5956bde36..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 205 zcmeAS@N?(olHy`uVBq!ia0vp^JRr=$3?vg*uel1OYyx~jT!D1w%ExL^yB6+xxqtuu z!s+)e-2I{+vrjo_6}ynCM(jbLf*q&d85$aTdwWYev^e`Ed6gVd3ELEzT6t~W0t=ut zV@Z%-FoVOh8)-m}y{C&~NJU)eNq4>m2Z198IA@=D`M=&(>=kqA=A8O>+F7bbNyl~u y*FK2gddPe^En{J$H*;n70^=i+m*m=}Vb}o@_>T;am6x6&RZ(GIl$NF>k8a}zt-OkVWz3l|UWT0UTp00i_>zopr0Qpo* A(f|Me -- 2.20.1