From 1ec99b75a38c96c21617378d008c4aeb9150b019 Mon Sep 17 00:00:00 2001 From: Trevor Parscal Date: Tue, 14 Jul 2009 04:55:19 +0000 Subject: [PATCH] Refactor of Vector skin output and RTL strategy. Needs more testing, but it seems to be working very well so far. --- skins/Vector.php | 435 ++++++++++++++++++++------------------ skins/vector/main-ltr.css | 20 +- skins/vector/main-rtl.css | 30 ++- 3 files changed, 275 insertions(+), 210 deletions(-) diff --git a/skins/Vector.php b/skins/Vector.php index 9ac919e7e0..c82da20099 100644 --- a/skins/Vector.php +++ b/skins/Vector.php @@ -341,29 +341,29 @@ class SkinVector extends SkinTemplate { * @ingroup Skins */ class VectorTemplate extends QuickTemplate { - + /* Members */ - + /** * @var Cached skin object */ var $skin; - + /* Functions */ - + /** * Outputs the entire contents of the XHTML page */ public function execute() { - global $wgRequest, $wgUseTwoButtonsSearchForm, $wgOut; - + global $wgRequest, $wgOut, $wgContLang; + $this->skin = $this->data['skin']; $action = $wgRequest->getText( 'action' ); - + // Suppress warnings to prevent notices about missing indexes in // $this->data (is this really the best way to handle this?) wfSuppressWarnings(); - + // Build additional attributes for navigation urls $nav = $this->skin->buildNavigationUrls(); foreach ( $nav as $section => $links ) { @@ -383,12 +383,11 @@ class VectorTemplate extends QuickTemplate { ' class="' . htmlspecialchars( $link['class'] ) . '"'; unset( $nav[$section][$key]['class'] ); } - - // We don't want to give the watch tab an accesskey if the page is - // being edited, because that conflicts with the accesskey on the - // watch checkbox. We also don't want to give the edit tab an - // accesskey, because that's fairly superfluous and conflicts with - // an accesskey (Ctrl-E) often used for editing in Safari. + // We don't want to give the watch tab an accesskey if the page + // is being edited, because that conflicts with the accesskey on + // the watch checkbox. We also don't want to give the edit tab + // an accesskey, because that's fairly superfluous and conflicts + // with an accesskey (Ctrl-E) often used for editing in Safari. if ( in_array( $action, array( 'edit', 'submit' ) ) && in_array( $key, array( 'edit', 'watch', 'unwatch' ) ) @@ -405,7 +404,6 @@ class VectorTemplate extends QuickTemplate { $this->data['view_urls'] = $nav['views']; $this->data['action_urls'] = $nav['actions']; $this->data['variant_urls'] = $nav['variants']; - // Build additional attributes for personal_urls foreach ( $this->data['personal_urls'] as $key => $item) { $this->data['personal_urls'][$key]['attributes'] = @@ -417,7 +415,7 @@ class VectorTemplate extends QuickTemplate { $this->data['personal_urls'][$key]['key'] = $this->skin->tooltipAndAccesskey('pt-'.$key); } - + // Generate additional footer links $footerlinks = array( 'info' => array( @@ -434,8 +432,7 @@ class VectorTemplate extends QuickTemplate { 'disclaimer', ), ); - - // Build list of valid footer links + // Reduce footer links down to only those which are being used $validFooterLinks = array(); foreach( $footerlinks as $category => $links ) { $validFooterLinks[$category] = array(); @@ -445,58 +442,72 @@ class VectorTemplate extends QuickTemplate { } } } - - // Begin content output - + // Reverse horizontally rendered navigation elements + if ( $wgContLang->isRTL() ) { + $this->data['view_urls'] = + array_reverse( $this->data['view_urls'] ); + $this->data['namespace_urls'] = + array_reverse( $this->data['namespace_urls'] ); + $this->data['personal_urls'] = + array_reverse( $this->data['personal_urls'] ); + } + // Output HTML Page echo $wgOut->headElement( $this->skin ); -?> data['body_ondblclick']): ?> ondblclick="text('body_ondblclick') ?>" data['body_onload']): ?> onload="text('body_onload') ?>" class="mediawiki text('dir') ?> text('pageclass') ?> text('skinnameclass') ?>"> +?> + data['body_ondblclick'] ): ?> ondblclick="text( 'body_ondblclick' ) ?>" data['body_onload'] ): ?> onload="text( 'body_onload' ) ?>" class="mediawiki text( 'dir' ) ?> text( 'pageclass' ) ?> text( 'skinnameclass' ) ?>" dir="text( 'dir' ) ?>">
+ data['sitenotice'] ): ?> - data['sitenotice']) { ?>
html('sitenotice') ?>
+
html( 'sitenotice' ) ?>
+ -

html('title') ?>

+

html( 'title' ) ?>

-

msg('tagline') ?>

+

msg( 'tagline' ) ?>

-
html('subtitle') ?>
+
html( 'subtitle' ) ?>
- data['undelete']): ?> + data['undelete'] ): ?> -
html('undelete') ?>
+
html( 'undelete' ) ?>
data['newtalk'] ): ?> -
html('newtalk') ?>
+
html( 'newtalk' ) ?>
- data['showjumplinks']): ?> + data['showjumplinks'] ): ?> - html('bodytext') ?> + html( 'bodytext' ) ?> + data['catlinks'] ): ?> - data['catlinks']) { $this->html('catlinks'); } ?> + html( 'catlinks' ); ?> + + data['dataAfterContent'] ): ?> - data['dataAfterContent']) { $this->html('dataAfterContent'); } ?> + html( 'dataAfterContent' ); ?> +
@@ -504,118 +515,20 @@ class VectorTemplate extends QuickTemplate { -
- - data['sidebar']; - $sidebar['TOOLBOX'] = ( !isset( $sidebar['TOOLBOX'] ) ); - $sidebar['LANGUAGES'] = ( !isset( $sidebar['LANGUAGES'] ) ); - foreach ( $sidebar as $name => $content ) { - switch( $name ) { - case 'SEARCH': - break; - case 'TOOLBOX': - $this->toolBox(); - break; - case 'LANGUAGES': - $this->languageBox(); - break; - default: - $this->customBox( $name, $content ); - break; - } - } - ?> - -
+
+ renderPortals( $this->data['sidebar'] ); ?> +
-
- + - + html( 'bottomscripts' ); /* JS call to runBodyOnloadHook */ ?> html( 'reporttime' ) ?> data['debug'] ): ?> - + @@ -661,58 +570,65 @@ class VectorTemplate extends QuickTemplate { // We're done with abusing arrays now... wfRestoreWarnings(); } - + /** - * Outputs a box with a list of tools + * Render a series of portals */ - private function toolBox() { + private function renderPortals( $portals ) { + // Force the rendering of the following portals + if ( !isset( $portals['SEARCH'] ) ) $portals['SEARCH'] = true; + if ( !isset( $portals['TOOLBOX'] ) ) $portals['TOOLBOX'] = true; + if ( !isset( $portals['LANGUAGES'] ) ) $portals['LANGUAGES'] = true; + // Render portals + foreach ( $portals as $name => $content ) { + echo "\n\n"; + switch( $name ) { + case 'SEARCH': + break; + case 'TOOLBOX': ?> -
-
html('userlangattributes') ?>>msg( 'toolbox' ) ?>
-
-
+
data['language_urls'] ) { + break; + case 'LANGUAGES': + if ( $this->data['language_urls'] ) { ?>
html('userlangattributes') ?>>msg( 'otherlanguages' ) ?>
@@ -725,18 +641,12 @@ class VectorTemplate extends QuickTemplate {
-
skin->tooltip( 'p-' . $bar ) ?>> -
html('userlangattributes') ?>>
+
skin->tooltip( 'p-' . $name ) ?>> +
html('userlangattributes') ?>>
    @@ -750,5 +660,124 @@ class VectorTemplate extends QuickTemplate {
\n"; + } + } + + /** + * Render one or more navigations elements by name, automatically reveresed + * when UI is in RTL mode + */ + private function renderNavigation( $elements ) { + global $wgContLang, $wgUseTwoButtonsSearchForm; + + // If only one element was given, wrap it in an array, allowing more + // flexible arguments + if ( !is_array( $elements ) ) { + $elements = array( $elements ); + // If there's a series of elements, reverse them when in RTL mode + } else if ( $wgContLang->isRTL() ) { + $elements = array_reverse( $elements ); + } + // Render elements + foreach ( $elements as $name => $element ) { + echo "\n\n"; + switch ( $element ) { + case 'NAMESPACES': + if ( count( $this->data[ 'namespace_urls' ] ) > 0 ) { +?> +
+
msg('namespaces') ?>
+
    html('userlangattributes') ?>> + data['namespace_urls'] as $key => $link ): ?> +
  • >>
    • + +
+
+data[ 'variant_urls' ] ) > 0 ) { +?> +
+
msg('variants') ?> 
+
+
    html('userlangattributes') ?>> + data['variant_urls'] as $key => $link ): ?> + >> + +
+
+
+data[ 'view_urls' ] ) > 0 ) { +?> +
+
msg('views') ?>
+
    html('userlangattributes') ?>> + data['view_urls'] as $key => $link ): ?> + >> + +
+
+data[ 'action_urls' ] ) > 0 ) { +?> +
+
msg('actions') ?> 
+
+
    html('userlangattributes') ?>> + data['action_urls'] as $key => $link ): ?> + >> + +
+
+
+data['personal_urls'] ) > 0 ) { +?> +
+
msg('personaltools') ?>
+
    html('userlangattributes') ?>> + data['personal_urls'] as $key => $item): ?> +
  • > class="">
    • + +
+
+ + +\n"; + } } } diff --git a/skins/vector/main-ltr.css b/skins/vector/main-ltr.css index c18286cbbb..ddd4427bf5 100644 --- a/skins/vector/main-ltr.css +++ b/skins/vector/main-ltr.css @@ -76,8 +76,11 @@ div#head h5 { margin: 0; padding: 0; } + /* @noflip */ div#p-personal li { float: left; + } + div#p-personal li { margin-left: 0.75em; margin-top: 0.5em; font-size: 0.9em; @@ -98,24 +101,33 @@ div#head h5 { display: none; } /* Namespaces and Views */ + /* @noflip */ div.vectorTabs { float: left; + } + div.vectorTabs { background-image: url(images/tab-break.png); background-position: bottom left; background-repeat: no-repeat; padding-left: 1px; } + /* @noflip */ div.vectorTabs ul { float: left; + } + div.vectorTabs ul { height: 100%; list-style: none; margin: 0; padding: 0; } + /* @noflip */ + div.vectorTabs ul li { + float: left; + } /* OVERRIDDEN BY COMPLIANT BROWSERS */ div.vectorTabs ul li { display: inline-block; - float: left; height: 100%; margin: 0; padding: 0; @@ -175,8 +187,11 @@ div#head h5 { color: #a55858; } /* Variants and Actions */ + /* @noflip */ div.vectorMenu { float: left; + } + div.vectorMenu { background-image: url(images/arrow-down-icon.png); background-position: center center; background-repeat: no-repeat; @@ -232,8 +247,11 @@ div#head h5 { div#p-search h5 { display: none; } + /* @noflip */ div#p-search { float: left; + } + div#p-search { margin-right: 0.75em; } div#p-search form, diff --git a/skins/vector/main-rtl.css b/skins/vector/main-rtl.css index 3d1ce11ead..77f41e43c4 100644 --- a/skins/vector/main-rtl.css +++ b/skins/vector/main-rtl.css @@ -76,8 +76,11 @@ div#head h5 { margin: 0; padding: 0; } + /* @noflip */ + div#p-personal li { + float: left; + } div#p-personal li { - float: right; margin-right: 0.75em; margin-top: 0.5em; font-size: 0.9em; @@ -98,24 +101,33 @@ div#head h5 { display: none; } /* Namespaces and Views */ + /* @noflip */ + div.vectorTabs { + float: left; + } div.vectorTabs { - float: right; background-image: url(images/tab-break.png); background-position: bottom right; background-repeat: no-repeat; padding-right: 1px; } + /* @noflip */ + div.vectorTabs ul { + float: left; + } div.vectorTabs ul { - float: right; height: 100%; list-style: none; margin: 0; padding: 0; } + /* @noflip */ + div.vectorTabs ul li { + float: left; + } /* OVERRIDDEN BY COMPLIANT BROWSERS */ div.vectorTabs ul li { display: inline-block; - float: right; height: 100%; margin: 0; padding: 0; @@ -175,8 +187,11 @@ div#head h5 { color: #a55858; } /* Variants and Actions */ + /* @noflip */ + div.vectorMenu { + float: left; + } div.vectorMenu { - float: right; background-image: url(images/arrow-down-icon.png); background-position: center center; background-repeat: no-repeat; @@ -232,8 +247,11 @@ div#head h5 { div#p-search h5 { display: none; } + /* @noflip */ + div#p-search { + float: left; + } div#p-search { - float: right; margin-left: 0.75em; } div#p-search form, -- 2.20.1