TablePager: Load images via CSS backgrounds rather than HTML <img>s

Moved files from directory: skins/common/images → resources/src/mediawiki/images
and renamed:

* arrow_disabled_last_25.png  → pager-arrow-disabled-fastforward-ltr.png
* arrow_disabled_first_25.png → pager-arrow-disabled-fastforward-rtl.png
* arrow_disabled_right_25.png → pager-arrow-disabled-forward-ltr.png
* arrow_disabled_left_25.png  → pager-arrow-disabled-forward-rtl.png
* arrow_last_25.png           → pager-arrow-fastforward-ltr.png
* arrow_first_25.png          → pager-arrow-fastforward-rtl.png
* arrow_right_25.png          → pager-arrow-forward-ltr.png
* arrow_left_25.png           → pager-arrow-forward-rtl.png

The new names are not very intuitive, but there's a mostly reasonable
system behind them and we need names like this to have them
automatically flipped for RTL styles.

Bug: 69277
Change-Id: Ica34cdd5fcc9340a94fb5e60bb34c30266953dcb

diff --git a/includes/pager/TablePager.php b/includes/pager/TablePager.php
index 518540d..3e061e9 100644 (file)
--- a/includes/pager/TablePager.php
+++ b/includes/pager/TablePager.php
@@ -290,45 +290,23 @@ abstract class TablePager extends IndexPager {
         * @return string HTML
         */
        public function getNavigationBar() {
-               global $wgStylePath;
-
                if ( !$this->isNavigationBarShown() ) {
                        return '';
                }
 
-               $path = "$wgStylePath/common/images";
                $labels = array(
                        'first' => 'table_pager_first',
                        'prev' => 'table_pager_prev',
                        'next' => 'table_pager_next',
                        'last' => 'table_pager_last',
                );
-               $images = array(
-                       'first' => 'arrow_first_25.png',
-                       'prev' => 'arrow_left_25.png',
-                       'next' => 'arrow_right_25.png',
-                       'last' => 'arrow_last_25.png',
-               );
-               $disabledImages = array(
-                       'first' => 'arrow_disabled_first_25.png',
-                       'prev' => 'arrow_disabled_left_25.png',
-                       'next' => 'arrow_disabled_right_25.png',
-                       'last' => 'arrow_disabled_last_25.png',
-               );
-               if ( $this->getLanguage()->isRTL() ) {
-                       $keys = array_keys( $labels );
-                       $images = array_combine( $keys, array_reverse( $images ) );
-                       $disabledImages = array_combine( $keys, array_reverse( $disabledImages ) );
-               }
 
                $linkTexts = array();
                $disabledTexts = array();
                foreach ( $labels as $type => $label ) {
                        $msgLabel = $this->msg( $label )->escaped();
-                       $linkTexts[$type] = Html::element( 'img', array( 'src' => "$path/{$images[$type]}",
-                               'alt' => $msgLabel ) ) . "<br />$msgLabel";
-                       $disabledTexts[$type] = Html::element( 'img', array( 'src' => "$path/{$disabledImages[$type]}",
-                               'alt' => $msgLabel ) ) . "<br />$msgLabel";
+                       $linkTexts[$type] = "<div class='TablePager_nav-enabled'>$msgLabel</div>";
+                       $disabledTexts[$type] = "<div class='TablePager_nav-disabled'>$msgLabel</div>";
                }
                $links = $this->getPagingLinks( $linkTexts, $disabledTexts );
 
@@ -339,7 +317,9 @@ abstract class TablePager extends IndexPager {
                        // 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. <http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout>
-                       $s .= Html::rawElement( 'td', array( 'style' => "width: $width;" ), $links[$type] ) . "\n";
+                       $s .= Html::rawElement( 'td',
+                               array( 'style' => "width: $width;", 'class' => "TablePager_nav-$type" ),
+                               $links[$type] ) . "\n";
                }
                $s .= Html::closeElement( 'tr' ) . Html::closeElement( 'table' ) . "\n";
                return $s;

diff --git a/resources/src/mediawiki/images/pager-arrow-disabled-fastforward-ltr.png b/resources/src/mediawiki/images/pager-arrow-disabled-fastforward-ltr.png
new file mode 100644 (file)
index 0000000..2a64fd0
Binary files /dev/null and b/resources/src/mediawiki/images/pager-arrow-disabled-fastforward-ltr.png differ

diff --git a/resources/src/mediawiki/images/pager-arrow-disabled-fastforward-rtl.png b/resources/src/mediawiki/images/pager-arrow-disabled-fastforward-rtl.png
new file mode 100644 (file)
index 0000000..78a493e
Binary files /dev/null and b/resources/src/mediawiki/images/pager-arrow-disabled-fastforward-rtl.png differ

diff --git a/resources/src/mediawiki/images/pager-arrow-disabled-forward-ltr.png b/resources/src/mediawiki/images/pager-arrow-disabled-forward-ltr.png
new file mode 100644 (file)
index 0000000..aa4fbf8
Binary files /dev/null and b/resources/src/mediawiki/images/pager-arrow-disabled-forward-ltr.png differ

diff --git a/resources/src/mediawiki/images/pager-arrow-disabled-forward-rtl.png b/resources/src/mediawiki/images/pager-arrow-disabled-forward-rtl.png
new file mode 100644 (file)
index 0000000..83df068
Binary files /dev/null and b/resources/src/mediawiki/images/pager-arrow-disabled-forward-rtl.png differ

diff --git a/resources/src/mediawiki/images/pager-arrow-fastforward-ltr.png b/resources/src/mediawiki/images/pager-arrow-fastforward-ltr.png
new file mode 100644 (file)
index 0000000..caf5033
Binary files /dev/null and b/resources/src/mediawiki/images/pager-arrow-fastforward-ltr.png differ

diff --git a/resources/src/mediawiki/images/pager-arrow-fastforward-rtl.png b/resources/src/mediawiki/images/pager-arrow-fastforward-rtl.png
new file mode 100644 (file)
index 0000000..52b32a5
Binary files /dev/null and b/resources/src/mediawiki/images/pager-arrow-fastforward-rtl.png differ

diff --git a/resources/src/mediawiki/images/pager-arrow-forward-ltr.png b/resources/src/mediawiki/images/pager-arrow-forward-ltr.png
new file mode 100644 (file)
index 0000000..3f8fee3
Binary files /dev/null and b/resources/src/mediawiki/images/pager-arrow-forward-ltr.png differ

diff --git a/resources/src/mediawiki/images/pager-arrow-forward-rtl.png b/resources/src/mediawiki/images/pager-arrow-forward-rtl.png
new file mode 100644 (file)
index 0000000..f363bf6
Binary files /dev/null and b/resources/src/mediawiki/images/pager-arrow-forward-rtl.png differ

diff --git a/resources/src/mediawiki/mediawiki.pager.tablePager.css b/resources/src/mediawiki/mediawiki.pager.tablePager.css
index fc73a96..4ae4792 100644 (file)
--- a/resources/src/mediawiki/mediawiki.pager.tablePager.css
+++ b/resources/src/mediawiki/mediawiki.pager.tablePager.css
@@ -14,8 +14,57 @@
 .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/arrow_disabled_first_25.png b/skins/common/images/arrow_disabled_first_25.png
deleted file mode 100644 (file)
index 78a493e..0000000
Binary files a/skins/common/images/arrow_disabled_first_25.png and /dev/null differ

diff --git a/skins/common/images/arrow_disabled_last_25.png b/skins/common/images/arrow_disabled_last_25.png
deleted file mode 100644 (file)
index 2a64fd0..0000000
Binary files a/skins/common/images/arrow_disabled_last_25.png and /dev/null differ

diff --git a/skins/common/images/arrow_disabled_left_25.png b/skins/common/images/arrow_disabled_left_25.png
deleted file mode 100644 (file)
index 83df068..0000000
Binary files a/skins/common/images/arrow_disabled_left_25.png and /dev/null differ

diff --git a/skins/common/images/arrow_disabled_right_25.png b/skins/common/images/arrow_disabled_right_25.png
deleted file mode 100644 (file)
index aa4fbf8..0000000
Binary files a/skins/common/images/arrow_disabled_right_25.png and /dev/null differ

diff --git a/skins/common/images/arrow_first_25.png b/skins/common/images/arrow_first_25.png
deleted file mode 100644 (file)
index 52b32a5..0000000
Binary files a/skins/common/images/arrow_first_25.png and /dev/null differ

diff --git a/skins/common/images/arrow_last_25.png b/skins/common/images/arrow_last_25.png
deleted file mode 100644 (file)
index caf5033..0000000
Binary files a/skins/common/images/arrow_last_25.png and /dev/null differ

diff --git a/skins/common/images/arrow_left_25.png b/skins/common/images/arrow_left_25.png
deleted file mode 100644 (file)
index f363bf6..0000000
Binary files a/skins/common/images/arrow_left_25.png and /dev/null differ

diff --git a/skins/common/images/arrow_right_25.png b/skins/common/images/arrow_right_25.png
deleted file mode 100644 (file)
index 3f8fee3..0000000
Binary files a/skins/common/images/arrow_right_25.png and /dev/null differ