TablePager: Redo arrow icons from scratch as CSS backgrounds
authorBartosz Dziewoński <matma.rex@gmail.com>
Mon, 25 Aug 2014 14:52:11 +0000 (16:52 +0200)
committerBartosz Dziewoński <matma.rex@gmail.com>
Sat, 30 Aug 2014 22:48:45 +0000 (00:48 +0200)
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
includes/pager/TablePager.php
resources/Resources.php
resources/src/mediawiki/images/arrow-sort-ascending.png [new file with mode: 0644]
resources/src/mediawiki/images/arrow-sort-ascending.svg [new file with mode: 0644]
resources/src/mediawiki/images/arrow-sort-descending.png [new file with mode: 0644]
resources/src/mediawiki/images/arrow-sort-descending.svg [new file with mode: 0644]
resources/src/mediawiki/mediawiki.pager.tablePager.css [deleted file]
resources/src/mediawiki/mediawiki.pager.tablePager.less [new file with mode: 0644]
skins/common/images/Arr_d.png [deleted file]
skins/common/images/Arr_u.png [deleted file]

index 2142227..5972296 100644 (file)
@@ -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,
index 3e061e9..2218787 100644 (file)
@@ -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(), '&#160;' ) . "\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";
                        }
index d970572..3073152 100644 (file)
@@ -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 (file)
index 0000000..f2d339d
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 (file)
index 0000000..1e7a094
--- /dev/null
@@ -0,0 +1 @@
+<?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
diff --git a/resources/src/mediawiki/images/arrow-sort-descending.png b/resources/src/mediawiki/images/arrow-sort-descending.png
new file mode 100644 (file)
index 0000000..8afbca9
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 (file)
index 0000000..cf11adb
--- /dev/null
@@ -0,0 +1 @@
+<?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
diff --git a/resources/src/mediawiki/mediawiki.pager.tablePager.css b/resources/src/mediawiki/mediawiki.pager.tablePager.css
deleted file mode 100644 (file)
index 4ae4792..0000000
+++ /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 (file)
index 0000000..d37aec5
--- /dev/null
@@ -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 (file)
index 58a9fc6..0000000
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 (file)
index 1aa543a..0000000
Binary files a/skins/common/images/Arr_u.png and /dev/null differ