From: Trevor Parscal <tparscal@wikimedia.org>
Date: Thu, 10 May 2012 18:17:05 +0000 (-0700)
Subject: Added a class to body which enables/disables layout transitions
X-Git-Tag: 1.31.0-rc.0~23655^2
X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/password.php?a=commitdiff_plain;h=79dc96f355ac3b4c76bcca232fc5d5763c5b422e;p=lhc%2Fweb%2Fwiklou.git

Added a class to body which enables/disables layout transitions

This allows people to disable animation of CSS properties temporarily
if needed by removing the vector-animateLayout class from the body.

// Disabled CSS transitions on properties customized by the hd layout
$( 'body' ).removeClass( 'vector-animateLayout' );
// Change something that would normally be animated
$( '#content' ).css( 'margin-left', 0 );
// Re-enables transitions
$( 'body' ).addClass( 'vector-animateLayout' );

Change-Id: I6d164e45c1e31d4f83e0fa390011c5d182eb69c3
---

diff --git a/skins/Vector.php b/skins/Vector.php
index 404bbe7d4b..d2f0060748 100644
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -18,6 +18,8 @@ if( !defined( 'MEDIAWIKI' ) ) {
  */
 class SkinVector extends SkinTemplate {
 
+	protected static $bodyClasses = array( 'vector-animateLayout' );
+
 	var $skinname = 'vector', $stylename = 'vector',
 		$template = 'VectorTemplate', $useHeadElement = true;
 
@@ -52,6 +54,20 @@ class SkinVector extends SkinTemplate {
 		parent::setupSkinUserCss( $out );
 		$out->addModuleStyles( 'skins.vector' );
 	}
+
+	/**
+	 * Adds classes to the body element.
+	 * 
+	 * @param $out OutputPage object
+	 * @param &$bodyAttrs Array of attributes that will be set on the body element
+	 */
+	function addToBodyAttributes( OutputPage $out, &$bodyAttrs ) {
+		if ( isset( $bodyAttrs['class'] ) && strlen( $bodyAttrs['class'] ) > 0 ) {
+			$bodyAttrs['class'] .= ' ' . implode( ' ', static::$bodyClasses );
+		} else {
+			$bodyAttrs['class'] = implode( ' ', static::$bodyClasses );
+		}
+	}
 }
 
 /**
diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index cc4170c033..32a6489e2f 100644
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -847,39 +847,39 @@ div.vectorTabs ul {
 
 /* Animate between standard and high definition layouts */
 
-div#content,
-div#footer {
+body.vector-animateLayout div#content,
+body.vector-animateLayout div#footer {
 	transition: margin-left 250ms, padding 250ms;
 	-moz-transition: margin-left 250ms, padding 250ms;
 	-webkit-transition: margin-left 250ms, padding 250ms;
 	-o-transition: margin-left 250ms, padding 250ms;
 }
-#p-logo,
-#left-navigation {
+body.vector-animateLayout #p-logo,
+body.vector-animateLayout #left-navigation {
 	transition: left 250ms;
 	-moz-transition: left 250ms;
 	-webkit-transition: left 250ms;
 	-o-transition: left 250ms;
 }
-#mw-panel {
+body.vector-animateLayout #mw-panel {
 	transition: padding-left 250ms;
 	-moz-transition: padding-left 250ms;
 	-webkit-transition: padding-left 250ms;
 	-o-transition: padding-left 250ms;
 }
-#p-search {
+body.vector-animateLayout #p-search {
 	transition: margin-right 250ms;
 	-moz-transition: margin-right 250ms;
 	-webkit-transition: margin-right 250ms;
 	-o-transition: margin-right 250ms;
 }
-#p-personal {
+body.vector-animateLayout #p-personal {
 	transition: right 250ms;
 	-moz-transition: right 250ms;
 	-webkit-transition: right 250ms;
 	-o-transition: right 250ms;
 }
-#mw-head-base {
+body.vector-animateLayout #mw-head-base {
 	transition: margin-left 250ms;
 	-moz-transition: margin-left 250ms;
 	-webkit-transition: margin-left 250ms;