From d05173bdd2f1f0991b7b15ab330d42d50096f2da Mon Sep 17 00:00:00 2001
From: Derk-Jan Hartman <hartman.wiki@gmail.com>
Date: Sun, 18 May 2014 11:51:07 +0200
Subject: [PATCH] InputBox: Cleanup usage of inline styles

Change-Id: I2e1384e1f46e8592ecba7bbfea81884804f0128a
---
 InputBox.classes.php              | 30 ++++++++++++++++++++----------
 InputBox.php                      |  6 ++++++
 resources/ext.inputBox.styles.css | 14 ++++++++++++++
 3 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 resources/ext.inputBox.styles.css

diff --git a/InputBox.classes.php b/InputBox.classes.php
index ef2d0c62..f42ddcda 100644
--- a/InputBox.classes.php
+++ b/InputBox.classes.php
@@ -44,6 +44,7 @@ class InputBox {
 		// Split caches by language, to make sure visitors do not see a cached
 		// version in a random language (since labels are in the user language)
 		$this->mParser->getOptions()->getUserLangObj();
+		$this->mParser->getOutput()->addModuleStyles( 'ext.inputBox.styles' );
 	}
 
 	public function render() {
@@ -95,7 +96,8 @@ class InputBox {
 		// Build HTML
 		$htmlOut = Xml::openElement( 'div',
 			array(
-				'style' => 'margin-left: auto; margin-right: auto; text-align: center; background-color:' . $this->mBGColor
+				'class' => 'mw-inputbox-centered',
+				'style' => $this->bgColorStyle(),
 			)
 		);
 		$htmlOut .= Xml::openElement( 'form',
@@ -183,7 +185,7 @@ class InputBox {
 					);
 				} else {
 					// Checkbox
-					$htmlOut .= ' <div class="inputbox-element" style="display: inline; white-space: nowrap;">';
+					$htmlOut .= ' <div class="inputbox-element">';
 					$htmlOut .= Xml::element( 'input',
 						array(
 							'type' => 'checkbox',
@@ -256,16 +258,14 @@ class InputBox {
 			array(
 				'name' => 'bodySearch' . $id,
 				'id' => 'bodySearch' . $id,
-				'class' => 'bodySearch',
+				'class' => 'bodySearch' . ( $this->mInline ? ' mw-inputbox-inline' : '' ),
 				'action' => SpecialPage::getTitleFor( 'Search' )->getLocalUrl(),
-				'style' => $this->mInline ? 'display: inline;' : ''
 			)
 		);
 		$htmlOut .= Xml::openElement( 'div',
 			array(
-				'class' => 'bodySearchWrap',
-				'style' => 'background-color:' . $this->mBGColor . ';' .
-					$this->mInline ? 'display: inline;' : ''
+				'class' => 'bodySearchWrap' . ( $this->mInline ? ' mw-inputbox-inline' : '' ),
+				'style' => $this->bgColorStyle(),
 			)
 		);
 		$htmlOut .= $htmlLabel;
@@ -324,7 +324,8 @@ class InputBox {
 
 		$htmlOut = Xml::openElement( 'div',
 			array(
-				'style' => 'margin-left: auto; margin-right: auto; text-align: center; background-color:' . $this->mBGColor
+				'class' => 'mw-inputbox-centered',
+				'style' => $this->bgColorStyle(),
 			)
 		);
 		$createBoxParams = array(
@@ -434,7 +435,8 @@ class InputBox {
 
 		$htmlOut = Xml::openElement( 'div',
 			array(
-				'style' => 'margin-left: auto; margin-right: auto; text-align: center; background-color:' . $this->mBGColor
+				'class' => 'mw-inputbox-centered',
+				'style' => $this->bgColorStyle(),
 			)
 		);
 		$moveBoxParams = array(
@@ -506,7 +508,8 @@ class InputBox {
 
 		$htmlOut = Xml::openElement( 'div',
 			array(
-				'style' => 'margin-left: auto; margin-right: auto; text-align: center; background-color:' . $this->mBGColor
+				'class' => 'mw-inputbox-centered',
+				'style' => $this->bgColorStyle(),
 			)
 		);
 		$commentFormParams = array(
@@ -664,4 +667,11 @@ class InputBox {
 REGEX;
 		return (bool) preg_match( $regex, $color );
 	}
+
+	private function bgColorStyle() {
+		if ( $this->mBGColor != 'transparent' ) {
+			return 'background-color: ' . $this->mBGColor . ';';
+		}
+		return '';
+	}
 }
diff --git a/InputBox.php b/InputBox.php
index 6473bd7b..df104841 100644
--- a/InputBox.php
+++ b/InputBox.php
@@ -54,3 +54,9 @@ $wgAutoloadClasses['InputBox'] = $dir . 'InputBox.classes.php';
 $wgHooks['ParserFirstCallInit'][] = 'InputBoxHooks::register';
 $wgHooks['MediaWikiPerformAction'][] = 'InputBoxHooks::onMediaWikiPerformAction';
 $wgHooks['SpecialPageBeforeExecute'][] = 'InputBoxHooks::onSpecialPageBeforeExecute';
+
+$wgResourceModules['ext.inputBox.styles'] = array(
+	'localBasePath' => dirname( __FILE__ ) . '/resources',
+	'remoteExtPath' => 'InputBox/resources',
+	'styles' => 'ext.inputBox.styles.css',
+);
diff --git a/resources/ext.inputBox.styles.css b/resources/ext.inputBox.styles.css
new file mode 100644
index 00000000..30916f57
--- /dev/null
+++ b/resources/ext.inputBox.styles.css
@@ -0,0 +1,14 @@
+.mw-inputbox-centered {
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+}
+
+.mw-inputbox-inline {
+	display: inline;
+}
+
+.inputbox-element {
+	display: inline;
+	white-space: nowrap;
+}
\ No newline at end of file