From: jdlrobson <jdlrobson@gmail.com>
Date: Thu, 14 Aug 2014 18:51:21 +0000 (-0700)
Subject: Fix styling of deletion page when $wgUseMediaWikiUIEverywhere enabled
X-Git-Tag: 1.31.0-rc.0~13723^2
X-Git-Url: http://git.cyclocoop.org//%27%40script%40/%27?a=commitdiff_plain;h=387274466e437eaf4633b7bf7ba45417b46c4e97;p=lhc%2Fweb%2Fwiklou.git

Fix styling of deletion page when $wgUseMediaWikiUIEverywhere enabled

* Stop using tables use divs instead. It's the future!
* Update MediaWiki UI so that inline inputs have a minimum width (as pointed
  out by Bartosz, the summary field would've gotten smaller than it was
  before to the point of being near unusable).
* Change submit button to be mw-ui-destructive (it deletes a page after all).
* Switch to using Html rather than Xml where possible.

Bug: 70134
Change-Id: Ic308a43cb0ec26ea9fdb8c9c8aa0de481a922435
---

diff --git a/includes/page/Article.php b/includes/page/Article.php
index e562d43f1c..96e315fab2 100644
--- a/includes/page/Article.php
+++ b/includes/page/Article.php
@@ -1676,7 +1676,9 @@ class Article implements Page {
 		wfDebug( "Article::confirmDelete\n" );
 
 		$title = $this->getTitle();
-		$outputPage = $this->getContext()->getOutput();
+		$ctx = $this->getContext();
+		$outputPage = $ctx->getOutput();
+		$useMediaWikiUIEverywhere = $ctx->getConfig()->get( 'UseMediaWikiUIEverywhere' );
 		$outputPage->setPageTitle( wfMessage( 'delete-confirm', $title->getPrefixedText() ) );
 		$outputPage->addBacklinkSubtitle( $title );
 		$outputPage->setRobotPolicy( 'noindex,nofollow' );
@@ -1692,75 +1694,67 @@ class Article implements Page {
 		$user = $this->getContext()->getUser();
 
 		if ( $user->isAllowed( 'suppressrevision' ) ) {
-			$suppress = "<tr id=\"wpDeleteSuppressRow\">
-					<td></td>
-					<td class='mw-input'><strong>" .
+			$suppress = Html::openElement( 'div', array( 'id' => 'wpDeleteSuppressRow' ) ) .
+				"<strong>" .
 						Xml::checkLabel( wfMessage( 'revdelete-suppress' )->text(),
 							'wpSuppress', 'wpSuppress', false, array( 'tabindex' => '4' ) ) .
-					"</strong></td>
-				</tr>";
+					"</strong>" .
+				Html::closeElement( 'div' );
 		} else {
 			$suppress = '';
 		}
 		$checkWatch = $user->getBoolOption( 'watchdeletion' ) || $user->isWatched( $title );
 
-		$form = Xml::openElement( 'form', array( 'method' => 'post',
+		$form = Html::openElement( 'form', array( 'method' => 'post',
 			'action' => $title->getLocalURL( 'action=delete' ), 'id' => 'deleteconfirm' ) ) .
-			Xml::openElement( 'fieldset', array( 'id' => 'mw-delete-table' ) ) .
-			Xml::tags( 'legend', null, wfMessage( 'delete-legend' )->escaped() ) .
-			Xml::openElement( 'table', array( 'id' => 'mw-deleteconfirm-table' ) ) .
-			"<tr id=\"wpDeleteReasonListRow\">
-				<td class='mw-label'>" .
-					Xml::label( wfMessage( 'deletecomment' )->text(), 'wpDeleteReasonList' ) .
-				"</td>
-				<td class='mw-input'>" .
-					Xml::listDropDown(
-						'wpDeleteReasonList',
-						wfMessage( 'deletereason-dropdown' )->inContentLanguage()->text(),
-						wfMessage( 'deletereasonotherlist' )->inContentLanguage()->text(),
-						'',
-						'wpReasonDropDown',
-						1
-					) .
-				"</td>
-			</tr>
-			<tr id=\"wpDeleteReasonRow\">
-				<td class='mw-label'>" .
-					Xml::label( wfMessage( 'deleteotherreason' )->text(), 'wpReason' ) .
-				"</td>
-				<td class='mw-input'>" .
-				Html::input( 'wpReason', $reason, 'text', array(
-					'size' => '60',
-					'maxlength' => '255',
-					'tabindex' => '2',
-					'id' => 'wpReason',
-					'autofocus'
-				) ) .
-				"</td>
-			</tr>";
+			Html::openElement( 'fieldset', array( 'id' => 'mw-delete-table' ) ) .
+			Html::element( 'legend', null, wfMessage( 'delete-legend' )->text() ) .
+			Html::openElement( 'div', array( 'id' => 'mw-deleteconfirm-table' ) ) .
+			Html::openElement( 'div', array( 'id' => 'wpDeleteReasonListRow' ) ) .
+			Html::label( wfMessage( 'deletecomment' )->text(), 'wpDeleteReasonList' ) .
+			'&nbsp;' .
+			Xml::listDropDown(
+				'wpDeleteReasonList',
+				wfMessage( 'deletereason-dropdown' )->inContentLanguage()->text(),
+				wfMessage( 'deletereasonotherlist' )->inContentLanguage()->text(),
+				'',
+				'wpReasonDropDown',
+				1
+			) .
+			Html::closeElement( 'div' ) .
+			Html::openElement( 'div', array( 'id' => 'wpDeleteReasonRow' ) ) .
+			Html::label( wfMessage( 'deleteotherreason' )->text(), 'wpReason' ) .
+			'&nbsp;' .
+			Html::input( 'wpReason', $reason, 'text', array(
+				'size' => '60',
+				'maxlength' => '255',
+				'tabindex' => '2',
+				'id' => 'wpReason',
+				'class' => 'mw-ui-input-inline',
+				'autofocus'
+			) ) .
+			Html::closeElement( 'div' );
 
 		# Disallow watching if user is not logged in
 		if ( $user->isLoggedIn() ) {
-			$form .= "
-			<tr>
-				<td></td>
-				<td class='mw-input'>" .
+			$form .=
 					Xml::checkLabel( wfMessage( 'watchthis' )->text(),
-						'wpWatch', 'wpWatch', $checkWatch, array( 'tabindex' => '3' ) ) .
-				"</td>
-			</tr>";
+						'wpWatch', 'wpWatch', $checkWatch, array( 'tabindex' => '3' ) );
 		}
 
-		$form .= "
-			$suppress
-			<tr>
-				<td></td>
-				<td class='mw-submit'>" .
+		$form .=
+				Html::openElement( 'div' ) .
+				$suppress .
 					Xml::submitButton( wfMessage( 'deletepage' )->text(),
-						array( 'name' => 'wpConfirmB', 'id' => 'wpConfirmB', 'tabindex' => '5' ) ) .
-				"</td>
-			</tr>" .
-			Xml::closeElement( 'table' ) .
+						array(
+							'name' => 'wpConfirmB',
+							'id' => 'wpConfirmB',
+							'tabindex' => '5',
+							'class' => $useMediaWikiUIEverywhere ? 'mw-ui-button mw-ui-destructive' : '',
+						)
+					) .
+				Html::closeElement( 'div' ) .
+			Html::closeElement( 'div' ) .
 			Xml::closeElement( 'fieldset' ) .
 			Html::hidden(
 				'wpEditToken',
diff --git a/resources/src/mediawiki.ui/components/inputs.less b/resources/src/mediawiki.ui/components/inputs.less
index 06a4ccdf5e..685ca4d9c9 100644
--- a/resources/src/mediawiki.ui/components/inputs.less
+++ b/resources/src/mediawiki.ui/components/inputs.less
@@ -129,3 +129,11 @@ input.mw-ui-input-large {
 	font-weight: bold;
 	line-height: 1.25em;
 }
+
+// Tablet and desktop specific styling tweaks.
+@media all and (min-width: 768px) {
+	// Make inline elements take up a sensible amount of the screen on wider devices.
+	.mw-ui-input-inline {
+		min-width: 320px;
+	}
+}